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 相关文章推荐
JS 自定义函数缺省值的设置方法
May 05 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
react的hooks的用法详解
Oct 12 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静态新闻列表自动生成代码
2007/06/14 PHP
php实现cookie加密的方法
2015/03/10 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
Using the TextRange Object
2006/10/14 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
js实现随机抽奖
2020/03/19 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
Ajxa常见问题都有哪些
2014/03/26 面试题
双十佳事迹材料
2014/01/29 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
Python 中面向接口编程
2022/05/20 Python