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 20 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
javascript中的this作用域详解
Jul 15 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
JS数组去重详情
Nov 07 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/11/10 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
三种php连接access数据库方法
2013/11/11 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
用python实现批量重命名文件的代码
2012/05/25 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
python 中字典嵌套列表的方法
2018/07/03 Python
python学生管理系统学习笔记
2019/03/19 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
房屋出售协议书
2014/04/10 职场文书
公司捐款倡议书
2014/05/14 职场文书
民主生活会剖析材料
2014/09/30 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2014年外联部工作总结
2014/11/17 职场文书
2014年工程师工作总结
2014/11/25 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Ajax异步刷新功能及简单案例
2021/11/20 Javascript