要求：
1.做一個走動的時鐘 （ 這樣的樣式12：00：00 ）
2.可以修改當前時間並隨着修改完的時間走動
3.還原當前時間
4.修改時間不能小於當前時間
5.年月日也加上
這是我和小夥伴一起做的一個JS練手小demo，先上效果圖：
註釋我都寫在代碼裏了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實時時間展示</title>
<style>
#clock{
width: 480px;
border-radius: 28px;
background: #000000;
margin: 240px auto;
font-size: 48px;
color: #ffffff;
padding: 40px;
}
</style>
</head>
<body>
<input type="button" value="還原當前時間" onclick="returnTime()" />
<input type="datetime-local" id="updateTime" step="01" />
<input type="button" value="修改時間" onclick="changeTime()" />
<div id="clock"></div>
</body>
<script>
var d = new Date();
//傳入的時間初始值，以對象的方式，可以在傳參的過程中改變參數的值
var c = {a:d}
//頁面初始化時獲取當前系統時間
setTime(c);
var temp;
//每隔一秒，再放置一次最新的時間
temp = setInterval("setTime(c)", 1000);
//返回系統當前時間
function returnTime() {
var d = new Date();
c.a = d;
}
//設置時間，定時器執行的方法
function setTime(o) {
o.a = new Date(o.a);
document.getElementById("clock").innerHTML =
o.a.getFullYear() + "-" + addZero((o.a.getMonth() + 1)) + "-" + addZero(o.a.getDate()) + " "
+ addZero(o.a.getHours()) + ":" + addZero(o.a.getMinutes()) + ":" + addZero(o.a.getSeconds());
o.a = new Date(o.a.getTime()+1000);
}
//時間格式補0
function addZero(d) {
if (d < 10) {
return "0" + d;
} else {
return d;
}
}
//修改時間且大於當前時間
function changeTime() {
var clockValue = document.getElementById("clock").innerHTML;
var clock = new Date(Date.parse(clockValue));
var updateTimeValue = document.getElementById("updateTime").value;
var updateTime = new Date(Date.parse(updateTimeValue));
if (updateTimeValue) {
if (updateTime - clock >= 0) {
//執行修改操作
c.a = updateTime;
} else {
alert("修改時間要大於當前時間");
}
} else {
alert("請先選擇要修改的時間");
}
}
</script>
</html>
這個是另外一個小夥伴的思路：
效果圖：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS時間</title>
<style>
</style>
</head>
<body>
<div id="time"></div>
<div id="hours" style="display: inline"></div>時
<div id="minutes" style="display: inline"></div>分
<div id="seconds" style="display: inline"></div>秒
<div id="a"></div>
<script type="text/javascript">
function time() {
var vWeek, vWeek_s, vDay;
vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var date = new Date();
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
hours = date.getHours();
minutes = date.getMinutes();
seconds = date.getSeconds();
vWeek_s = date.getDay();
document.getElementById("time").innerHTML = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + vWeek[vWeek_s];
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
};
function times() {
var hours = document.getElementById("hours").innerHTML * 1;
minutes = document.getElementById("minutes").innerHTML * 1;
seconds = document.getElementById("seconds").innerHTML * 1;
seconds = seconds + 1;
if (seconds == 60) {
//alert("運行我了")
seconds = 0;
minutes = minutes + 1;
}
if (minutes == 60) {
minutes = 0;
hours = hours + 1;
}
if (hours == 24) {
hours = 0;
}
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
}
function xg() {
//alert("運行我了")
var shi = document.getElementById("shi").value * 1;
var fen = document.getElementById("fen").value * 1;
var miao = document.getElementById("miao").value * 1;
document.getElementById("hours").innerHTML = shi;
document.getElementById("minutes").innerHTML = fen;
document.getElementById("seconds").innerHTML = miao;
}
setInterval("times()", 1000);
window.onload = time;
</script>
<input id="shi" type="text" />時
<input id="fen" type="text" />分
<input id="miao" type="text" />秒
<button id="xg" onclick="xg()">修改</button>
</body>
</html>