步骤

1.获取span标签
2.获取现在的时间戳

3.获取未来的时间戳

4.将未来时间戳减去现在的时间戳等于相差的秒数

5.输出到页面

直接上代码

<span name="os">00d 00h 00m 00s</span>
<script>
// 获取span标签
osp = document.getElementsByName("os")[0]; // 一位数字的时候在前面加个0
function tow(n) {
return n >= 0 && n < 10 ? "0" + n : n;
} function getDate(){
// 获取现在的时间戳
var nowdate = new Date();
// 获取时间戳的毫秒数
var nowtime = nowdate.getTime(); // 获取未来的时间戳
var newdate = new Date("2020/1/11 18:00:00");
var newtime = newdate.getTime(); // 将未来时间戳减去现在的时间戳等于相差的秒数
var second = Math.floor((newtime - nowtime)/1000); // 一天等于86400秒,所以将相差的秒数除以86400等于剩余天数(math.floor向下取整)
var day = Math.floor(second/86400);
// 将秒数取余86400,等于剩余秒数
second %= 86400; // 一小时等于3600秒,所以将相差的秒数除以3600等于剩余小时(math.floor向下取整)
var hour = Math.floor(second/3600);
second %= 3600; var minute = Math.floor(second/60);
second %= 60; var ost = tow(day) + "d " + tow(hour) + "h " + tow(minute) + "m " + tow(second) + "s";
osp.innerHTML = ost;
}
getDate();
setInterval(getDate,1000); </script>

运行结果

使用js写简易的倒计时的更多相关文章

  1. Javascript基础示例:用JS写简易版贪吃蛇(面向对象)

    废话不多说,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  2. js写的5秒钟倒计时跳转

    使用js实现几秒以后倒计时跳转,这个在某些特殊情况下还是比较实用的,下面为大家介绍下具体的实现步骤,感兴趣的朋友不要错过  代码如下: <html>  <head>  < ...

  3. 使用Node.js实现简易MVC框架

    在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...

  4. [转] 使用Node.js实现简易MVC框架

    在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...

  5. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  6. 面试题之(js实现当年剩余时间倒计时程序)

    js实现当年剩余时间倒计时程序,请看代码: <script> function counter() { var date = new Date(); var year = date.get ...

  7. node.js 开发简易的小爬虫

    node.js  开发简易的小爬虫 最近公司开发一款医药类的软件,所以需要一些药品的基础数据,所以本人就用node.js写一个简易的小爬虫,并写记录这个Demo以供大家参考. 一.开发前的准备: 1, ...

  8. 原生JS实现简易随机点名功能

    定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...

  9. Node.js写文件的三种方法

    Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...

随机推荐

  1. MySQL实用基本操作

    本博客写是装好Mysql并配好环境变量后的基本操作(windows10系统下)且都是黑框内的操作. 一.登陆MySQL 首先启动服务,在桌面左下角图标处点击右键Windows PowerShell(管 ...

  2. 【Linux】Jenkins安装(二)

    Jenkins介绍 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括: 1.持续的软件版本发布/测试项目. 2.监控外部调用执行的工作. 安装环境 操作系统:lin ...

  3. mysqlworkbench访问远程服务器

    1.如果服务器有防火墙,需要关一下: systemctl stop firewalld.service #停止firewallsystemctl disable firewalld.service # ...

  4. [批处理]使用Log.io监控日志变化

    背景 多台服务器安装了不同的开发服务,增加日志监控以随时处理情况 方案 log.io 环境 NodeJs 安装 1.log.io直接无法安装上,使用log.io-ts安装上 npm install - ...

  5. python,day3,函数基础-3

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 1.函数基本语法及特性 函数是什么? 函数一词 ...

  6. python学习笔记之线程、进程和协程(第八天)

    参考文档: 金角大王博客:http://www.cnblogs.com/alex3714/articles/5230609.html 银角大王博客:http://www.cnblogs.com/wup ...

  7. SSM框架下 Failed to load resource: the server responded with a status of 404 (Not Found)错误

    这个错误提示的是js的引用路径有错: 1.检查应用路径是否正确(我的问题是路径是正确的但是去到页面就会提示404错误) 引用路径,最好都使用绝对路径 <script type="tex ...

  8. PHP 异常处理 throw new exception

    当异常被抛出时,其后的代码不会继续执行,PHP 会尝试查找匹配的 "catch" 代码块. 如果异常没有被捕获,而且又没用使用 set_exception_handler() 作相 ...

  9. babel 7.x 和 webpack 4.x 配置vue项目

    很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互.按照之前运行非常流畅的配置走一遍,打包遇到各种坑.只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了. ...

  10. 移动端js调试工具:eruda

    通常写前端页面都在Chrome浏览器的开发模式下进行调试,但是写放在移动端的H5页面时,有时候会遇到在Chrome上调试没有问题,但是在手机的浏览器上有问题的情况:或者有些功能只能在特定的容器中才能其 ...