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 对象、函数和继承
Jul 07 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
Angular的事件和表单详解
Dec 26 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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设计聊天室步步通
2006/10/09 PHP
杏林同学录(五)
2006/10/09 PHP
wordpress之wp-settings.php
2007/08/17 PHP
php ios推送(代码)
2013/07/01 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
node.js中watch机制详解
2014/11/17 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
微信小程序自定义组件
2017/08/16 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
tensorflow的计算图总结
2020/01/12 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
学生打架检讨书大全
2014/01/23 职场文书
考试诚信承诺书
2014/05/23 职场文书
商场促销活动策划方案
2014/08/18 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
房屋租房协议书范本
2014/12/04 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS