1. <!DOCTYPE html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title></title>
  7. 	</head>
  8.  
  9. 	<body>
  10. 		<span id="time"></span>
  11. 		<script>
  12. 			//倒计时
  13. 			!(function() {
  14. 				var time = document.querySelector("#time");
  15. 				var oldtime = new Date(); //传入的时间
  16. 				oldtime = oldtime.setDate(oldtime.getDate() + 1);//模拟24小时后的时间
  17. 				//时间换算
  18. 				function timer(oldtime) {
  19. 					var newtime = new Date();
  20. 					var time = (oldtime - newtime) / 1000;
  21.  
  22. 					var d = parseInt(time / (60 * 60 * 24));
  23. 					var h = parseInt(time / 60 / 60 % 24);
  24. 					var m = parseInt(time / 60 % 60);
  25. 					var s = parseInt(time % 60);
  26. 					return d + "天" + h + "小时" + m + "分钟" + s + "秒";
  27. 				}
  28.  
  29. 				setInterval(function(){
                        　　　　　　　　time.innerHTML = timer(oldtime);
                    　　　　　　　　　　}, 1000)
  30. 			})()
  31. 		</script>
  32. 	</body>
  33.  
  34. </html>

js模拟24小时的倒计时效果的更多相关文章

  1. js 模拟QQ聊天窗口图片播放效果（带滚轮缩放）

    页面效果如下: 完整代码如下: <!DOCTYPE html> <html> <head> <title>Test</title> < ...

  2. js模拟jq获取id

    js模拟jq获取id: (jquery)需要自己添加 <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  4. js实现倒计时效果

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...

  5. 二、JavaScript语言--JS实践--倒计时效果

    主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...

  6. 纯js倒计时效果（交流加群：452892873）（本群每天都更新学习资料）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 页面倒计时跳转页面效果，js倒计时效果

    页面倒计时跳转页面效果,js倒计时效果 >>>>>>>>>>>>>>>>>>>> ...

  8. 通过JS模拟select表单，达到美化效果[demo][转]

    转自: http://www.cnblogs.com/dreamback/p/SelectorJS.html 通过JS模拟select表单,达到美化效果 Demo ------------------ ...

  9. 通过JS模拟select表单，达到美化效果[demo]

    .m-form{background:#fff;padding:50px;font-family:12px/1.5 arial,\5b8b\4f53,sans-serif;} .m-form ul,. ...

随机推荐

  1. mongodb 数据操作(2)

    查询 db.student.find({}) 查询db.student.find({name:"李强1"}) 查询   条件查询 db.student.find({sex:&quo ...

  2. Java Web开发技术教程入门-Model1和Model2

    今天我们聊聊JSP开发中的Model1和Model2. Model1采用了JSP+JavaBean技术开发Web应用.其中,JSP实现页面显示,业务逻辑和流程控制,数据处理由JavaBean完成.在J ...

  3. Java8 parallelStream浅析

    JAVA8中引入了lamda表达式和Stream接口.其丰富的API及强大的表达能力极大的简化代码,提升了效率,同时还通过parallelStream提供并发操作的支持,本文探讨parallelStr ...

  4. idea-代码格式化快捷键设置（2019.1版）

    idea默认格式化快捷键是:Ctrl+Alt+L,有时会因其它软件快捷键的冲突导致失灵. 设置方法如下: 1.File -->  Settings... 2. Keymap -> Code ...

  5. 全面解析java编码问题

    1.web.xml文件里配置 <filter> <filter-name>CharacterEncodingFilter</filter-name> <fil ...

  6. luogu题解 UVA534 【Frogger--最小瓶颈边

    题目链接: https://www.luogu.org/problemnew/show/UVA534 Update 6.18 多点对最短瓶颈路算法:https://www.cnblogs.com/Ry ...

  7. 104、验证Swarm数据持久性 （Swarm11）

    参考https://www.cnblogs.com/CloudMan6/p/8016994.html   上一节我们成功将 nfs 的volume挂载到 Service上,本节验证 Failover时 ...

  8. Linux scp命令详解（服务器之间复制文件或目录）

    scp:服务器之间复制文件或目录 一.命令格式: scp [-1246BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] ...

  9. SuperMap-WebGL-坐标系及转换说明

    转载自:https://blog.csdn.net/supermapsupport/article/details/89519310 一.坐标系介绍我们先来列举下Cesium中的坐标系:WGS84经纬 ...

  10. HashMap原理探究

    一.写随笔的原因:HashMap我们在平时都会用,一般面试题也都会问,借此篇文章分析下HashMap(基于JDK1.8)的源码. 二.具体的内容: 1.简介: HashMap在基于数组+链表来实现的, ...