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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
js jquery数组介绍
Jul 15 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
vue离开当前页面触发的函数代码
Sep 01 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中get_object_vars()方法用法实例
2015/02/08 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
python 读写中文json的实例详解
2017/10/29 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
pywinauto自动化操作记事本
2019/08/26 Python
详解python破解zip文件密码的方法
2020/01/13 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
在家更换处方镜片:Lensabl
2019/05/01 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
称象教学反思
2014/02/03 职场文书
一句话工作感言
2014/03/01 职场文书
监察建议书
2015/02/04 职场文书
年度考核表个人总结
2015/03/06 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
python基础之爬虫入门
2021/05/10 Python