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 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
vue ssr 指南详读
Jun 29 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 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 PDO函数库详解
2010/04/27 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
Vue组件开发初探
2017/02/14 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python 中split 和 strip的实例详解
2017/07/12 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
简单了解python中的与或非运算
2019/09/18 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
Python递归实现打印多重列表代码
2020/02/27 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
早餐连锁店计划书
2014/01/08 职场文书
公司捐款倡议书
2014/05/14 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js