JavaScript实现新年倒计时效果
时间:2018-11-17
这篇文章主要为大家详细介绍了JavaScript实现新年倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- selenium库的基本使用
- 高效大数据开发之 bitmap 思想的应用
- 从0到1实现一个虚拟DOM
- Xenomai XDDP example and Posix Compling
- 项目实践|基于Flink的用户行为日志分析系统
- 手把手教你用Matplotlib画一个小清新配色的商业图表
- 高并发场景下锁的使用技巧
- Struts2第四天:Struts2的拦截器和标签库
- kubernete编排技术八:使用operator管理有状态应用
- Spring第一天:Spring的概述、SpringIOC入门(XML)、Spring的Bean管理、Spring属性注入
- Flink的处理背压原理及问题-面试必备
- Spring第二天:Spring的IOC的注解方式、Spring的AOP开发(XML)
- OpenCV还能实现这种效果? | 视频防抖技术
- 迁移到 Go Modules
- 使用docker 搭建redis的哨兵机制