<!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. LZH的多重影分身 qduoj 思维 差分

    LZH的多重影分身 qduoj 思维 差分 原题链接:https://qduoj.com/problem/591 题意 在数轴上有\(n\)个点(可以重合)和\(m\)条线段(可以重叠),你可以同时平 ...

  2. 动态树（LCT、Top Tree、ETT）

    LCT Upd: 一个细节:假如我们要修改某个节点的数据,那么要先把它makeroot再修改,改完之后pushup. LCT是一种维护森林的数据结构,本质是用Splay维护实链剖分. 实链剖分大概是这 ...

  3. HTML5自学2

    1.1   文字格式 一个杂乱无序.堆砌而成的网页,会让人感觉枯无味,而一个美观大方的网页,会让人有美轮美奂,流连忘返的感觉,本节将介绍如何设置网页文本格式. 文字格式包括字体.字号.文字颜色.字体风 ...

  4. 04 Python之while循环/格式化输出/运算符/编码

    1. while循环 while 条件: 循环体(break,continue) else: 循环体(break,continue) break:彻底干掉一个循环,直接跳出. continue:停止当 ...

  5. 一文搞懂网络知识，IP、子网掩码、网关、DNS、端口号

    网络的基本概念 客户端:应用 C/S(客户端/服务器) B/S(浏览器/服务器) 服务器:为客户端提供服务.数据.资源的机器 请求:客户端向服务器索取数据 响应:服务器对客户端请求作出反应,一般是返回 ...

  6. js鼠标点击特效，有关参数设置

    效果图,用的faststone--录像--togif,黄色圆圈实际是不显示的 博客后台管理设置 本地新建一个demo.html文件,可以自行测试,要引入jquery文件哦 来个“红橙黄绿蓝靛紫”的点击 ...

  7. 自己实现一个简化版Mybatis框架

    MyBatis框架的核心功能其实不难,无非就是动态代理和jdbc的操作,难的是写出来可扩展,高内聚,低耦合的规范的代码.本文完成的Mybatis功能比较简单,代码还有许多需要改进的地方,大家可以结合M ...

  8. appium 自动化测试环境搭建

    最近再学习appium,把学习的过程记录下来,以防止到时候 换个电脑就不知道这么安装搭建appium环境了. 环境搭建: 0.JDK环境是必备的,这里大家自行百度,   1.安装 node 环境,前辈 ...

  9. SSD源码解读——网络测试

    之前,对SSD的论文进行了解读,可以回顾之前的博客:https://www.cnblogs.com/dengshunge/p/11665929.html. 为了加深对SSD的理解,因此对SSD的源码进 ...

  10. golang连接activemq，发送接收数据

    介绍 使用golang连接activemq发送数据的话,需要使用一个叫做stomp的包,直接go get github.com/go-stomp/stomp即可 代码 生产者 package main ...