原生js的简单倒计时
<!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的简单倒计时的更多相关文章
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 原生js 当前时间 倒计时代码
源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...
- 原生JS实现简单富文本编辑器2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现简单富文本编辑器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现简单留言板功能
原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...
- 原生js实现简单移动端轮播图
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...
- 原生js实现简单JSONP
JSONP是一种非常常见的实现跨域请求的方法.其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输. 用原生JS实现JSONP非常简单,无非几点: 1)定义一个函数,用于处理接 ...
- 原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
- 原生js实现简单的放大镜效果
前言:相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. ht ...
随机推荐
- 实现一个简易版RPC
上篇博客主要介绍了dubbo的使用,这篇文章主要深入rpc的核心原理 准备知识: 1 java 网络编程(这里使用的bio) 2 java动态代理 3 反射 ===================== ...
- AX_RecordSortedList
static void RecordSortedList(Args _args) { SalesLine localSalesLine,fetchSalesLine; RecordSortedList ...
- java39
String a= "hello.a.java;b.java;hello.java;hello.toha;"; //将每个分号的内容取出来 String[] res=a.split ...
- mac ssh,mac xshell,xshell替代,ssh客户端,ssh工具,远程桌面加速
下载地址 Windows版下载地址:http://www.hostbuf.com/downloads/finalshell_install.exe Mac版,Linux版安装及教程:http://ww ...
- 图解HTTP第三章
HTTP 报文内的 HTTP信息 用于 HTTP 协议交互的信息被称为 HTTP 报文.HTTP 报文本身是由多行(用 CR+LF 作换行符)数据构成的字符串文本. HTTP 报文大致可以分为两类:请 ...
- NodeJS (npm) 学习笔记
零, npm是nodeJS的包管理器,下载nodeJS后会自动安装好npm. 一,windows下安装 nodeJS并配置(以及angular安装相关问题) 1, 下载安装 https://nodej ...
- spring配置问题
产生原因缺少包common-logging-1.2.jar 在该字段所在的类中没有提供该字段的set方法.
- build.gradle
1.将Eclipse项目导入到Android studio 中 很多点9图出现问题解决方法: 在build.gradle里添加以下两句: aaptOptions.cruncherEnabled = f ...
- MFC中的一些视图
本章主要介绍MFC中主要的视图类,这些继承自Cview类. 继承关系如上图所示. 滚动视图 CscrollView给Cview添加了基本的滚动功能,它包含WM_VSCROLL和WM_HSCROLL消息 ...
- mysql中删除重复记录,只保留一条
表结构如下: mysql> desc test1; +--------------+------------------+------+-----+---------+------------- ...