<!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. RPC 框架 介绍 （转）

    出处: 谁能用通俗的语言解释一下什么是 RPC 框架? 知乎: 问题:了解到最近 Java 的 Netty 很火,只知道它是这样类型的一种框架.想了解一下它主要用于解决了什么问题?适用于什么样的场景? ...

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

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

  3. centos配置mutt和msmtp发送邮件

    一.安装mutt yum install mutt -y 二.配置mutt vim /etc/Muttrc 在里面找到下面几行,并将内容修改为你自己的内容(下面几行分布在不同位置,请耐心查找,记得去掉 ...

  4. [转载]十六进制数的两种不同表示：0x和H

    来源:https://blog.csdn.net/u013773644/article/details/519811860x是16进制的前缀,H是16进制的后缀 都是表示十六进制数,意义上没有什么区别 ...

  5. 自己实现JDK动态代理

    实验的目录结构 1.JDK动态代理 先来一段jdk动态代理的demo,首先创建一个接口,Person public interface Person { public void eat(); } 实现 ...

  6. idea安装完成后要做的几件事（设置字体、编码、行号）

    1.设置字体大小和样式 打开设置:File-->Settings 看到如下界面,输入font,点击Editor目录下的Font设置字体大小和样式: Font:字体样式 size:字体大小 Fal ...

  7. postgres中的函数

    1.编写一个只有入参,没有出参的函数: CREATE OR REPLACE FUNCTION add(a NUMERIC, b NUMERIC) RETURNS NUMERIC AS $$ SELEC ...

  8. 七，ingress及ingress cluster

    目录 Service 类型 namespace 名称空间 Ingress Controller Ingress Ingress-nginx 进行测试 创建对应的后端Pod和Service 创建 Ing ...

  9. python将str类型的数据变成datetime时间类型数据

    如下: import datetime date_str = '2019_05_09' date_date = datetime.date(*map(int, date_str.split('_')) ...

  10. ​TDD明白了，ATDD测试到底是什么？

    随着敏捷开发的蓬勃发展.遍地开花,TDD(Test Drive Development测试驱动开发)的概念已经深入软件研发从业者的心中. TDD讲究的是:“测试在先.编码在后”.有别于以往的“先编码. ...