節(jié)點(diǎn)屬性
獲取節(jié)點(diǎn)屬性
getAttribute(屬性) 獲取屬性
通過這個(gè)方法，可以得到 某些元素的 某些屬性 浩村。
alert(demo.getAttribute("id"));
alert(demo.getAttribute("class"));
alert(demo.getAttribute("title"));
彈出對(duì)話框： 彈出title里面的內(nèi)容
設(shè)置節(jié)點(diǎn)屬性
setAttribute(“屬性”,”值”);
比如說做葵，我們想要把 一個(gè) 類名 改為 demo
div.setAttribute(“class”,”demo”);
刪除某個(gè)屬性
removeAttribute(“屬性”);
demo.removeAttribute(“title”) ;之后這個(gè)盒子就沒有title屬性 ，因?yàn)榻o刪掉了 心墅。
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.mbox-one{
color: red;
}
</style>
<script type="text/javascript">
window.onload = function () {
var demo = document.getElementById("mbox");
console.dir(demo.getAttribute("id"));//mbox
console.dir(demo.getAttribute("class"));//box
console.dir(demo.getAttribute("title"));//mybox
demo.setAttribute("class","mbox-one");
demo.removeAttribute("title");
console.dir(demo.getAttribute("title"));//null
}
</script>
</head>
<body>
<div class="box" id="mbox" title="mybox">1235</div>
</body>
</html>
例：生成輪播圖的頁腳(張數(shù))
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
.box{
width: 730px;
height: 454px;
margin: 100px auto;
position: relative;
}
ul,li{
list-style: none;
}
.box-img{
width: 730px;
height: 454px;
overflow: hidden;
}
.pager{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -75px;
}
.pager span{
display: inline-block;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
background-color: #333;
border-radius: 12px;
color: #fff;
margin-left: 6px;
}
.pager span.current{
color: #fff;
background-color: #fff;
color: #333;
}
</style>
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById("scroll");
var pagerBox = document.createElement("div");
pagerBox.className = "pager";
box.appendChild(pagerBox);
var ul = document.getElementsByTagName("ul")[0];
var lis = ul.children;
for(var i=0 ;i<lis.length ; i++){
var newSpan = document.createElement("span");
newSpan.innerHTML = i+1;
pagerBox.appendChild(newSpan);
}
var curSpan = pagerBox.children[1];//第二個(gè)被選中
// curSpan.className = "current";
curSpan.setAttribute("class","current");
}
</script>
</head>
<body>
<div class="box" id="scroll">
<div class="box-img">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
例：模擬發(fā)布微博
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul,li{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.box{
width: 550px;
margin: 0 auto;
border: 1px solid #333;
}
textarea{
width: 350px;
height: 120px;
resize: none;
margin-top: 6px;
}
li{
list-style: none;
border-bottom: 1px dotted #999;
margin: 5px 25px 5px 62px;
}
li a{
float: right;
}
</style>
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById("box");
var btn = box.getElementsByTagName("button")[0];
var txt = box.getElementsByTagName("textarea")[0];
var ul = document.createElement("ul");
box.appendChild(ul);
btn.onclick = function () {
if(txt.value == ""){
alert("輸入不能為空");
}else{
//創(chuàng)建一個(gè)li
var newLi = document.createElement("li");
newLi.innerHTML = txt.value+"<a href='javascript:;'>刪除</a>";
//清空輸入框
txt.value = "";
var lis = ul.children;
if(lis.length == 0){//第一個(gè)直接插入
ul.appendChild(newLi);
}else{//以后每個(gè)都要插在第一個(gè)前面
ul.insertBefore(newLi,lis[0]);
}
//刪除
var as = ul.getElementsByTagName("a");
for(var i=0;i<as.length ;i++){
as[i].onclick = function () {
var delLi = this.parentNode;
ul.removeChild(delLi);
}
}
}
}
}
</script>
</head>
<body>
<div class="box" id="box">
微博發(fā)布 <textarea></textarea> <button>發(fā)布</button>
</div>
</body>
</html>
JS內(nèi)置對(duì)象
|對(duì)象名稱|對(duì)象說明|
|::|::|
|Arguments|函數(shù)參數(shù)集合|
|Array|數(shù)組對(duì)象|
|Boolean|布爾對(duì)象|
|Date|日期時(shí)間|
|Error|異常對(duì)象|
|Function|函數(shù)構(gòu)造器|
|Math|數(shù)學(xué)對(duì)象|
|Number|數(shù)值對(duì)象|
|Object|基礎(chǔ)對(duì)象|
|RegExp|正則表達(dá)式對(duì)象|
|String|字符串對(duì)象|
|Event|事件對(duì)象|
日期函數(shù) ( Date() )
這個(gè)函數(shù) （對(duì)象） 可以設(shè)置我們本地 日期酿矢。 年月日 時(shí)分秒
聲明日期
var date = new Date();
創(chuàng)造聲明一個(gè)新的日期函數(shù) 賦值給了 date
var arr = new Array();
使用函數(shù)
|方法| 描述|
|::|::|
|Date() |返回當(dāng)日的日期和時(shí)間。
|getDate() |從 Date 對(duì)象返回一個(gè)月中的某一天 (1 ~ 31)怎燥。|
|getDay() |從 Date 對(duì)象返回一周中的某一天 (0 ~ 6)瘫筐。|
|getMonth()| 從 Date 對(duì)象返回月份 (0 ~ 11)。|
|getFullYear()| 從 Date 對(duì)象以四位數(shù)字返回年份铐姚。|
|getYear() |請(qǐng)使用 getFullYear() 方法代替策肝。|
|getHours() |返回 Date 對(duì)象的小時(shí) (0 ~ 23)。|
|getMinutes() |返回 Date 對(duì)象的分鐘 (0 ~ 59)谦屑。|
|getSeconds() |返回 Date 對(duì)象的秒數(shù) (0 ~ 59)驳糯。|
|getMilliseconds()| 返回 Date 對(duì)象的毫秒(0 ~ 999)。|
|getTime() |返回 1970 年 1 月 1 日至今的毫秒數(shù)氢橙。|
|getTimezoneOffset()| 返回本地時(shí)間與格林威治標(biāo)準(zhǔn)時(shí)間 (GMT) 的分鐘差酝枢。|
|getUTCDate() |根據(jù)世界時(shí)從 Date 對(duì)象返回月中的一天 (1 ~ 31)。|
|getUTCDay() |根據(jù)世界時(shí)從 Date 對(duì)象返回周中的一天 (0 ~ 6)悍手。|
|getUTCMonth() |根據(jù)世界時(shí)從 Date 對(duì)象返回月份 (0 ~ 11)帘睦。|
|getUTCFullYear() |根據(jù)世界時(shí)從 Date 對(duì)象返回四位數(shù)的年份。|
|getUTCHours() |根據(jù)世界時(shí)返回 Date 對(duì)象的小時(shí) (0 ~ 23)坦康。|
|getUTCMinutes() |根據(jù)世界時(shí)返回 Date 對(duì)象的分鐘 (0 ~ 59)竣付。|
|getUTCSeconds() |根據(jù)世界時(shí)返回 Date 對(duì)象的秒鐘 (0 ~ 59)。|
|getUTCMilliseconds() |根據(jù)世界時(shí)返回 Date 對(duì)象的毫秒(0 ~ 999)滞欠。|
|parse() |返回1970年1月1日午夜到指定日期（字符串）的毫秒數(shù)古胆。|
|setDate() |設(shè)置 Date 對(duì)象中月的某一天 (1 ~ 31)。|
|setMonth() |設(shè)置 Date 對(duì)象中月份 (0 ~ 11)。|
|setFullYear() |設(shè)置 Date 對(duì)象中的年份（四位數(shù)字）逸绎。|
|setYear() | 請(qǐng)使用 setFullYear() 方法代替惹恃。|
|setHours() |設(shè)置 Date 對(duì)象中的小時(shí) (0 ~ 23)。|
|setMinutes() |設(shè)置 Date 對(duì)象中的分鐘 (0 ~ 59)棺牧。|
|setSeconds() |設(shè)置 Date 對(duì)象中的秒鐘 (0 ~ 59)巫糙。|
|setMilliseconds()| 設(shè)置 Date 對(duì)象中的毫秒 (0 ~ 999)。|
|setTime() |以毫秒設(shè)置 Date 對(duì)象颊乘。|
|setUTCDate() |根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中月份的一天 (1 ~ 31)参淹。|
|setUTCMonth() |根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的月份 (0 ~ 11)。|
|setUTCFullYear() |根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的年份（四位數(shù)字）乏悄。|
|setUTCHours() |根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的小時(shí) (0 ~ 23)浙值。|
|setUTCMinutes() |根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的分鐘 (0 ~ 59)。|
|setUTCSeconds() |根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的秒鐘 (0 ~ 59)纲爸。|
|setUTCMilliseconds()| 根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的毫秒 (0 ~ 999)亥鸠。|
|toSource() |返回該對(duì)象的源代碼。|
|toString() |把 Date 對(duì)象轉(zhuǎn)換為字符串识啦。|
|toTimeString()| 把 Date 對(duì)象的時(shí)間部分轉(zhuǎn)換為字符串负蚊。|
|toDateString() |把 Date 對(duì)象的日期部分轉(zhuǎn)換為字符串。|
|toGMTString()| 請(qǐng)使用 toUTCString() 方法代替颓哮。|
|toUTCString() |根據(jù)世界時(shí)家妆，把 Date 對(duì)象轉(zhuǎn)換為字符串。|
|toLocaleString() |根據(jù)本地時(shí)間格式冕茅，把 Date 對(duì)象轉(zhuǎn)換為字符串伤极。|
|toLocaleTimeString()| 根據(jù)本地時(shí)間格式，把 Date 對(duì)象的時(shí)間部分轉(zhuǎn)換為字符串姨伤。|
|toLocaleDateString()| 根據(jù)本地時(shí)間格式哨坪，把 Date 對(duì)象的日期部分轉(zhuǎn)換為字符串。|
|UTC() |根據(jù)世界時(shí)返回 1970 年 1 月 1 日 到指定日期的毫秒數(shù)乍楚。|
|valueOf()| 返回 Date 對(duì)象的原始值当编。|
例：日歷實(shí)現(xiàn)
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
margin: 0 auto;
border: 1px solid #ccc;
background-color: green;
}
.box span{
display: block;
width: 100px;
height: 100px;
background: yellowgreen;
text-align: center;
line-height: 100px;
margin: 10px auto;
font-size: 50px;
}
.box p{
text-align: center;
color: #000;
}
</style>
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById("date");
var childs = box.children;
//日期函數(shù)
var date = new Date();
childs[1].innerHTML = date.getDate();//一個(gè)月中的日期
var dateStr = ["日","一","二","三","四","五","六"];
var str = date.getFullYear()+"年"+date.getMonth()+"月"+date.getDate()+"日 星期"+dateStr[date.getDay()];
childs[0].innerHTML = str;
}
</script>
</head>
<body>
<div class="box" id="date">
<p>2015-11-24 星期五</p>
<span>13</span>
</div>
</body>
</html>
定時(shí)器 setInterval
很多情況下，一些操作不需要人工干預(yù)徒溪， 代碼自己會(huì)不斷的去執(zhí)行 忿偷。而且 會(huì)有 時(shí)間的綁定 。 比如每隔 5秒鐘就去執(zhí)行一次事件臊泌。
我們可以設(shè)定時(shí)間 讓某個(gè)動(dòng)作不斷的去執(zhí)行 鲤桥。 這個(gè)我們?cè)賘s 里面用定時(shí)器來表示。
window.setInterval(“執(zhí)行的函數(shù)”,間隔時(shí)間)
正確的寫法:setInterval(fun, 1000); 每隔1秒鐘（1000ms）渠概，就去執(zhí)行一次 fun 這個(gè)函數(shù).
setInterval(“fun()”,1000); 可以這樣寫
setInterval( function(){} , 1000 ) ;
setInterval(fun(),1000);
例：定時(shí)器
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
// var doubleDate = new Date("2107/11/11 00:00:00");
var demo = document.getElementById("demo");
setInterval(func , 1000);
var num = 0;
function func(){
num++;
demo.innerHTML = num;
}
}
</script>
</head>
<body>
<div id="demo">
0
</div>
</body>
</html>
定義自己的日期時(shí)間
var endTime = new Date(“2015/12/12”);`
- 如果date 括號(hào)里面寫日期時(shí)間 就是自己定義的日期時(shí)間
new Date(“2015/12/12 17:30:00”);自定義日期時(shí)間 - 如果 date括號(hào)里面不寫日期時(shí)間 茶凳， 就是當(dāng)前日期時(shí)間 。
new Date()當(dāng)前日期時(shí)間
日期和時(shí)分秒中間 有空格隔開
例：倒計(jì)時(shí)
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.demo{
/*display: inline-block;*/
/*width: 500px;*/
margin: 100px auto;
font-size: 36px;
color: red;
font-family: "simsun";
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function () {
var demo = document.getElementById("demo").getElementsByTagName("span")[0];
var endTime = new Date("2017/6/9 17:30:00");
setInterval(clock,1000);
function clock(){
var now = new Date();
var second = parseInt((endTime.getTime()-now.getTime())/1000);
//天數(shù)
var day = parseInt(second/(60*60*24));
day = day>9?day:("0"+day);
//小時(shí)數(shù)
var hour = parseInt((second/(60*60))%24);
hour = hour>9?hour:("0"+hour);
//分鐘
var min = parseInt(second/60%60);
min = min>9?min:("0"+min);
//秒
var sec = parseInt(second%60);
sec = sec>9?sec:"0"+sec;
demo.innerHTML = day+"天"+hour+"時(shí)"+min+"分"+sec+"秒";
}
}
</script>
</head>
<body>
<div id="demo" class="demo">
距離下一次放假還有：<span>00天00時(shí)00分00秒</span>
</div>
</body>
</html>
例：時(shí)鐘
- 要得到現(xiàn)在的 時(shí)、分慧妄、秒
這里面有一個(gè)小玄機(jī)顷牌，比如現(xiàn)在是 9點(diǎn)整時(shí)針指向9是沒錯(cuò)的 ，但是如果現(xiàn)在是 9點(diǎn)半 時(shí)針應(yīng)該指向的是 9到10 之間才對(duì)塞淹。所以，我們不但要得到現(xiàn)在的小時(shí)罪裹，還要得到已經(jīng)過去了多少分饱普。
ms = date.getMilliseconds(); // 現(xiàn)在的毫秒數(shù)
s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s
m = date.getMinutes() + s / 60; // 得到的是分?jǐn)?shù) 45.6分鐘
h = date.getHours() % 12 + m / 60 ;
秒針在一格一格的跳，完整代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.clock{
width: 600px;
height: 600px;
background: url("images/clock.jpg") no-repeat center;
margin: 0 auto;
position: relative;
}
.clock div{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.clock .h{
background: url("images/hour.png") no-repeat center;
}
.clock .m{
background: url("images/minute.png") no-repeat center;
}
.clock .s{
background: url("images/second.png") no-repeat center;
}
</style>
<script type="text/javascript">
window.onload = function () {
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
var h=0, m = 0,s = 0; ms = 0;
//一開始刷新一次状共，因?yàn)槎〞r(shí)器要一秒之后再執(zhí)行
refreshClock();
//定時(shí)器
setInterval(function () {
refreshClock();
} , 1000);
function refreshClock(){
//得到當(dāng)前時(shí)間
var now = new Date();
s = now.getSeconds();
//分針的旋轉(zhuǎn)角度和分鐘套耕、秒鐘數(shù)有關(guān)
m = now.getMinutes() + s/60;
//時(shí)針的旋轉(zhuǎn)角度和小時(shí)、分鐘數(shù)有關(guān)
h = now.getHours() + m/60;
second.style.webkitTransform = "rotate("+s*6+"deg)";
minute.style.webkitTransform = "rotate("+m*6+"deg)";
hour.style.webkitTransform = "rotate("+h*60+"deg)";
}
}
</script>
</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>
秒針平滑的過渡峡继，完整代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.clock{
width: 600px;
height: 600px;
background: url("images/clock.jpg") no-repeat center;
margin: 0 auto;
position: relative;
}
.clock div{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.clock .h{
background: url("images/hour.png") no-repeat center;
}
.clock .m{
background: url("images/minute.png") no-repeat center;
}
.clock .s{
background: url("images/second.png") no-repeat center;
}
</style>
<script type="text/javascript">
window.onload = function () {
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
var h=0, m = 0,s = 0; ms = 0;
//一開始刷新一次冯袍，因?yàn)槎〞r(shí)器要一秒之后再執(zhí)行
refreshClock();
//定時(shí)器
setInterval(function () {
refreshClock();
} , 10);
function refreshClock(){
//得到當(dāng)前時(shí)間
var now = new Date();
ms = now.getMilliseconds();
s = now.getSeconds()+ms/1000;
//分針的旋轉(zhuǎn)角度和分鐘、秒鐘數(shù)有關(guān)
m = now.getMinutes() + s/60;
//時(shí)針的旋轉(zhuǎn)角度和小時(shí)碾牌、分鐘數(shù)有關(guān)
h = now.getHours() + m/60;
second.style.webkitTransform = "rotate("+s*6+"deg)";
minute.style.webkitTransform = "rotate("+m*6+"deg)";
hour.style.webkitTransform = "rotate("+h*60+"deg)";
}
}
</script>
</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>
this
-
在事件注冊(cè)的函數(shù)中
this 指向的是事件的調(diào)用者
-
在普通函數(shù)中
this指的是函數(shù)的使用者康愤。
一般情況下，我們喜歡 var that = this;
var that = this; // 把 btn 對(duì)象 給 that 舶吗，或者var _this = this;
關(guān)閉定時(shí)器
clearInterval(定時(shí)器名字);
例：發(fā)送短信的倒計(jì)時(shí)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementsByTagName("button")[0];
var count;
var that;
var timer = null;
btn.onclick = function () {
//先清除原來的定時(shí)器
if(timer) clearInterval(timer);
count = 10;
// btn.disabled = true;
btn.setAttribute("disabled","true");
timer = setInterval(sendTxtMsg,1000);
that = this;
}
function sendTxtMsg(){
// console.log(this);
// console.log(that);
if(count<=0){
clearInterval(timer);
that.innerHTML = "重新發(fā)送短信";
that.disabled = false;
}else{
that.innerHTML = "還剩"+count+"s發(fā)送";
count--;
}
}
}
</script>
</head>
<body>
<input type="text"/><button>發(fā)送短信</button>
</body>
</html>
定時(shí)器setTimeout
多少時(shí)間后執(zhí)行征冷，之執(zhí)行一次
setTimeout(“函數(shù)”, 時(shí)間 ) ;
setInterval(fn,5000); 每隔 5秒鐘，就去執(zhí)行函數(shù)fn一次
setTimeout(fn,5000); 5秒鐘之后誓琼，去執(zhí)行 fn 函數(shù)检激， 只執(zhí)行一次
例：5秒之后關(guān)閉廣告
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#left{
position: fixed;
top: 240px;
left: 0;
}
#right{
position: fixed;
top: 240px;
right: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
function $(id) {return document.getElementById(id);}
function hide(id){
$(id).style.display = "none";
}
setTimeout(closeAD,5000);
function closeAD(){
hide("left");
hide("right");
}
}
</script>
</head>
<body>
</body>
</html>
深層次的看待定時(shí)器區(qū)別
- setInterval是排隊(duì)執(zhí)行的
假如 間隔時(shí)間是1秒， 而執(zhí)行的程序的時(shí)間是2秒 上次還沒執(zhí)行完的代碼會(huì)排隊(duì), 上一次執(zhí)行完下一次的就立即執(zhí)行, 這樣實(shí)際執(zhí)行的間隔時(shí)間為2秒 - setTimeout
setTimeout延遲時(shí)間為1秒執(zhí)行, 要執(zhí)行的代碼需要2秒來執(zhí)行,那這段代碼上一次與下一次的執(zhí)行時(shí)間為3秒.
JS頁面跳轉(zhuǎn)
JS 頁面跳轉(zhuǎn): window.location.href = ”http://www.itcast.cn” ;
屬于BOM對(duì)象的方法
例：5秒后跳轉(zhuǎn)到百度首頁
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var demo = document.getElementById("demo");
var count = 5;
var speed = 1000;
setTimeout(getIndexPager , speed);//1秒之后執(zhí)行g(shù)etIndexPager函數(shù)
function getIndexPager(){
count--;
if(count<0){
window.location.
}else{
setTimeout(getIndexPager,speed);
demo.innerHTML = (count+1)+"秒之后跳轉(zhuǎn)到百度";
}
}
}
</script>
</head>
<body>
<span id="demo">5秒之后跳轉(zhuǎn)到百度</span>
<a >首頁</a>
</body>
</html>
如上所示腹侣，函數(shù)自己調(diào)用自己的過程 我們稱之為 ： 遞歸調(diào)用叔收，遞歸調(diào)用必須有退出條件
arguments對(duì)象
function fn(a,b,c) { console.log(a+b+c); alert(arguments.length;)}
fn(1,3,4,6);
arguments只在正在使用的函數(shù)內(nèi)使用。
返回正在執(zhí)行的函數(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); }
所以上面的遞歸調(diào)用：setTimeout(getIndexPager,speed);可以改為：setTimeout(arguments.callee,speed);
例：圖片滾動(dòng)展示動(dòng)畫
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 512px;
height: 400px;
overflow: hidden;
margin: 100px auto;
border: 2px solid #999;
position: relative;
}
.box img{
position: absolute;
left: 0;
top: 0;
}
.box .up{
position: absolute;
width: 100%;
height: 200px;
top: 0;
left: 0;
}
.box .down{
position: absolute;
width: 100%;
height: 200px;
left: 0;
bottom: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
function $(id){return document.getElementById(id);}
var spans = document.getElementsByTagName("span");
var pic = $("pic");
var num = 0;
var upTimer = null;
var downTimer = null;
spans[0].onmouseover = function () {
if(upTimer) clearInterval(upTimer);
upTimer = setInterval(function(){
if(num > -(pic.height-400) ){
num-=3;
pic.style.top = num+"px";
}else{
//清除定時(shí)器
clearInterval(upTimer);
}
},10);
}
spans[0].onmouseout = function () {
if(upTimer) clearInterval(upTimer);//清除向上滾的定時(shí)器
}
spans[1].onmouseover = function () {
if(downTimer) clearInterval(downTimer);
downTimer = setInterval(function () {
if(num<0){
num++;
pic.style.top = num+"px";
}else{
clearInterval(downTimer);
}
},10);
}
spans[1].onmouseout = function () {
if(downTimer) clearInterval(downTimer);//清除向下滾的定時(shí)器
}
}
</script>
</head>
<body>
<div class="box">
<span class="up"></span>
<span class="down"></span>
</div>
</body>
</html>
Javascript單線程
Javascript是單線程執(zhí)行的伦籍，也就是無法同時(shí)執(zhí)行多段代碼蓝晒，當(dāng)某一段代碼正在執(zhí)行的時(shí)候，所有后續(xù)的任務(wù)都必須等待帖鸦，形成一個(gè)隊(duì)列芝薇，一旦當(dāng)前任務(wù)執(zhí)行完畢，再?gòu)年?duì)列中取出下一個(gè)任務(wù)作儿，這也常被稱為阻塞式執(zhí)行洛二。
如果代碼中設(shè)定了一個(gè)setTimeout,那么瀏覽器便會(huì)在合適時(shí)間將代碼插入任務(wù)隊(duì)列，如果這個(gè)時(shí)間為0 ，便會(huì)立即插入任務(wù)隊(duì)列晾嘶，但不是立即執(zhí)行妓雾，仍然要等待前面的代碼執(zhí)行完畢，所以setTimeout并不能保證執(zhí)行的時(shí)間垒迂，是否及時(shí)執(zhí)行取決于JavaScript的線程是擁擠還是空閑凸克。
字符串對(duì)象
我們工作中經(jīng)常進(jìn)行字符串操作。
轉(zhuǎn)換為字符串
- 字符串加法：
2+ “” = “2” 2+”ab” = “2ab” - String() 轉(zhuǎn)換為字符串
toString（基數(shù)）;基數(shù)就是進(jìn)制
var txt = 10;
txt.toString(2) 二進(jìn)制 1010
獲取字符位置方法
-
charAt龄砰，獲取相應(yīng)位置字符（參數(shù)： 字符位置） -
charCodeAt獲取相應(yīng)位置字符unicode編碼（參數(shù)： 字符位置） -
var txt = “abcedf”;
比如趣斤， txt.charAt(4); 索引號(hào)一定是從0開始 返回的結(jié)果是 d
我們根據(jù)我們輸入的 位數(shù) 返回相應(yīng)的 字符 。
unicode編碼 是我們字符的字符的唯一表示 吏奸。
<script type="text/javascript">
var txt1 = "haha";
var txt2 = "你好";
alert(txt1.charAt(1));//a
alert(txt2.charAt(1));//好
alert(txt1.charCodeAt(1));//97
alert(txt2.charCodeAt(1));//22907
</script>
例：檢測(cè)字符串的長(zhǎng)度欢揖，中文占兩個(gè)字符
<script type="text/javascript">
var txt = "what are you 弄啥咧！";
function getStringLen(str){
var len = 0;//存儲(chǔ)字符串的總長(zhǎng)度
var c =0;//存儲(chǔ)每個(gè)字符的編碼
for(var i=0;i<str.length;i++){
c = str.charCodeAt(i);
if(c>=0 && c<=127){
len++;
}else{
len+=2;
console.log(c);
}
}
return len;
}
alert(getStringLen(txt));
</script>
