JavaScript实现新年倒计时效果


Posted in Javascript onNovember 17, 2018

本文实例为大家分享了js实现新年倒计时展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新年倒计时</title>
<link rel="stylesheet" href="style.css" rel="external nofollow"  />
</head>
 
<body>
<div class="time">距离新的一年还有 <span id="LeftTime"></span></div>
<script>
function FreshTime()
{
    var endtime=new Date("2017/1/28,00:00:00");//结束时间
    var nowtime = new Date();//当前时间
    var lefttime= parseInt((endtime.getTime()-nowtime.getTime())/1000) ; 
    d= parseInt(lefttime/(24*60*60)) ;
    h= parseInt(lefttime/(60*60)%24) ;
    m= parseInt(lefttime/60%60) ;
    s= parseInt(lefttime%60) ;
    
    document.getElementById("LeftTime").innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
    if(lefttime<=0){
    document.getElementById("LeftTime").innerHTML="新年快乐";
    clearInterval(sh);
    }
}
  FreshTime()
  var sh;
  sh= setInterval(FreshTime,1000) ;
</script>
</body>
</html>

css部分代码:

@charset "UTF-8";
/* CSS Document */
div{
 margin:0;
 padding:0;
 border:0;
}
 
 
.time{
 width:400px;
 height:30px;
 margin:30px auto;
 font-size:14px;
}
#LeftTime
{
  color:red;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过一段代码简单说js中的this的使用
Jul 23 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
微信小程序实现商城倒计时
Nov 01 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
JS实现倒计时图文效果
Nov 17 #Javascript
javaScript实现游戏倒计时功能
Nov 17 #Javascript
Javascript实现时间倒计时功能
Nov 17 #Javascript
Javascript实现秒表倒计时功能
Nov 17 #Javascript
js实现简单模态框实例
Nov 16 #Javascript
js实现搜索栏效果
Nov 16 #Javascript
JavaScript实现简单音乐播放器
Apr 17 #Javascript
You might like
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
Python压缩和解压缩zip文件
2015/02/14 Python
Python实现购物程序思路及代码
2017/07/24 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python连接mongodb集群方法详解
2020/02/13 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
应征英语教师求职信
2013/11/27 职场文书
毕业生自我鉴定
2013/12/04 职场文书
物流司机岗位职责
2013/12/28 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书