夜光带你走进 前端工程师(四十 jS )
作者:互联网
夜光序言:
她只有我了
我若是不等她 谁会等她
我若是不守护她 谁会守护她
正文:
倒计时
<!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