<!DOCTYPE html>
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS彩色方块倒计时代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=yes" />
</head>
<style>
*{padding: 0; margin: 0; font-family: "Lato", sans-serif}
i{font-size: 14px}
body{background: #0d0d0d; color: #ffffff}
div{font-size: 20px; text-align: center; padding-top: 15px;}
div span{display: inline-block; width: 50px; height: 50px;padding: 10px; border-radius: 5px}
p{font-size: 18px}
span.red{background: #ff0000}
span.yg{background: yellowgreen}
span.or{background: orange}
span.pi{background: palevioletred}
span.pk{background: #00a0e9}
span.mk{background: #1FADC5}
span p:first-child{font-size: 25px}
span p:last-child{font-size: 14px}
</style>
<body>
<script type="text/javascript" src="js/timecountdown.js"></script>
<script type="text/javascript">
/**
* time.day 和 time.dayZero 区别
* time.day 如果是1天 返回 1
* time.dayZero 如果是1天 则返回 01
* 除了day拥有Zero外 hour,minute,second,msec都有Zero 即小于10的,都会在前面补0
*/
window.onload=function(){
xcsoft.countdown('2028-11-11',function (time) {
//time.days=总天数
document.getElementById("y1").innerHTML=time.year
document.getElementById("d1").innerHTML=time.day
document.getElementById("h1").innerHTML=time.hourZero
document.getElementById("i1").innerHTML=time.minuteZero
document.getElementById("s1").innerHTML=time.secondZero
document.getElementById("m1").innerHTML=time.msecZero
},function (time) {
//倒计时结束后的操作
})
xcsoft.countup('2018-11-11',function (time) {
document.getElementById("y2").innerHTML=time.year
document.getElementById("d2").innerHTML=time.day
document.getElementById("h2").innerHTML=time.hourZero
document.getElementById("i2").innerHTML=time.minuteZero
document.getElementById("s2").innerHTML=time.secondZero
})
var nes=parseInt(new Date().getTime()/1000)+60;
xcsoft.countdown(parseInt(nes)+'.3',function (time) {
document.getElementById("s3").innerHTML=time.secondZero
document.getElementById("m3").innerHTML=time.msecZero
})
}
</script>
<div>
<i>距2028年11月11日还有</i>
<div>
<span class="red">
<p id="y1"></p>
<p>年</p>
</span>
<span class="yg">
<p id="d1"></p>
<p>天</p>
</span>
<span class="or">
<p id="h1"></p>
<p>时</p>
</span>
<span class="pi">
<p id="i1"></p>
<p>分</p>
</span>
<span class="pk">
<p id="s1"></p>
<p>秒</p>
</span>
<span class="mk">
<p id="m1"></p>
<p>毫秒</p>
</span>
</div>
</div>
<div>
<i>从2018年11月11日至今已经过去</i>
<div>
<span class="red">
<p id="y2"></p>
<p>年</p>
</span>
<span class="yg">
<p id="d2"></p>
<p>天</p>
</span>
<span class="or">
<p id="h2"></p>
<p>时</p>
</span>
<span class="pi">
<p id="i2"></p>
<p>分</p>
</span>
<span class="pk">
<p id="s2"></p>
<p>秒</p>
</span>
</div>
</div>
<div>
<i>60秒倒计时</i>
<div>
<span class="pk">
<p id="s3"></p>
<p>秒</p>
</span>
<span class="mk">
<p id="m3"></p>
<p>毫秒</p>
</span>
</div>
</div>
</body>
</html>
JS实现精确到毫秒的彩色方块倒计时特效源码.zip
版权申诉
157 浏览量
2022-11-01
01:01:57
上传
评论
收藏 3KB ZIP 举报
毕业_设计
- 粉丝: 1935
- 资源: 1万+
最新资源
- TG-2024-05-23-204718255.mp4
- 候志强@181 5428 8938_20240420112107.amr
- spispispispispi
- 实验二:IP协议分析.zip
- 驱动代码驱动代码驱动代码驱动代码
- SVID_20240523_141155_1.mp4
- Code for the complete guide to tkinter tutorial
- 关于百货中心供应链管理系统.zip
- SimpleFolderIcon-master 修改Unity的Project下的文件夹图标
- A python Tkinter widget to display tile based maps
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈