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操纵Cookie实现购物车程序
Nov 23 Javascript
jquery 页面全选框实践代码
Apr 02 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 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
回帖脱衣服的图片实现代码
2014/02/15 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
python基于SMTP协议发送邮件
2019/05/31 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
广州某公司软件工程师面试题
2014/12/22 面试题
《母亲的恩情》教学反思
2014/02/13 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
推荐信模板
2014/05/09 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
中班上学期个人总结
2015/02/12 职场文书
2015年工程部工作总结
2015/04/30 职场文书
525心理健康活动总结
2015/05/08 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python