前端基本功：JS必记知识点+案例（六）时钟
时钟案例
时钟
分两步进行的。
第一步： 要得到现在的 时 分 秒
但是这里面有一个小玄机 。
比如现在是 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°
完整代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.clock {
width: 600px;
height: 600px;
margin:50px auto;
background: url(images/clock.jpg) no-repeat;
position: relative;
}
.clock div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.h {
background: url(images/hour.png) no-repeat center center;
}
.m {
background: url(images/minute.png) no-repeat center center;
}
.s {
background: url(images/second.png) no-repeat center center;
}
</style>
</head>
<body>
<div class="clock">
<div class="h" id="hour"></div>
<div class="m" id="minute"></div>
<div class="s" id="second"></div>
</div>
</body>
</html>
<script>
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
// 开始定时器
var s = 0,m = 0, h = 0, ms = 0;
setInterval(function() {
// 内容就可以了
var date = new Date(); // 得到最新的时间
ms = date.getMilliseconds(); // 现在的毫秒数
s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s
m = date.getMinutes() + s / 60; // 得到的是分数 45.6分钟
h = date.getHours() % 12 + m / 60 ;
//console.log(h);
//旋转角度
// 一圈 360 ° 一共有 60 秒 每秒 6 ° 现在是 s秒
second.style.WebkitTransform = "rotate("+ s*6 +"deg)";
// 变化 旋转 deg 度
minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";
hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";
second.style.MozTransform = "rotate("+ s*6 +"deg)";
// 变化 旋转 deg 度
minute.style.MozTransform = "rotate("+ m*6 +"deg)";
hour.style.MozTransform = "rotate("+ h*30 +"deg)";
},1000);
</script>
按钮不可用
button 不可以用 disabled 不可用的意思
btn.disabled = “disabled” || btn.disabled = true;
灰色的即为不可用
注意：
1.因为 button是个双标签 所以要更改他的值， 使用 innerHTML 的，不是value。
2.关闭定时器 clearInterval(定时器名称); 定时器不再进行
this
this 指向的是 事件的调用者 ，或者是函数的使用者。
一般情况下，我们喜欢 var that = this;
var that = this; // 把 btn 对象 给 that var _this = this;
** 案例：点击倒计时**
点击倒计时
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<button id="btn">点击发送短信</button>
</body>
</html>
<script>
var btn = document.getElementById("btn");
var count = 5; // 数据的 5
var timer = null; // 定时器的名字
btn.onclick = function() {
clearInterval(timer); // 先清除掉原来的定时器
// alert(11);
this.disabled = true;
//alert(this); // this 指向的是 btn
var that = this; // 把 btn 对象 给 that var _this = this;
timer = setInterval(sendTextMessage,1000); // 开启定时器 名字 timer
function sendTextMessage() {
count--;
//this.innerHTML = "还剩余"+count+"秒";
// alert(this); // this 指向的是 定时器 window
//alert(that);
if(count >= 0 )
{
that.innerHTML = "还剩余"+count+"秒";
}
else
{
that.innerHTML = "重新发送短信";
that.disabled = false;
clearInterval(timer); // 清除定时器
count = 5;
}
}
}
</script>
定时器之 setTimeout()
时间去哪儿了
setTimeout(“函数”, 时间 )
setInterval(fn,5000); 每隔 5秒钟，就去执行函数fn一次
setTimeout(fn,5000); 5秒钟之后，去执行 fn 函数， 只执行一次
案例：5秒后自动关闭广告
5秒后自动关闭广告.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
img {
position: absolute;
top: 0;
}
#left {
left: 0;
}
#right {
right: 0;
}
</style>
</head>
<body>
<img src="1.gif" alt="" id="left"/>
<img src="2.gif" alt="" id="right"/>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
</body>
</html>
<script>
function $(id) { return document.getElementById(id);} // id函数
function hide(id) { // 隐藏函数
$(id).style.display = "none";
}
function show(id) {
$(id).style.display = "block";
}
setTimeout(closeAd,5000);
function closeAd() {
hide("left");
hide("right");
}
</script>
深层次的看待定时器区别
setInterval是排队执行的
假如 间隔时间是1秒， 而执行的程序的时间是2秒 上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒
setTimeout 是延迟执行的
延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒
5秒钟自动跳转页面
5s跳转
知识点
BOM
JS 页面跳转: window.location.href = ”http://www.itcast.cn” ;
递归调用
函数自己调用自己的过程 我们称之为 ： 递归调用
递归调用
但是这样用，一定要加一个退出 if 的条件，不然成为死循环了。
目的就是为了，模拟使用 settimeout 来实现setinterval 的效果。
arguments 对象
function fn(a,b,c) { console.log(a+b+c); alert(arguments.length;)}
fn(1,3,4,6);
arguments.length; 返回的是 实参的个数 ，这里是4。
但是这个对象有讲究，他只在正在使用的函数内使用。
arguments.callee;
返回的是正在执行的函数。 也是在函数体内使用。 在使用函数递归调用时推荐使用arguments.callee代替函数名本身。
案例完整代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="demo"></div>
</body>
</html>
<script>
var demo = document.getElementById("demo");
var count = 5;
var speed = 1000;
setTimeout(goIndexPage,speed); // 1秒钟之后去执行 goIndexPage这个函数
function goIndexPage() {
//alert(arguments.callee);
count--;
demo.innerHTML = "<a href='http://www.baidu.com'>本页面将在第"+count+"秒钟之后跳转页面</a>";
if(count <= 0)
{
// 如果 count 小于 0 就到了时间了 我们应该跳转页面
window.location.href = "http://www.baidu.com";
}
else
{
setTimeout(arguments.callee,speed); // 递归调用 自己调用自己
}
}
</script>
备注：案例的素材
链接：http://pan.baidu.com/s/1dFl2pK9 密码：q53d
