JS倒计时两种种实现方式 很不错

最近做浏览器界面倒计时,用js就实现,两种方式:

一:设置时长,进行倒计时。比如考试时间等等

代码如下:

<html>
<head>
<meta charset="UTF-8">
<title>简单时长倒计时</title>
<SCRIPT type="text/javascript">
            var maxtime = 60 * 60; //一个小时,按秒计算,自己调整!
            function CountDown() {
                if (maxtime >= 0) {
                    minutes = Math.floor(maxtime / 60);
                    seconds = Math.floor(maxtime % 60);
                    msg = "距离结束还有" + minutes + "分" + seconds + "秒";
                    document.all["timer"].innerHTML = msg;
                    if (maxtime == 5 * 60)alert("还剩5分钟");
                        --maxtime;
                } else{
                    clearInterval(timer);
                    alert("时间到,结束!");
                }
            }
            timer = setInterval("CountDown()", 1000);
        </SCRIPT>
</head>
<body>
<div id="timer" style="color:red"></div>
<div id="warring" style="color:red"></div>
</body>
</html>

二:设置时间戳,进行倒计时。比如距离活动结束时间等等

代码如下:

<html>
<head>
    <meta charset="UTF-8">
    <title>js简单时分秒倒计时</title>
    <script type="text/javascript">
        function countTime() {
            //获取当前时间
            var date = new Date();
            var now = date.getTime();
            //设置截止时间
            var str="2017/5/17 00:00:00";
            var endDate = new Date(str);
            var end = endDate.getTime();  

            //时间差
            var leftTime = end-now;
            //定义变量 d,h,m,s保存倒计时的时间
            var d,h,m,s;
            if (leftTime>=0) {
                d = Math.floor(leftTime/1000/60/60/24);
                h = Math.floor(leftTime/1000/60/60%24);
                m = Math.floor(leftTime/1000/60%60);
                s = Math.floor(leftTime/1000%60);
            }
            //将倒计时赋值到div中
            document.getElementById("_d").innerHTML = d+"天";
            document.getElementById("_h").innerHTML = h+"时";
            document.getElementById("_m").innerHTML = m+"分";
            document.getElementById("_s").innerHTML = s+"秒";
            //递归每秒调用countTime方法,显示动态时间效果
            setTimeout(countTime,1000);  

        }
    </script>
</head >
<body onload="countTime()" >
    <div>
        <span id="_d">00</span>
        <span id="_h">00</span>
        <span id="_m">00</span>
        <span id="_s">00</span>
    </div>
</body>
</html>

原文地址:https://www.cnblogs.com/dongh/p/9026433.html

时间: 2024-10-10 05:19:25

JS倒计时两种种实现方式 很不错的相关文章

Js的两种post方式

第一种提交post的方式是传统方式,判断浏览器进行post请求. var xmlobj; //定义XMLHttpRequest对象 function CreateXMLHttpRequest() { if(window.ActiveXObject) //如果当前浏览器支持Active Xobject,则创建ActiveXObject对象 { //xmlobj = new ActiveXObject("Microsoft.XMLHTTP"); try { xmlobj = new Act

vue引用外部JS的两种种方案

前言 肯定会遇到没有npm化的库 自己写的js 方法 在Vue中该怎么引用呢 第一种 如果库是es6写的 就可以用import 引入 比如我自己写的http 封装接口的方法 就可以这样子导入哦 第二种是jquery的库 可以在静态资源导入(或者是cdn资源加载) 我是vue-cli 3.0 基础之上架构的 把squire这个富文本框放进public文件下面 在index.html中这样子引用 Fannie式总结 自己封装方法 就采用es6方法 这样方便 第三方原生js 或者是jq的插件 直接cd

很不错的js特效

这里有好多的js特效:http://www.jsfoot.com/jquery/images/qh/ jquery图片特效 jquery幻灯片 .... 有什么js需要可以到这里来下载:http://www.jsfoot.com/jquery/images/qh/ 很不错的js特效,布布扣,bubuko.com

自制Javascript分页插件,支持AJAX加载和URL带参跳转两种初始化方式,可用于同一页面的多个分页和不同页面的调用

闲话部分 最近闲着实在无聊,就做了点小东西练练手,由于原来一直在用AspNetPager进行分页,而且也进行了深度的定制与原有系统整合的也不错,不过毕竟是用别人的,想着看自己能试着做出来不能,后台的分页插件已经有比较成熟的了,那就自己试着写一个前台分页吧. 话不多说,先上效果图: 优点与缺点 来说说优缺点吧,首先AspNetPager是后台分页控件,所以在向客户端回传HTML文档之前生成HTML阶段 就会把分页代码生成完毕,然后回传,而JS是前端代码,就是HTML文档在服务器组织完毕往客户端传送

很不错的文章---【问底】徐汉彬:亿级Web系统搭建——单机到分布式集群

原文:很不错的文章---[问底]徐汉彬:亿级Web系统搭建--单机到分布式集群 [导读]徐汉彬曾在阿里巴巴和腾讯从事4年多的技术研发工作,负责过日请求量过亿的Web系统升级与重构,目前在小满科技创业,从事SaaS服务技术建设. 大规模流量的网站架构,从来都是慢慢“成长”而来.而这个过程中,会遇到很多问题,在不断解决问题的过程中,Web系统变得越来越大.并且,新的挑战又往往出现在旧的解决方案之上.希望这篇文章能够为技术人员提供一定的参考和帮助. 以下为原文 当一个Web系统从日访问量10万逐步增长

js的6种继承方式

重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这东西肯定是有用的,应该抛开偏见,认真地了解一下 约定 P.S.下面将展开一个有点长的故事,所以有必要提前约定共同语言: 1 2 3 4 5

SQL注入原理讲解,很不错!

SQL注入原理讲解,很不错! 原文地址:http://www.cnblogs.com/rush/archive/2011/12/31/2309203.html 1.1.1 摘要 日前,国内最大的程序员社区CSDN网站的用户数据库被黑客公开发布,600万用户的登录名及密码被公开泄露,随后又有多家网站的用户密码被流传于网络,连日来引发众多网民对自己账号.密码等互联网信息被盗取的普遍担忧. 网络安全成为了现在互联网的焦点,这也恰恰触动了每一位用户的神经,由于设计的漏洞导致了不可收拾的恶果,验证了一句话

一款很不错的手机游戏Deemo

今天我在这推荐一款很不错的手机音乐游戏<Deemo> Deemo是由Rayark Inc.发行的一款音乐手机游戏,是2013年11月13日发行的游戏,是一款钢琴节奏游戏. Deemo不同于一般的音乐游戏,在你享受音乐的同时你还可以体会到游戏自带的剧情:小黑人Deemio和从天而降的少女 两人一起敲响了美妙的音符. 这款游戏最吸引我的方面他那抒情的音乐以及与音乐相联系的唯美的剧情,你在一首曲子一首曲子往下弹奏的时候,你仿佛 可以身临其境的体会到Deemo与女孩两人的友谊. 游戏的进行方式为下落式

从一个简单例子来理解js引用类型指针的工作方式

? 1 2 3 4 5 6 7 <script> var a = {n:1};  var b = a;   a.x = a = {n:2};  console.log(a.x);// --> undefined  console.log(b.x);// --> [object Object]  </script> 上面的例子看似简单,但结果并不好了解,很容易把人们给想绕了--"a.x不是指向对象a了么?为啥log(a.x)是undefined?".&