标签：12 console log second jS date 四十 var 夜光
夜光序言：
她只有我了
我若是不等她 谁会等她
我若是不守护她 谁会守护她
正文：
倒计时
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
font-size:30px;
text-align: center;
color:red;
}
</style>
<script>
window.onload = function(){
var demo = document.getElementById("demo");
var endTime = new Date("2015/12/12 17:30:00"); // 最终时间
setInterval(clock,1000); // 开启定时器
function clock(){
var nowTime = new Date(); // 一定是要获取最新的时间
// console.log(nowTime.getTime()); 获得自己的毫秒
var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
// 用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能处不断 取整
// console.log(second);
// 一小时 3600 秒
// second / 3600 一共的小时数 /24 天数
var d = parseInt(second / 3600 / 24); //天数
//console.log(d);
var h = parseInt(second / 3600 % 24) // 小时
// console.log(h);
var m = parseInt(second / 60 );
//console.log(m);
var s = parseInt(second ); // 当前的秒
console.log(s);
/* if(d<10)
{
d = "0" + d;
}*/
d<10 ? d="0"+d : d;
h<10 ? h="0"+h : h;
m<10 ? m="0"+m : m;
s<10 ? s="0"+s : s;
demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";
}
}
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>
好比，今年你多大了 ？
2015 - 1990 25
我们要计算的 倒计时
有一个最终时间 12月12日
有一个现在时间 11月 13日
倒计时 = 用 将来的时间 - 现在的时间
问题： 用 毫秒减去 现在距离 1970年1
将来时间 距离 1970 毫秒数
用将来的毫秒数 - 现在的毫秒数 不断转换就可以了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
font-size:30px;
text-align: center;
color:red;
}
</style>
<script>
window.onload = function(){
var demo = document.getElementById("demo");
var endTime = new Date("2015/12/12 17:30:00"); // 最终时间
setInterval(clock,1000); // 开启定时器
function clock(){
var nowTime = new Date(); // 一定是要获取最新的时间
// console.log(nowTime.getTime()); 获得自己的毫秒
var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
// 用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能处不断 取整
// console.log(second);
// 一小时 3600 秒
// second / 3600 一共的小时数 /24 天数
var d = parseInt(second / 3600 / 24); //天数
//console.log(d);
var h = parseInt(second / 3600 % 24) // 小时
// console.log(h);
var m = parseInt(second / 60 % 60);
//console.log(m);
var s = parseInt(second % 60); // 当前的秒
console.log(s);
/* if(d<10)
{
d = "0" + d;
}*/
d<10 ? d="0"+d : d;
h<10 ? h="0"+h : h;
m<10 ? m="0"+m : m;
s<10 ? s="0"+s : s;
demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";
}
}
</script>
</head>
<body>
<div id="demo"></div>
</body>
定义自己的日子
var endTime = new Date(“2015/12/12”);
如果date 括号里面写日期 就是 自己定义的时间
如果 date括号里面不写日期 ， 就是当前时间 。
new Date(“2015/12/12 17:30:00”);
日期和时分秒中间 有空格隔开
复习
1. 节点 网页是有很多的节点组成的 。
元素节点 指的是 ： 标签 li span
文本节点 属性节点
父子兄弟 父 parentNode nextSibling
孩子 childNodes nodeType == 1 来判断 是否是 元素节点
<ul>
<li>
最喜欢用的 children 只得到 元素节点
1.获取节点属性 getAttribute（“title”）
2.设置节点属性 setAttribute (“class”,”one”)
3.删除节点属性 removeAttribute(“title”)；
4. 日期函数 Date();
声明: var date = new Date();
使用: 得到现在的年分 date.getFullYear();
月份: date.getMonth();
日子; date.getDate();
星期： date.getDay();
5. 定时器
定时器 不需要人工操作 按照一定的时间进行某种动作。
setInterval(“函数”,间隔时间 ) 每隔 n秒去执行一次函数
时钟案例
分两步进行的。
第一步： 要得到现在的 时 分 秒
但是这里面有一个小玄机 。
比如现在是 9点整 时针指向 9 是没错的
但是如果现在是 9点半 时针应该指向的是 9到10 之间 才对
所以，我们不但要得到现在的小时 ，还要得到 已经过去了多少分
ms = date.getMilliseconds(); // 现在的毫秒数
s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s
m = date.getMinutes() + s / 60; // 得到的是分数 45.6分钟
h = date.getHours() % 12 + m / 60 ;
旋转角度原理
秒针 一秒 走多少度呢 ？
一圈 360 ° 一共有 60 秒 每秒 6 °
分针 一圈 360 一圈走 60次 每次 6° 每分钟 6°
时针 一圈 360 一共 12 个 表盘没有24小时 每个小时 走 30°
完整代码：
1 <script>
2 var hour = document.getElementById("hour");
3 var minute = document.getElementById("minute");
4 var second = document.getElementById("second");
5 // 开始定时器
6 var s = 0,m = 0, h = 0, ms = 0;
7 setInterval(function() {
8 // 内容就可以了
9 var date = new Date(); // 得到最新的时间
10 ms = date.getMilliseconds(); // 现在的毫秒数
11 s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s
12 m = date.getMinutes() + s / 60; // 得到的是分数 45.6分钟
13 h = date.getHours() % 12 + m / 60 ;
14 // console.log(h);
15 // 旋转角度
16 // 一圈 360 ° 一共有 60 秒 每秒 6 ° 现在是 s秒
17 second.style.WebkitTransform = "rotate("+ s*6 +"deg)";
18 // 变化 旋转 deg 度
19 minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";
20 hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";
21 second.style.MozTransform = "rotate("+ s*6 +"deg)";
22 // 变化 旋转 deg 度
23 minute.style.MozTransform = "rotate("+ m*6 +"deg)";
24 hour.style.MozTransform = "rotate("+ h*30 +"deg)";
25
26 },30);
27 </script>
标签：12,console,log,second,jS,date,四十,var,夜光 来源： https://blog.csdn.net/weixin_41987706/article/details/90717283
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。