js实现倒计时及时间对象

2024-09-27 10:29:09

JS实现倒计时效果代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>h
<style>
#box {
 width: 100%;
 height: 400px;
 background: black;
 color: #fff;
 font-size:40px;
 line-height:400px;
 text-align:center;
}
</style>
<script>
window.onload = function(){
 var oBox = document.getElementById('box');
 var oDate = new Date();//获取当前时间;
 oDate.setFullYear(2016,11,31);//自动进位；
 oDate.setHours(0,0,0,0);

 function countDown(){
  //未来时间戳减去现在时间的时间戳;
  var ms = oDate.getTime() - new Date().getTime();

  //毫秒转换成秒
  var oSec = parseInt(ms/1000);

  //秒转换成天
  var oDay = parseInt(oSec/86400);

  //不到一天剩下的秒数;
  oSec%=86400;

  //转换成小时
  var oHour = parseInt(oSec/3600);

  //不到一小时剩下的秒数;
  oSec%=3600;

  //转换成分钟
  var oMin = parseInt(oSec/60);

  //不到一分钟剩下的秒数;
  oSec%=60;

  oBox.innerHTML = '距离2016年12月31日还有:'+oDay+'天'+oHour+'时'+oMin+'分'+oSec+'秒';
 }
 countDown();
 setInterval(countDown,1000);
}
</script>
</head>

<body>
<div id="box">距离2016年12月31日还有:xx天xx时xx分xx秒</div>
</body>
</html>

实现效果入下：

时间戳：1970年1月日至今的毫秒数:oDate.getTime(); //不要问我为什么是1970年1月至今哦！自个儿百度啦！
时间对象:

获取时间:

  var oDate = new Date();
  oYear = oDate.getFullYear();
  oMon = oDate.getMonth();
  oDay = oDate.getDate();
  oHou = oDate.getHours();
  oMin = oDate.getMinutes();
  oSec = oDate.getSeconds();
  oWeek = oDate.getDay();

设置时间:

  oDate.setFullYear(年,月,日);
  oDate.setMonth(月);
  oDate.setDate(日);
  oDate.setHours(时,分,秒,毫秒);
  时间会自动进位;

大概整理的就这些，还有很多不足的地方，希望大家多提宝贵意见！互相学习！互相取经！

js制作支付倒计时页面

本文实例为大家分享了js支付倒计时页面制作代码,供大家参考,具体内容如下 (图一) (图二) (图三) (图四) 实现目标一.页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失). 二.倒计时完毕,出现删除订单. 三.单击删除订单,弹出弹框,询问是否要真正删除订单. 四.单击确定,即可删除订单. 如上图所示效果展示,这里给出所有的源代码(如需运行,只需要修改EJS文件中引入的CSS路径和JS路径即可). 这个页面其实是自己业余时间,写的东西. 但是里面涉及到,倒计时,弹框,以及字体
最全面的JS倒计时代码

第一种:精确到秒的javascript倒计时代码 HTML代码: <form name="form1"> <div align="center" align="center"> <center>离2010年还有:<br> <input type="textarea" name="left" size="35" style="
js实现精确到毫秒的倒计时效果

本文实例为大家分享了精确到毫秒的倒计时效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
原生js实现节日时间倒计时功能

知识要点 1.实现原理: 用结束时间-当前时间=时间差当前时间每过1秒时间差自然也就少了1秒所以要1秒更新一次当前时间就达到了倒计时的效果 2.需要注意的就是时间之间的转换和对得出数值的处理 3.用到的方法: obj.getTime() //换算成毫秒 Math.floor() //把小数点向下舍入结果取一个整数 50%24 // 这是对数值求余的方法,意思是假如有50个小时,一天24个小时这个得出的结果就是余数是2 具体的数值的运算处理完整代码里有详细的注释完整代码注:代码附带显
PHP+JS实现的商品秒杀倒计时用法示例

本文实例讲述了PHP+JS实现的商品秒杀倒计时用法.分享给大家供大家参考,具体如下: <?php //php的时间是以秒算.js的时间以毫秒算 date_default_timezone_set('PRC'); //date_default_timezone_set("Asia/Hong_Kong");//地区 //配置每天的活动时间段 $starttimestr = "2016-3-29 8:10:00"; $endtimestr = "2016-
js发送短信倒计时的简单实现方法

如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta charset="utf-8"> &l
JavaScript实现页面无操作倒计时退出

项目前端页面需要实现,页面没人操作进入倒计时,以下为前端代码实现. //设置(倒计时功能)开关 var _mouseActiveListener_flag = true; beforecount:触发倒计时间隔(单位:毫秒) count:倒计时总数(单位:秒) var mouseActiveListener = function (beforecount, count, callback) { //config var __countdown_html = '<div id="__tt&q
JS实现倒计时(天数、时、分、秒)

本文实例为大家解析了JS实现倒计时的详细过程,供大家参考,具体内容如下注释: parseInt() 函数可解析一个字符串,并返回一个整数. 语法: parseInt(string, radix) 例: parseInt("10"); //返回 10 parseInt("19",10); //返回 19 (10+9) parseInt("11",2); //返回 3 (2+1) parseInt("17",8); //返回 1
JS实现表单验证功能(验证手机号是否存在，验证码倒计时)

废话不多说直接上代码 html代码: <form method="post" id="form_hroizon" enctype="multipart/form-data" action="/"> <input type="hidden" name="phoneTemplet" id="phoneTemplet"> <input type
原生js实现倒计时功能（多种格式调用）

话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时-多种格式调用-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type=&qu
JS实现用户注册时获取短信验证码和倒计时功能

在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g

js实现倒计时及时间对象

相关推荐

随机推荐