要求:
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>