倒计时

￡神魔★判官ぃ 2023-06-11 13:25 46阅读 0赞

倒计时JS部分

<script type="text/javascript">
     //getTime 获取距离1970年1月1日午夜00:00:00之间的毫秒差
     var oDiv=document.getElementById("div1");
     var str=getSpanTime();
     oDiv.innerHTML="秒杀倒计时" str;
     //定时器 每秒钟自动执行包含的函数
     var timer=window.setInterval(function(){ 
     var str=getSpanTime();
     oDiv.innerHTML="秒杀倒计时" str;
     },1000);
     function getSpanTime(){ 
     // 把本机时间变成标准时间格式的形式
     var tarTime=new Date("2016/06/28 00:00:00");
     //获取时间，一般不能用本机时间来作为秒杀啊等重大活动的时间 本例子只是用来编写倒计时的过程
     var nowTime=new Date();
     //获取目标时间距离1970年的时间差
     var tarSpan=tarTime.getTime();
     //获取当前时间距离1970年的时间差
     var nowSpan=nowTime.getTime();
     //目标时间与当前时间差
     var diffTime=tarSpan-nowSpan;
     //获取小时数
     var hour=Math.floor(diffTime/(1000*60*60));
     var hourMs=hour*60*60*1000;
     var spanMs=diffTime-hourMs;
     //获取分钟数
     var minute=Math.floor(spanMs/(1000*60));
     var minuteMs=minute*60*1000;
     var spanMs1=spanMs-minuteMs;
     //获取秒数
     var second=Math.floor(spanMs1/1000);
     return zero(hour) ":" zero(minute) ":" zero(second);
     }
     //小于10的数补零
     function zero(value){ 
     return value<10? "0" value:value;
     }
    </script>
    
    倒计时CSS部分

body,div{ 
     margin: 0px;
     padding: 0px;
     }
     #div1{ 
     width: 800px;
     height: 50px;
     line-height: 50px;
     text-align: center;
     margin: 10px auto;
     border: 1px solid coral;
     background: -webkit-linear-gradient(top left,#2eafbb,greenyellow,sandybrown);
     font-size:20px;
     font-family: "微软雅黑";
     }
    </style>

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关倒计时

倒计时JS部分 <script type="text/javascript"> //getTime 获取距离1970年1月1日午夜00:00:00之间的毫秒

￡神魔★判官ぃ/ 2023年06月11日 13:25/ 0 赞/ 47 阅读

相关倒计时

js部分： export default function CalcTime(endtime) { var obj = {}; var

男娘i/ 2023年05月31日 06:38/ 0 赞/ 133 阅读

相关 C#倒计时

C\新手，记录一下倒计时，30s的倒计时，附上效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

柔光的暖阳◎/ 2023年01月19日 03:09/ 0 赞/ 400 阅读

相关 js 天数倒计时时间倒计时

export function getOverTimeDown(endDateStr: string, outValue?: { value: string }, fn

àì夳堔傛蜴生んèń/ 2022年09月11日 12:10/ 0 赞/ 424 阅读

相关倒计时

验证输入手机号验证码倒计时 ![这里写图片描述][SouthEast]![这里写图片描述][SouthEast 1] \如上图所示要实现验证码的倒计时的效果

不念不忘少年蓝@/ 2022年06月02日 10:12/ 0 赞/ 508 阅读

相关 JS-实现秒表倒计时+缓存倒计时

实现秒表倒计时+缓存倒计时功能 <!DOCTYPE html> <html> <head> <meta ch

约定不等于承诺〃/ 2022年05月17日 12:38/ 0 赞/ 492 阅读

相关 javascript倒计时

<script type="text/javascript"> clock();//一开始来去初始化倒计时 setI

阳光穿透心脏的1/2处/ 2022年01月26日 15:01/ 0 赞/ 440 阅读

相关倒计时

js代码 var EndTime= new Date('2017/2/18 00:00:00'); //设置到期时间 var NowTime = ne

- 日理万妓/ 2021年12月23日 08:41/ 0 赞/ 646 阅读

相关 js倒计时

![20190820151447888.png][] function tow(n) { return n >= 0 &&

- 日理万妓/ 2021年10月19日 09:52/ 0 赞/ 567 阅读

相关 JS 倒计时

经常遇到需要倒计时的地方，下面的JS可以简单实现倒计时，当然可以加上Css使得界面更加美观！ `<script type=` `"text/javascript"` `>`

约定不等于承诺〃/ 2021年09月29日 17:34/ 0 赞/ 677 阅读