一扮匠、時(shí)鐘
1.第一步：得到現(xiàn)在的時(shí)分秒
第二步：秒針一次走6度羡藐、分針一次走6度怀薛、時(shí)針一次走30度尾序。
<script type="text/javascript">
window.onload = function () {
var hour = document.getElementById("h");
var minute = document.getElementById("m");
var second = document.getElementById("s");
// 定時(shí)器開始
var ms = 0;
var s = 0;
var m = 0;
var h =0;
setInterval(function()
{
var date = new Date();
ms = date.getMilliseconds();
s = date.getSeconds() + ms/1000;//得到秒數(shù) 例如 1.3s 加后面的當(dāng)前時(shí)間是因?yàn)榭梢杂羞^度钓丰，否則一下子就轉(zhuǎn)過去。
m = date.getMinutes() + s / 60; //30.5分鐘
h =date.getHours() % 12 + m / 60 ;//9.5小時(shí)
second.style.WebkitTransform = "rotate(" +s*6+ "deg)"http://變化屬性每币，旋轉(zhuǎn)deg度携丁。
minute.style.WebkitTransform = "rotate(" +m*6+ "deg)";
hour.style.WebkitTransform = "rotate(" +h*30+ "deg)";
//
},1000);
}
**兼容問題WebkitTransform谷歌不認(rèn)識(shí)，MozTransform火狐不認(rèn)識(shí)兰怠。**
二梦鉴、短信驗(yàn)證
1.按鈕不可用：
btn.disabled = "disabled" || btn.disabled =true;
2.關(guān)閉定時(shí)器：clearInterval(定時(shí)器名稱)
3.實(shí)例
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById('btn');
var m = 3;
btn.onclick = function(){
clearInterval(timer);//先清除以防中途點(diǎn)擊調(diào)用定時(shí)器
this.disabled = true;
var that = this; //事件的調(diào)用者
var timer = setInterval(send,1000);
function send(){
m--;
if(m>=0){
that.innerHTML = "還剩余 "+m+"秒";
}
else{
that.innerHTML = "點(diǎn)擊重新發(fā)送短信";
that.disabled = false;
clearInterval(timer); //清除定時(shí)器，否則會(huì)一直調(diào)用ifelse下去
m = 3;
}
}
}
}
</script>
4.因?yàn)?button是個(gè)雙標(biāo)簽 所以要更改他的值揭保， 使用 innerHTML 的肥橙，不是value。
三秸侣、定時(shí)器之setTimeout
1.類似于定時(shí)炸彈存筏，只執(zhí)行一次宠互。
setTimeout("函數(shù)",時(shí)間) 時(shí)間:多長(zhǎng)時(shí)間后執(zhí)行
3秒關(guān)閉廣告總結(jié)：設(shè)置隱藏函數(shù)，當(dāng)調(diào)用定時(shí)函數(shù)執(zhí)行隱藏函數(shù)椭坚。
<script>
function $(id) {
return document.getElementById(id);
}
function hide(id){
$(id).style.display = "none";
}
function show(id){
$(id).style.display = "block";
}
setTimeout(close,2000);
function close(){
hide("right");
hide("left");
}
</script>
2.setInterval()和setTimeout()的區(qū)別：
- setInterval() 是排隊(duì)執(zhí)行的 不管間隔時(shí)間予跌，執(zhí)行時(shí)間為主。
假如 間隔時(shí)間是1秒善茎， 而執(zhí)行的程序的時(shí)間是2秒 上次還沒執(zhí)行完的代碼會(huì)排隊(duì), 上一次執(zhí)行完下一次的就立即執(zhí)行, 這樣實(shí)際執(zhí)行的間隔時(shí)間為2秒券册。 - setTimeout() 間隔時(shí)間+執(zhí)行時(shí)間。
延遲時(shí)間為1秒執(zhí)行, 要執(zhí)行的代碼需要2秒來(lái)執(zhí)行,那這段代碼上一次與下一次的執(zhí)行時(shí)間為3秒.垂涯。 - JS 頁(yè)面跳轉(zhuǎn):
window.location.href = ”#” ;BOM - 函數(shù)自己調(diào)用自己：遞歸調(diào)用
用if else再次調(diào)用settimeout ：模擬使用 settimeout 來(lái)實(shí)現(xiàn)setinterval 的效果 - arguments 對(duì)象
arguments.length;返回的是 實(shí)參的個(gè)數(shù)烁焙。
arguments.callee;返回的是正在執(zhí)行的函數(shù)， 也是在函數(shù)體內(nèi)使用集币。
在使用函數(shù)遞歸調(diào)用時(shí)推薦使用arguments.callee代替函數(shù)名本身考阱。 - 例如：
function fn() { console.log(arguments.callee); }
這個(gè)callee 就是 ：function fn() { console.log(arguments.callee); }
四、定時(shí)器之小米手機(jī)展示實(shí)例
寫了三遍鞠苟，寫到頭暈乞榨。
總結(jié)：把圖片分成兩部分，鼠標(biāo)放在上面時(shí)当娱，執(zhí)行定時(shí)器吃既，執(zhí)行的函數(shù)為 滿足條件時(shí)圖片top變化，然后終止定時(shí)器跨细。下面相同鹦倚。鼠標(biāo)離開時(shí)停止上面定時(shí)器。
function $(id) {
return document.getElementById(id);
}
var num = 0;
var timer = null;
$("picup").onmouseover = function(){
clearInterval(timer);//如果不先清除其他定時(shí)器冀惭，會(huì)打架 不知道執(zhí)行哪一個(gè)
timer = setInterval(function(){
num -= 3;//出錯(cuò)震叙，num應(yīng)該在定時(shí)器中一直變化
num >= -1070 ? $("pic").style.top = num+"px" : clearInterval(timer);
},20);
}
$("picdown").onmouseover = function(){
clearInterval(timer);
timer = setInterval(function(){
num += 3;
num < 0 ? $("pic").style.top = num+"px" : clearInterval(timer);
},20);
}
$("picdown").parentNode.onmouseout = function(){
clearInterval(timer);
}
定時(shí)器的時(shí)間如果設(shè)置為0，不代表立即執(zhí)行散休，代表立即插入隊(duì)列媒楼，等所有程序執(zhí)行完畢再執(zhí)行！
五戚丸、運(yùn)算符補(bǔ)充
1.一元操作符 ++划址， --， + 限府，- +5 -6
2.邏輯操作符 !夺颤， &&， ||
3.基本運(yùn)算符 +, -, *, /, %
4.關(guān)系操作符 >, <, >=, <=, ===, ==, !=, !== 胁勺；
= 賦值 == 判斷 === 全等
5.條件操作符 （三元運(yùn)算符） ? :
6.賦值運(yùn)算符 +=, -=, *=, /=, %=
a+=5 a= a + 5
7.逗號(hào)運(yùn)算符 , var a=0,b=0;
- 順序
1. ()
2. !世澜、-、++姻几、-- (-10) 負(fù)號(hào) 正號(hào)
3.*宜狐、/势告、%
4. +、- （10-5）
5. <抚恒、<=咱台、<、>=
6. ==俭驮、!=回溺、===、!==混萝、
7.&&
8. ||
9.?:
10. =遗遵、+=、-=逸嘀、*=车要、/=、%= 賦值 1+2*3
題：
- a&&b 結(jié)果是什么崭倘？
如果a 為假 翼岁，則返回 a
如果a 為真 ，則返回 b
var aa = 0&&1;
alert(aa) // 0
var bb = 1&&0;
alert(bb); //0
var cc = 1&&10;
alert(cc); // 10 - a||b
如果 a 為假 則返回b
如果 a 為真 則返回a
console.log(0||1); 1
console.log(1||0); 1
console.log(1||5); 1
console.log(5||1); 5
var a = 1 && 2 && 3;
console.log(a); 3
var b = 0 && 1 && 2;
console.log(b); 0
var c = 1 && 0 && 2;
console.log(c); 0
%=
a+=3
a = a % 3;
六司光、字符串對(duì)象常用方法
- 轉(zhuǎn)換成字符串的幾種方式
- +'' " 2+"ab"= "2ab"
- String() 轉(zhuǎn)換為字符串
- toString(基數(shù)) 基數(shù) = 進(jìn)制
var txt = 10; txt.toString(2) ; 二進(jìn)制 結(jié)果是1010
- 獲取字符位置方法
charAt()琅坡；根據(jù)位置返回字符
var txt = "; txt.charAt(2); 返回 c
charCodeAt ()：獲取字符編碼
unicode編碼 是我們字符的唯一表示 。
- 檢測(cè)字符串長(zhǎng)度
思路：定義的判斷函數(shù)中残家，先存儲(chǔ)總的字符串長(zhǎng)度榆俺，再定義一個(gè)存儲(chǔ)字符編碼的變量，for循環(huán)判斷坞淮，當(dāng)i小于字符串長(zhǎng)度時(shí)茴晋，繼續(xù)判斷，字符編碼0 - 127時(shí)長(zhǎng)度加一回窘，否則長(zhǎng)度加二晃跺，最后返回字符串長(zhǎng)度，在輸出字符串長(zhǎng)度判斷函數(shù)毫玖！
<script type="text/javascript">
window.onload = function () {
var txt = "abc哈哈哈"
console.log(txt.length);
function panduan(str){
var len = 0;
var x = 0;
for( i = 0 ;i <str.length;i++){
x= str.charCodeAt(i);
if(x>=0 &&x<= 127)
{
len++;
}
else
{
len+=2;
}
}
return len;
}
console.log(panduan(txt));
}
</script>
