一、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前端——倒计时效果相关推荐

  1. 6个绚丽时尚的Web前端3D效果展示(附源码)

    作为一个前沿的 Web 开发者,对于 HTML5 和 现在流行的3D技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大 ...

  2. html弧形列表效果,web前端入门到实战:html5网页特效-弧形菜单

    效果: 弧形菜单,文字按规则变形以及变换透明度 简单的javascript,上手难度:简单 学习笔记: text-decoration: 最主要的功能就是给文字加上附着在文字底部,上方,或者中间的线( ...

  3. css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...

    最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...

  4. 前端如何实现音乐盒胶盘的转动_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...

    首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...

  5. 前端倒计时不准的问题

    电商网站,团购类网站很多都有都有秒杀这个业务.秒杀自然涉及前端倒计时的问题.前端倒计时许考虑两个问题: 1.由于js是单线程的,也就是阻塞的,定时可定会不准.无论setTimeout()还是setIn ...

  6. 图片流_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?

    首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...

  7. web前端入门到实战:CSS实现平行四边形布局效果

    如何实现下图所示的平行四边形布局效果? 一.skewX的局限 一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而 ...

  8. web前端进阶<7>:3d图像翻转效果

    这几天又闲着无聊,自己学的东西又有一点不牢固了,需要写一个小程序来巩固一下,相信大家也时有同感吧!那么这一期就给大家带来一个炫酷的相册3d翻转效果,如果搭上炫酷的文字和动画那肯定是高端.霸气上档次的: ...

  9. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个复古手机键盘(带声音)的动画效果~~适合初学者~超简单~

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个复古手机键盘(带声音)的动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...

最新文章

  1. 使用Keil MDK以及标准外设库创建STM32工程
  2. PGA_AGGREGATE_TARGET 原理
  3. Jenkins打包之本地远程自动打包教程
  4. 工业级光纤收发器的选用方法
  5. python读取文件最后几行_python读取文件最后一行两种方法
  6. python3 列表取交集_一刻钟学会 Python 3!Python不难学啊!
  7. c语言除法保留1位小数,高精度除法小数点位数
  8. linux下实现文件双向同步 unsion,unison做数据双向同步
  9. 【Java从零到架构师第③季】【项目实战】驾考管理系统
  10. 请别再使用 SimpleDateFormat 格式化时间了,DateTimeFormatter 更出色!
  11. 删除Android空行
  12. c++---constructor(ctor,构造函数)
  13. Ogre – 材质脚本(三) (转)
  14. SolidWorks 部分插件不显示
  15. “/Ox”和“/RTC1”命令行选项不兼容 或者 ml.exe 退出
  16. 2-Druid 系统框架
  17. QT生成动态链接库及调用详细步骤
  18. Ubuntu打造家用NAS二——服务器管理
  19. 服务器防御100G是什么意思?够用吗?
  20. hdu 5970 最大公约数

热门文章

  1. 讨论 如何带领好新的员工
  2. 基于Java的坦克大战游戏的设计与实现
  3. 隆云通水质ORP传感器
  4. 阿里的过来人告诉你,数据中台为什么搞不下去了?
  5. 关于Internet的92问与答
  6. Android开源益智游戏“斗地主”单机版源代码
  7. HBuilder云打包ios证书申请流程
  8. 温德姆推出中高档一价全包式度假酒店品牌Wyndham Alltra;柳州三江万怡酒店正式亮相广西 | 全球旅报...
  9. python连接sql数据库并查询_Python通过pymysql连接数据库并进行查询和更新SQL方法封装...
  10. Jsp 中out.println()为什么不换行