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中的变量声明早于赋值分析
Mar 01 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
JS重载实现方法分析
Dec 16 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
node实现爬虫的几种简易方式
Aug 22 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
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&amp;mysql(五)
2006/10/09 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
php定时执行任务设置详解
2015/02/06 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
ArrayList类(增强版)
2007/04/04 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
vue组件name的作用小结
2018/05/23 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
Python操作SQLite简明教程
2014/07/10 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
运动会表扬稿大全
2014/01/16 职场文书
爱我中华演讲稿
2014/05/20 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
工作证明英文模板
2014/10/21 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
工程部文员岗位职责
2015/02/04 职场文书
工程进度款催款函
2015/06/24 职场文书
合理化建议书范文
2015/09/14 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript