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 相关文章推荐
用jquery存取照片的具体实现方法
Jun 30 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
JavaScript实现简单动态表格
Dec 02 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
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
利用Python爬虫给孩子起个好名字
2017/02/14 Python
python实现桌面壁纸切换功能
2019/01/21 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
节约用水演讲稿
2014/05/21 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
公司给客户的感谢信
2015/01/23 职场文书
中英文求职信范文
2015/03/19 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
新郎结婚感言
2015/07/31 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL