倒计时原生js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style type="text/css">
body,div{margin:0;padding:0;font-family:"微软雅黑";font-size:16px;}
#div1{letter-spacing:3px;width:300px;height:50px;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-50px;background:#ff6000;line-height:50px;text-align:center;}
</style>
</head>
<body>
<div id="div1">fr</div>
<script type="text/javascript">
function addZero(val){
return val<10?("0"+val):val
} function getTimer(nowTime,targetTime){ if(targetTime>nowTime){
var spanTime = targetTime.getTime()-nowTime.getTime(); //
// 总的毫秒差 =指定时间距离1970.1.1的毫秒差 -当前时间距离1970.1.1的毫秒差
var spanDay = Math.floor(spanTime/(1000*60*60*24)); // 总的毫秒数换算成天数
var aDay = spanDay*24*60*60*1000; // 天数占用的毫秒数
var spanHours = Math.floor((spanTime-aDay)/(1000*60*60)); //总的毫秒差 换算成小时
var aHours =spanHours*60*60*1000; // 小时占用的毫秒
var spanMinute = Math.floor((spanTime-aDay-aHours)/(1000*60)); //总的毫秒差换算成分钟
var aMinute = spanMinute*1000*60; // 分钟暂用的毫秒数
var spanSec = Math.floor((spanTime-aDay-aHours-aMinute)/1000); //总的毫秒差换算成秒
var str = "倒计时:"+addZero(spanDay)+"天"+addZero(spanHours)+"时"+addZero(spanMinute)+"分"+addZero(spanSec); }else{
var str="00:00:00"
} return str;
} var nowTime = new Date(); // 获取当前时间
var targetTime = new Date("2015/4/23 01:00:00"); // 获取指定时间
var oDiv =document.getElementById("div1");
oDiv.innerHTML =getTimer(nowTime,targetTime);
var timer = setInterval(function(){
var nowTime = new Date(); // 获取当前时间
var targetTime = new Date("2015/4/23 01:00:00"); // 获取指定时间
var oDiv =document.getElementById("div1");
oDiv.innerHTML=getTimer(nowTime,targetTime);
},1000)
</script>
</body>
</html>
倒计时原生js的更多相关文章
- 原生js 当前时间 倒计时代码
源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...
- 原生 JS 实现手机验证码倒计时
可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...
- 原生js实现一个简单的倒计时功能
大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...
- 实现倒计时功能js
<p>系统将会在<strong id="endtime"></strong>秒后跳转到登录页!</p> [原生js实现] <s ...
- 原生JS实现的h5小游戏-植物大战僵尸
代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...
- 使用原生JS,实现鼠标点击爱心效果 !!!
使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的.其实实现起来也很简单,下面一起来学习一下吧.文末附上 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 常用原生JS方法总结(兼容性写法)
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
随机推荐
- 微软的决心,开发者的信心!惊喜的 Connect(); // 2016
微软的决心,开发者的信心!惊喜的 Connect(); // 2016 Visual Studio for Mac 2014 年 11 月 13 日,微软宣布 .NET 开源与跨平台.两年后的今天 ...
- QT笔记之VS2010 Qt中导入qrc资源文件
转载1:http://qimo601.iteye.com/blog/1404693 转载2:http://blog.sina.com.cn/s/blog_92cde3060101lobm.html 转 ...
- 在JSP页面中输出字符" * "组成的金字塔
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- div模拟表格使用display
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- ubuntu1604安装体验
昨天安装了ubuntu 16 安装成了双系统,这样的速度才能接受. 各种软件支持的都还算不错.除了启动时候原始的气息,启动之后挺稳定的. 最让人开心的是新的unity的设置更加丰富了,可以自动隐藏,更 ...
- 概念学习(Concept Learning)
从特殊的训练样例中归纳出一般函数是机器学习的核心问题.一般函数是对理想目标函数的函数逼近(function approximation).简而言之,从特殊到普通.与此对应的是演绎推理(deductiv ...
- java中判断用户是否为第一次登陆(在页面上进行控制)
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%&g ...
- Eclipse小技巧--快速输入System.out.println();(转)
步骤1:指定“Content Assist”的快捷键,参考:善用 Eclipse 组合键,提高输入效率 步骤2:输入源代码是,先输入sysout,然后输入辅助快捷键:Alt+/,这样就可以自动生成:S ...
- iOS - UIKit
1.UIKit 框架基本结构 1)控件 屏幕上的所有 UI 元素都叫做控件(也有叫做视图.组件),比如按钮(UIButton).文本(UILabel)都是控件. 为了便于开发者打造各式各样的优秀 Ap ...
- .net连接access操作类
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...