html倒计时星期日,Web前端——倒计时效果
一、JavaScript Date对象
getYear() 获取年份,获取年最好用
getFullYear()获取完整格式年份,如2014,一般用这个
getMonth()获取月,从0开始(0~11),要返回当前月份要加1
getDate()获取日(1~31)
getDay()获取星期几(0~6)
getHours()获取小时(0~23)
getMinutes()获取分钟数(0~59)
getSeconds()获取秒数(0~59)
getTime()获取毫秒数
定义日期对象
var myDate = new Date()
myDate存放了当前日期对象,然后可以通过日期对象的函数获取具体需要的数据,比如,年月日等等
二、简单时间显示
效果:2017年4月18日 星期二 14:22:44
重点:
1、获取时间,星期几处理
2、时间要时刻变化,和系统时间相同——setTimeout('showTime()',500)定时调用
3、秒数和分数时刻保证是两位数——补位处理
window.onload = function(){
showTime();
}
function checkTime(i){ //补位处理
if(i<10){
i="0"+i;
}
return i;
}
function showTime(){
var now=new Date();
var year=now.getFullYear();
var month= now.getMonth()+1 ;
var day= now.getDate() ;
var h=now.getHours() ;
var m=now.getMinutes() ;
var s=now.getSeconds() ;
m=checkTime(m)
s=checkTime(s)
var weekday=new Array(7)
weekday[0]="星期日"
weekday[1]="星期一"
weekday[2]="星期二"
weekday[3]="星期三"
weekday[4]="星期四"
weekday[5]="星期五"
weekday[6]="星期六"
var d=now.getDay();
document.getElementById("show").innerHTML=""+year+"年"+month+"月"+day+"日 "+ weekday[d]+" "+h+":"+m+":"+s;
setTimeout('showTime()',500)// 定时500毫秒执行一次showTime()
}
三、高考倒计时
倒计时原理:当前时间-倒计时截止日
中间转换点:
1、使用getTime()获取到毫秒数
毫秒数差 = 当前时间getTime()获取到毫秒数-倒计时截止日getTime()获取到毫秒数
2、天数 = 毫秒数之差/每天毫秒数
1000 * 60 * 60 * 24一天的秒数
3、天数不是整数,使用Math.ceil()向上取整函数
Math.ceil(12.3) = 13;
window.onload = function(){
var timedate= new Date(2017,6,1); //自定义结束时间 '
var now = new Date();
var date = timedate.getTime() - now.getTime(); //得出的为毫秒
var time = Math.ceil((date)/(1000 * 60 * 60 * 24)); //1000 * 60 * 60 * 24一天的秒数
if(time > 0 ){
document.getElementById('timeShow').innerHTML = time;
}
}
倒计时效果
四、倒计时二
1、使用了parseInt()函数取整数
2、使用% 计算时间
3、时间结束,更改界面。并停止定时器
function FreshTime()
{
var endtime=new Date("2017/5/15,12:20:12");//结束时间
var nowtime = new Date();//当前时间
var lefttime= parseInt((endtime.getTime()-nowtime.getTime())/1000);
d=parseInt(lefttime/3600/24); ;
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);
倒计时
}
FreshTime();
var sh;
sh=setInterval(FreshTime,1000);
html倒计时星期日,Web前端——倒计时效果相关推荐
- 6个绚丽时尚的Web前端3D效果展示(附源码)
作为一个前沿的 Web 开发者,对于 HTML5 和 现在流行的3D技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大 ...
- html弧形列表效果,web前端入门到实战:html5网页特效-弧形菜单
效果: 弧形菜单,文字按规则变形以及变换透明度 简单的javascript,上手难度:简单 学习笔记: text-decoration: 最主要的功能就是给文字加上附着在文字底部,上方,或者中间的线( ...
- css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...
- 前端如何实现音乐盒胶盘的转动_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
- 前端倒计时不准的问题
电商网站,团购类网站很多都有都有秒杀这个业务.秒杀自然涉及前端倒计时的问题.前端倒计时许考虑两个问题: 1.由于js是单线程的,也就是阻塞的,定时可定会不准.无论setTimeout()还是setIn ...
- 图片流_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
- web前端入门到实战:CSS实现平行四边形布局效果
如何实现下图所示的平行四边形布局效果? 一.skewX的局限 一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而 ...
- web前端进阶<7>:3d图像翻转效果
这几天又闲着无聊,自己学的东西又有一点不牢固了,需要写一个小程序来巩固一下,相信大家也时有同感吧!那么这一期就给大家带来一个炫酷的相册3d翻转效果,如果搭上炫酷的文字和动画那肯定是高端.霸气上档次的: ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个复古手机键盘(带声音)的动画效果~~适合初学者~超简单~
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个复古手机键盘(带声音)的动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...
最新文章
- 使用Keil MDK以及标准外设库创建STM32工程
- PGA_AGGREGATE_TARGET 原理
- Jenkins打包之本地远程自动打包教程
- 工业级光纤收发器的选用方法
- python读取文件最后几行_python读取文件最后一行两种方法
- python3 列表取交集_一刻钟学会 Python 3!Python不难学啊!
- c语言除法保留1位小数,高精度除法小数点位数
- linux下实现文件双向同步 unsion,unison做数据双向同步
- 【Java从零到架构师第③季】【项目实战】驾考管理系统
- 请别再使用 SimpleDateFormat 格式化时间了,DateTimeFormatter 更出色!
- 删除Android空行
- c++---constructor(ctor,构造函数)
- Ogre – 材质脚本(三) (转)
- SolidWorks 部分插件不显示
- “/Ox”和“/RTC1”命令行选项不兼容 或者 ml.exe 退出
- 2-Druid 系统框架
- QT生成动态链接库及调用详细步骤
- Ubuntu打造家用NAS二——服务器管理
- 服务器防御100G是什么意思?够用吗?
- hdu 5970 最大公约数
热门文章
- 讨论 如何带领好新的员工
- 基于Java的坦克大战游戏的设计与实现
- 隆云通水质ORP传感器
- 阿里的过来人告诉你,数据中台为什么搞不下去了?
- 关于Internet的92问与答
- Android开源益智游戏“斗地主”单机版源代码
- HBuilder云打包ios证书申请流程
- 温德姆推出中高档一价全包式度假酒店品牌Wyndham Alltra;柳州三江万怡酒店正式亮相广西 | 全球旅报...
- python连接sql数据库并查询_Python通过pymysql连接数据库并进行查询和更新SQL方法封装...
- Jsp 中out.println()为什么不换行