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 程序库的比较(一)之DOM功能
Apr 07 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
如何在JavaScript中等分数组的实现
Dec 13 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中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
php实现Session存储到Redis
2015/11/11 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
简单了解Django模板的使用
2017/12/20 Python
python实现flappy bird小游戏
2018/12/24 Python
Python Django 命名空间模式的实现
2019/08/09 Python
一行python实现树形结构的方法
2019/08/09 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
python中实现栈的三种方法
2020/12/19 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
岗位职责怎么写
2014/03/14 职场文书
教职工代表大会主持词
2014/04/01 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
工作会议通知
2015/04/15 职场文书
教师读书笔记
2015/06/29 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
JS实现扫雷项目总结
2021/05/19 Javascript
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL