<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style>
*{
margin: 0;
padding:0;
}
body,html{
width: 100%;
height: 100%;

}
header{
padding-top:20%;
height:63%;
background:-webkit-radial-gradient(red,yellow);
}
p {
font-size: 100px;
text-align: center;
color: #A52A2A;
}
p span {
color: brown;
}
p span.time {
color: blueviolet;
}
</style>
</head>
<body>
<header>
<p>距离全面建成小康社会还有</p>
<p><span></span></p>
</header>
</body>
<script>
var oSpan = document.getElementsByTagName('span')[0];
function tow(n) {//自动补零函数
return n >= 0 && n < 10 ? '0' + n :n;
}
function getDate() {//计算倒计时时间的函数
var newTime = new Date('2020/1/1 00:00:00');//输入未来的日子
var oldTime = new Date();//获取现在的日子
var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
var day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒 ；
second = second % 86400;//余数代表剩下的秒数；
var hour = Math.floor(second / 3600);//整数部分代表小时；
second %= 3600; //余数代表 剩下的秒数；
var minute = Math.floor(second / 60);
second %= 60;//余数代表 剩下的秒数；
var str = tow(day) + '<span class="time">天</span>'
+ tow(hour) + '<span class="time">小时</span>'
+ tow(minute) + '<span class="time">分钟</span>'
+ tow(second) + '<span class="time">秒</span>';
oSpan.innerHTML = str;
}
getDate();
setInterval(getDate, 1000);//每秒计时器执行一次倒计时时间的函数
</script>

</html>

原生js的简单倒计时的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. 原生js 当前时间 倒计时代码

    源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...

  3. 原生JS实现简单富文本编辑器2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 原生JS实现简单富文本编辑器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  6. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  7. 原生js实现简单JSONP

    JSONP是一种非常常见的实现跨域请求的方法.其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输. 用原生JS实现JSONP非常简单,无非几点: 1)定义一个函数,用于处理接 ...

  8. 原生js实现简单的下拉刷新功能

    前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...

  9. 原生js实现简单的放大镜效果

    前言:相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. ht ...

随机推荐

  1. GUI学习之八——QToolButton的学习总结

    QToolButton提供一个快速的访问按钮,通常在工具栏内使用,一般不显示文本标签而显示图标. 一.按钮的样式风格设置 可以按照下面的风格对按钮进行样式设置 从左到右依次是仅显示图标.仅显示文字.图 ...

  2. mac查看当前调用tcp的进程并关闭指定进程

    查看所有tcp进程 监听的端口 lsof -iTCP -sTCP:LISTEN 查看指定端口信息 lsof -i: 关闭指定进程 kill -

  3. mysql 外网访问

    --修改用户Root 可以外网访问 update user set host='%' where user='root'; --查询修改结果 select user,host from user; - ...

  4. 7.地图随机装饰,与转化过程补充,与ai的设计思路

    这两天本来只想实现地图的随机装饰,然后发现以前的bin格式设计存在不足,所以最后不得不去改地图,并去重制整个地图的阶段,此篇总结这个过程 先描述下bin结构 首先地图由无数六边形组合,一个六边形由两层 ...

  5. java策略设计模式

    1.概述 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使他们可以相互替换,让算法独立于使用它的客户而独立变化. 其实不要被晦涩难懂的定义所迷惑,策略设计模式实际上就是定义一个接口,只要实现 ...

  6. Eclipse搭建SSH框架(Struts2+Spring+Hibernate)

    见识少的我经过一天多的研究才知道,在MyEclipse中搭好的框架的配置文件和jar包是通用的.接下来——亮剑! 工具:Eclipse+Tomcat+Mysql 一.先在Eclipse中配置好Tomc ...

  7. ruby module extend self vs module_funciton

    最近学习ruby过程中,extend self 跟 module_function 傻傻分不清楚,查资料后明白之间的差别,虽记录之,原文地址 github module A extend self d ...

  8. Windows与系统信息相关的DOS命令

    首先,以管理员身份打开CMD命令框, 输入 start msinfo32:回车之后,出现一个弹窗,上面有大部分的系统信息:系统版本,电脑名称,BIOS,CPU,内存等: wmic bios:显示BIO ...

  9. [转] C++中为什么要用指针，而不直接使用对象？

    原文点击这里 问题描述 我刚从 Java 转到使用 C++ 进行面向对象开发,我发现一个很让我非常困惑的问题:C++ 中经常出现使用对象指针,而不是直接使用对象本身的代码,比如下面这个例子: C++ ...

  10. python yield 关键字

    最近看代码看到python里面的yield关键字,和我之前接触的语言好像都没有来着,我就查了查它的含义,大概理解如下: >>> def createGenerator(): ... ...