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 相关文章推荐
javascript 自动填写表单的实现方法
Apr 09 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
详解关于Vue单元测试的几个坑
Apr 26 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
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
js特效,页面下雪的小例子
2013/06/17 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
python学习数据结构实例代码
2015/05/11 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Django用户身份验证完成示例代码
2020/04/03 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
EJB发布WEB服务一般步骤
2012/10/31 面试题
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
五年级数学教学反思
2014/02/11 职场文书
中式婚礼主持词
2014/03/13 职场文书
异地年检委托书范本
2014/09/24 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
无故旷工检讨书
2015/08/15 职场文书
学习党章心得体会2016
2016/01/15 职场文书