<!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. Luogu P4902 乘积

    题目 我们要求的是 \[ \prod\limits_{i=a}^b\prod\limits_{j=1}^i(\frac ij)^{\lfloor\frac ij\rfloor} \] 先把它拆开 \[ ...

  2. myBatis+Spring+SpringMVC框架面试题整理

    myBatis+Spring+SpringMVC框架面试题整理(一) 2018年09月06日 13:36:01 新新许愿树 阅读数 14034更多 分类专栏: SSM   版权声明:本文为博主原创文章 ...

  3. Java continue 、break、标签

    任何迭代语句的主体部分都可以用break和continue控制循环流程,其中break用于强行退出循环,不执行循环中剩余的语句, 而continue则停止当前的迭代,然后退回循环起始处,开始下一次迭代 ...

  4. spring boot本地开发与docker容器化部署的差异

    spring boot本地开发与docker容器化部署的差异: 1. 文件路径及文件名区别大小写: 本地开发环境为windows操作系统,是忽略大小写的,但容器中区分大小写 2. docker中的容器 ...

  5. Linux内核、mysql内核、Tcp/Ip内核、java等知识书籍

    LINUX <linux内核设计与实现>(2011年出版,链接:https://pan.baidu.com/s/107hriLNVt05A8egeU8Du-g  密码:0cgn) < ...

  6. openlayers之点，线，面(以城市，河流，省份为例，分别对应点线面)

    kpst._this这里指向初始化的map // 设置标注样式函数 function createStyle(name) { // 河流style var riverStyle = new Style ...

  7. zabbix-server、proxy、agent的分布式部署步骤

    1.准备工作 关闭防火墙和SELinux防火墙,因为他们会限制一些访问权限,如果服务器不能关闭就需要手动设置规则,这里测试用就直接关闭了 service firewalld stop; setenfo ...

  8. 面试复习题（一）Java系列

    (根据自己的理解和根据黑马资料总结—意见不统一我会写上自己的理解) 一.Java面向对象 1.面向对象都有哪些特性以及你对这些特性的理解 继承.封装.多态.(抽象) 2.public,private, ...

  9. 初学者如何从零学习人工智能？（AI）

    一.机器学习 有关机器学习领域的最佳介绍,请观看Coursera的Andrew Ng机器学习课程. 它解释了基本概念,并让你很好地理解最重要的算法. 有关ML算法的简要概述,查看这个TutsPlus课 ...

  10. Java I/O(一)流和文件类File的概述、FileInputStream和FileInputStream

    一.流概述 & InputStream.OutputStream 流包括输入流和输出流,即I/O(Input和Output),具体结构如下: I/O类都被放在java.io包中,所有的输入流类 ...