首頁 > 開發者 > JavaScript
標籤：substring htm dea tostring set 最大 oct css time
一.JavaScript定時器：
1.單次定時:setTimeout（fn，time）;
2.多次定時:setInterval(timer);
3.停止單次定時:clearTimeout(timer);
4.停止多次定時:clearInterval(timer);
執行個體1:使用單次和多次定時寫倒計時
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> h1{ font-size: 80px; text-align: center; color:green; } </style></head><body> <h1>30</h1> <script> var h = document.getElementsByTagName(‘h1‘)[0]; var num = parseInt(h.innerHTML); console.log(num); /* 使用多次定時 var timer = setInterval(function(){ num--; if(num <= 0){ num = ‘Game over!‘; clearInterval(timer); } h.innerHTML = num; },300);*/ function show(){ if(num <= -1){ //設定css樣式 h.style.color = ‘red‘; h.innerHTML = ‘Game over!‘; return; } h.innerHTML = num; num--; setTimeout(show,100); } show(); </script></body></html>
二.通過JavaScript擷取或者修改元素的css樣式
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>css樣式的擷取和設定</title> <style> #box{ width:600px; /* height:300px; */ border:1px solid #ccc; line-height: 300px; font-size: 30px; /* color:green; */ font-weight: 700; } #big{ border:1px solid #000; width:300px; height:300px; background-color: green; display: none; } </style></head><body> <div id="box" style=‘color:green;background-color:pink;height:300px‘> 門前有條小河溝，很難過. </div> <hr> <button onclick="show()">顯示</button> <div id="big"></div> <script> //css屬性的擷取 要求屬性寫在標籤的style中的 //擷取box的color屬性 var box = document.getElementById(‘box‘); console.log(box.style.color); //擷取width console.log(box.style.width); console.log(box.style.height); //js設定css的樣式 box.style.backgroundColor = ‘#f00‘; box.style.fontSize = ‘35px‘; box.style.borderRadius = ‘10px‘; //設定顯示隱藏 var big = document.getElementById(‘big‘); //聲明一個變數 var flog = 0; function show(){ if(flog == 0 ){ big.style.display = ‘block‘; flog = 1; }else{ big.style.display = ‘none‘; flog = 0; } } </script></body></html>
三.命名介紹
1.小駝峰命名:backgroundColor
2.大駝峰命名:BackgroundColor
3.匈牙利命名:background-color
四.數學運算
1.document.write(Math);//書寫運算對象
2.document.write(Math.PI);//PI是數學對象的一個屬性
3.document.write(Math.abs(100.21));//絕對值
4.document.write(Math.pow(2,4));//求次方2的4次方
5.document.write(Math.sqrt(100));//開平方
6.document.write(Math.round(100.21));//四捨五入
7.document.write(Math.floor(100.21));//舍一取整
8.document.write(Math.ceil(100.21));//進一取整
9.document.write(Math.max(100.21,334,33,2));//求最大值
10.document.write(Math.min(100.21,223,4,234));//求最小值
11.document.write(Math.random());//取隨機數0-1
取優質隨機數：
//求 0-15的隨機數 console.log(Math.floor(Math.random()*100000000000000) % 16);
五.Boolean對象:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>boolean對象</title></head><body> <script> //布爾對象的聲明方式 //No1 直接量 var bool = true; //No2 使用建構函式 var boo = new Boolean(true); console.log(bool); console.log(boo); console.log(boo == bool); //true console.log(boo === bool);//false //屬性 //方法 //No1. toString() 變成字串 console.log(bool.toString()); //No2. valueOf() 返回布爾原始值 true|false console.log(‘true‘.valueOf()); console.log(boo.valueOf()); </script></body></html>
六.Number對象：
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Number對象</title></head><body> <script> //Number對象 100 1 2 3 //聲明方式 //No1 直接量 var index = 100; //No2 使用建構函式 var myindex = new Number(10); //Number建構函式的屬性 //No1 js可表示的最大值 console.log(Number.MAX_VALUE); //No2 js可表示的最小值 console.log(Number.MIN_VALUE) //No3 NaN //Number對象的方法 //No1 toString() 轉換為指定的進位的字串數字 console.log(10..toString(2)); console.log(typeof 10..toString(2)); //string console.log(255..toString(16));//FF //No2 toFixed() 轉換為指定小數點位元的數字 console.log(10000..toFixed(1)); console.log(0.00002.toFixed(1)); //0-20 //No3 toExponential() 科學計數法 console.log(100000..toExponential()); console.log(1234123..toExponential()); //No4 toPrecision() 轉換為指定長度的數字 console.log(100000..toPrecision(4)); console.log(1.123123123.toPrecision(5));//參數1-21 </script></body></html>
七.String對象
屬性：length
方法：
1.charAt() //返回指定位置的字元
2.concat() //連接字串
3.charCodeAt() //返回指定字元的unicode編碼
4.fromCharCode() //將unicode編碼轉為字元
5.indexOf() //搜尋指定字元(首次出現) 沒有返回-1
6.lastIndexOf() //從後往前搜尋字串
7.slice() //字串截取 start,end
8.match() //正則
9.search()
10.str.replace
11.substr() //截取字串 start,length
12.substring() //和slice用法相同
13.toLowerCase() //轉換為小寫
14.toUpperCase() //轉換為大寫
15.split() //分割字串
JavaScript學習筆記整理Day9
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
