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 相关文章推荐
Node.js(安装,启动,测试)
Jun 09 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 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/06/04 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
Scrapy的简单使用教程
2017/10/24 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
使用python实现链表操作
2018/01/26 Python
pymysql 开启调试模式的实现
2019/09/24 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
python和php哪个更适合写爬虫
2020/06/22 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
领导检查欢迎词
2014/01/14 职场文书
初中生自我鉴定
2014/02/04 职场文书
实习生评语
2014/04/26 职场文书
热门专业求职信
2014/05/24 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
千万级用户系统SQL调优实战分享
2022/03/03 MySQL