JavaScript學習筆記整理Day9
一.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
二.通過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