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俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
JS实现随机抽取三人
Nov 06 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中simplexml_load_string函数使用说明
2011/01/01 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
PHP对象实例化单例方法
2017/01/19 PHP
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
Jquery 实现grid绑定模板
2015/01/28 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
python机器学习之神经网络(一)
2017/12/20 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
Django中的session用法详解
2020/03/09 Python
django跳转页面传参的实现
2020/09/17 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
实习生自我鉴定
2013/12/12 职场文书
工作检讨书怎么写
2014/10/10 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
python playwrigh框架入门安装使用
2022/07/23 Python