时钟和倒计时

最新推荐文章于 2023-02-06 08:00:00 发布

web html

最新推荐文章于 2023-02-06 08:00:00 发布

阅读量289

点赞数

本文链接：https://blog.csdn.net/weixin_44748332/article/details/92840165

版权

1.时钟

</style>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
<button id="btn1">停止</button>
<button id="btn2">继续</button>
<script src="common.js"></script>
<script>

//定义时间的函数
function clock() {
//1.获取当前的时间对象
var dt = new Date();
var year = dt.getFullYear();
var month = dt.getMonth()+1;
var day = dt.getDate();
var week = dt.getDay();
var h = dt.getHours();
var m = dt.getMinutes();
var s = dt.getSeconds();

var weekArr = ["天","一","二","三","四","五","六"];
//大写的月. 自己实现!!

//封装补位的函数
//s = s < 10 ? "0"+s : s
function bu(i){
i = i < 10 ? "0"+i : i;
return i;
}
my$("dv1").innerHTML = year+"年"+month+"月"+bu(day)+"日星期"+weekArr[week];
my$("dv2").innerHTML = bu(h)+":"+bu(m)+":"+bu(s);
}
clock();
//添加定时器
var t = setInterval(clock, 1000);

//点击清除定时器
my$("btn1").onclick = function () {
clearInterval(t)
}
//点击继续
my$("btn2").onclick = function () {
clearInterval(t);
t = setInterval(clock, 1000)
}
</script>

2.倒计时

<body id="bd">
<span id="span1"></span>:
<span id="span2"></span>:
<span id="span3"></span>
<script src="common.js"></script>
<script>
function clock() {
//1.获取当前的时间
var dt = new Date();
//2.设置一个截止的时间
var end = new Date("2019/01/11 16:55:00");
//3.转化为毫秒
//console.log(dt.getTime());
var now = dt.getTime();
var ends = end.getTime();
//4.获取时间差
var cha = ends - now; // 毫秒
//5.转化为秒
var miao = cha /1000;
console.log(miao)
//判断时间差
if(miao > 0){
// 转化为时分秒
my$("span1").innerHTML = Math.floor(miao / 3600);
my$("span2").innerHTML = Math.floor( miao % 3600 / 60)
my$("span3").innerHTML = Math.floor(miao%60);

}else{
//清除定时器
clearInterval(t);
my$("bd").innerHTML = "放学啦"
}

}
clock();

var t = setInterval(clock, 1000)

</script>
</body>

web html

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
时钟和倒计时

1.时钟<style> *{ margin: 0; padding: 0; } body{ background-color: pink; color:cyan; text-align: center; ...
复制链接

扫一扫