<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<span id="time"></span>

		<script>

			//倒计时

			!(function() {

				var time = document.querySelector("#time");

				var oldtime = new Date(); //传入的时间

				oldtime = oldtime.setDate(oldtime.getDate() + 1);//模拟24小时后的时间

				//时间换算

				function timer(oldtime) {

					var newtime = new Date();

					var time = (oldtime - newtime) / 1000;

					var d = parseInt(time / (60 * 60 * 24));

					var h = parseInt(time / 60 / 60 % 24);

					var m = parseInt(time / 60 % 60);

					var s = parseInt(time % 60);

					return d + "天" + h + "小时" + m + "分钟" + s + "秒";

				}

				setInterval(function(){
                    　　　　　　　　time.innerHTML = timer(oldtime);
                　　　　　　　　　　}, 1000)

			})()

		</script>

	</body>

</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. 正则爬取某段子网站前20页段子(request库)

    首先还是谷歌浏览器抓包对该网站数据进行分析,结果如下: 该网站地址:http://www.budejie.com/text 该网站数据都是通过html页面进行展示,网站url默认为第一页,http:/ ...

  2. 使用history.js解决浏览器对history使用的兼容问题

    history.js即可以解决禁止浏览器回退的浏览器兼容问题,也能解决直接修改浏览器当前标签页url的浏览器兼容问题. 解决禁止浏览器回退: <script src="../../js ...

  3. LoadRunner之使用JSEESIONID访问网站

    LoadRunner使用笔记 JSESSIONID的含义:https://www.cnblogs.com/caiwenjing/p/8081391.html 1.使用JSESSIONID访问网站 Ac ...

  4. leetcode中等题

    # Title Solution Acceptance Difficulty Frequency     1 Two Sum       44.5% Easy     2 Add Two Number ...

  5. Tomcat的安全性

    Web应用程序的一些内容是受限的,只有授权的用户在提供了正确的用户名和密码后才能查看他们,servlet技术支持通过配置部署 描述器(web.xml)来对这些内容进行访问控制,那么web容器是怎么样支 ...

  6. 日常用User-Agent列表

    "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; AcooBrowser; .NET CLR 1.1.4322; .NET C ...

  7. 分布式的几件小事（三）dubbo的通信协议与序列化

    1.dubbo的通信协议 ①dubbo协议 Dubbo缺省协议采用单一长连接和NIO异步通讯,适合于小数据量大并发的服务调用,以及服务消费者机器数远大于服务提供者机器数的情况. 特点 : dubbo缺 ...

  8. 多Y轴，下拉框渲染，相同类型不同数据

    放上json文件: { "2017年3月": { "outKou": "5525.86", "inKou": " ...

  9. docker下进去mysql 编写语句

    设置密码可使用 docker exec -it mysql01 bash        --mysql01:数据库名字 mysql -u root -p ALTER USER 'root'@'%' I ...

  10. 这打车App麻烦了！遭黑客勒索巨额比特币

    6月17日下午,易到用车发布<客服电话故障公告>称,5月25日-26日,易到平台遭到网络黑客攻击,核心服务器被入侵,攻击导致易到核心数据被加密,服务器宕机,绝大部分服务功能受到波及,且攻击 ...