html倒计时代码执行操作,JS倒计时两种实现方式代码实例

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

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

代码如下：

简单时长倒计时

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);

运行结果：

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

代码如下：

js简单时分秒倒计时

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);

}

运行结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html倒计时代码执行操作,JS倒计时两种实现方式代码实例相关推荐

html倒计时代码执行操作,JS实现十分钟倒计时代码实例
编写JS倒计时代码需要用到很多JavaScript知识,比如:if函数,Math.floor,定时器setInterval等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaSc ...
【sklearn】数据预处理之独热编码（含两种实现方式+代码理解）
最近学习机器学习,接触到独热编码相关内容,参考了一些资料,加上自己的思考,做出了如下总结: 一.什么是独热编码独热编码,即One-Hot编码,又称一位有效编码,其方法是使用N位状态寄存器来对N个状态 ...
java7代码示例_Java中的七种排序方式代码示例
packagebaseJava;/*** @title SortMethods.java *@authorDonsenChen * @Date 2018年5月2日上午10:16:03 * @Desc ...
iOS活动倒计时的两种实现方式
代码地址如下: http://www.demodashi.com/demo/11076.html 在做些活动界面或者限时验证码时, 经常会使用一些倒计时突出展现. 现提供两种方案: 一.使用NSTim ...
多线程python实现方式_python多线程的两种实现方式（代码教程）
本篇文章给大家带来的内容是关于python多线程的两种实现方式(代码教程),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 线程是轻量级的进程,进程中可划分出多个线程,线程可独立的调度 ...
页面倒计时按钮的两种实现方式
页面倒计时按钮的两种实现方式: 现假设需求为:点击打开页面后,让用户阅读本页面内容并进行60s倒计时,倒计时结束后用户才可以点击"确定"按钮,进行页面跳转. ①第一种实现方式,打开 ...
JS中有两种自加法操作
JS中有两种自加法操作.它们的运算符是++,它们的函数是向1添加运算符. 我和我的区别在于操作的顺序和组合的方向. 其中: ++var被称为预自动添加,变量执行自动添加操作后.它的操作是先执行自动加法 ...
JS，两种在页面加载完成后自动执行的方法（ready，onload）
JS,两种在页面加载完成后自动执行的方法 1.jQuery的ready事件,需要引入jQuery的包才能使用,表示文档结构已经加载完成(不包含图片等非文字媒体文件): ready可以多次调用,可以绑定 ...
运行python程序的两种方式交互式和文件式_执行Python程序的两种方式
交互式(了解) 交互式环境下,敲完一条命令按下enter键马上能看到结果,调试程序方便.程序无法永久保存,关掉cmd窗口数据就消失了. 命令行式(了解) 打开文本编辑器,在文本编辑器中写入一串字符. ...
在.NET中执行Async/Await的两种错误方法
微信公众号:架构师高级俱乐部关注可了解更多的编程,架构知识.问题或建议,请公众号留言; 如果你觉得此文对你有帮助,欢迎转发在.NET中执行异步/等待的两种错误方法在应用开发中,我们为了提高应用程 ...

html倒计时代码执行操作,JS倒计时两种实现方式代码实例

html倒计时代码执行操作,JS倒计时两种实现方式代码实例相关推荐

最新文章

热门文章