JavaScript進階----關於數字的方法，Math對象，日期對象，定時器，函數，for in
關於數字的方法：javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
number數字
在js裏面的小數和整數統一都是數字，-2^53-2^53，超出範圍以後精度就會不許確
number方法
Number()——參數中必須能被轉換成數字，不然返回NaN:
parseInt(解析的參數)——將參數轉換爲數字，整數部分遇到不是數字就停
parseFloat()——將參數轉換爲數字，直到小數部分遇到不是數字就停
Num.toFixed(n)——四捨五入保留n位小數
NaN（Not a Number）
NaN 不等於本身
*/
var a = "aaa";
console.log(Number(a));//NaN
console.log(typeof Number(a));number
var b = "999.566";
console.log(parseInt(b));//999
console.log(parseFloat(b));//999.566
var c = 25.98;
console.log(c.toFixed(1));//26.0
</script>
</body>
</html>
Math方法html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
Math 數學函數
Math.pow(16, 2)——十六的平方 256
Math.round(5.5)——四捨五入（整數）
Math.ceil(0.2)——向上取整
Math.floor(0.9)——向下取整
Math.max()——取參數中最大的值
Math.min()——取參數中最小的值
Math.random()——0-1的隨機數[0,1)
Math.random()*m+n
生成 n ~ (m+n)
Math.PI——π
Math.abs()——求絕對值
*/
console.log(Math.pow(2,4));//16
console.log(Math.round(5.5));//6
console.log(Math.ceil(0.2));//1
console.log(Math.floor(0.9));0
var x = Math.max(2,6,4,-5);
console.log(x);//6
var y = Math.min(2,6,4,-5);
console.log(y);//-5
console.log(Math.random());//[0,1)
console.log(Math.random()*30 + 50);
console.log(Math.PI);//3.141592653589793
</script>
</body>
</html>
時間對像：java
獲取當前時間：python
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
var data = new Date();
var strap = data.getTime();
// alert(strap);
var year = data.getFullYear();
var mon = data.getMonth()+1;//獲取月份 取值爲0~11之間的整數
var date = data.getDate();
var hour = data.getHours();
var min = data.getMinutes();
var sec = data.getSeconds();
var day = data.getDay();
document.body.innerHTML = year + "年" + mon + "月" + date + "日" + hour + "時" + min + "分" + sec + "秒"+ "星期"+ day;
</script>
</body>
</html>
定時器 dom
設置定時器：setTimeout 相似於python的sleep方法，只能設置一次定時函數
清除定時器：clearTimeoutspa
設置定時器：setInterval 會根據時間一直定時3d
清除定時器：clearIntervalcode
定時器htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
//延遲定時器 5000毫秒後執行一次且只執行一次
setTimeout(function () {
console.log(1);
},5000);
//隔1000毫秒一直不停地 在執行
setInterval(function () {
console.log(2);
},1000);
//setInterval(函數，時間);
function fn() {
console.log(3);
}
setInterval(fn,1000);
</script>
</body>
</html>
清除定時器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="box">
<p>還有<span id="time">5s</span>我就去百度啦</p>
</div>
<script>
var oTime = document.getElementById("time");
var num = 5;
var timer;
timer = setInterval(function () {
num --;
oTime.innerHTML = num + "s";
if(num === 0){
clearInterval(timer);
//clearTimeout();
window.location.href = "http://www.baidu.com";
}
},1000);
</script>
</body>
</html>
寫一個關於時間倒計時和數字時鐘的頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計時</title>
<style>
* {
margin: 0;
padding: 0;
}
#fight{
height: 200px;
line-height: 200px;
text-align: center;
font-size: 25px;
}
#fight span{
color: red;
}
#time{
height: 100px;
line-height: 100px;
text-align: center;
color: cornflowerblue;
font-size: 28px;
}
#time span{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div id="fight">敵人還有<span>5</span>秒到達戰場！</div>
<div id="time">如今是北京時間：<span></span></div>
<script>
//倒計時
var num = 5;
var timer;
var oFight = document.querySelector("#fight");
var oNum = document.querySelector("span");
var oTime = document.querySelector("#time span")
timer = setInterval(function () {
num --;
oNum.innerHTML = num;
if(num === -1){
clearInterval(timer);
oFight.innerHTML = "碾碎他們！"
}
}, 1000);
function times() {
// 時間
var data = new Date();
var year = data.getFullYear();
var month = data.getMonth() + 1;
var day = data.getDate();
var hour = data.getHours();
var minutes = data.getMinutes();
var second = data.getSeconds();
function change_time(n) {
return n < 10 ? "0" + n : n ;
}
month = change_time(month);
day = change_time(day);
hour = change_time(hour);
minutes = change_time(minutes);
second = change_time(second);
Time = year + "年" + month + "月" + day + "日" + hour
+ ":" + minutes + ":" + second;
oTime.innerHTML = Time;
}
times();
setInterval(times,1000);
</script>
</body>
</html>
PS：清除定時器的時候，要給定時器起個名字
函數
有名函數
匿名函數
函數表達式
函數傳參
返回值
有名函數和匿名函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: yellowgreen;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<script>
/*
函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊
函數就是包裹在花括號中的代碼塊，前面使用了關鍵詞 function：
有名函數
有名字的函數
函數名加括號執行 / 充當事件函數執行
匿名函數
沒有名字的函數
匿名函數不能單獨出現 通常充當事件函數
*/
var oBox1 = document.getElementById("box1");
var oBox2 = document.getElementById("box2");
/*oBox1.onclick = function () {
alert("xp真漂亮");
};
oBox2.onclick = function () {
alert("xp真漂亮");
}*/
function fn() {
alert("sqx真闊愛");
}
fn();//彈出sqx真闊愛
// oBox1.onclick = fn;
// oBox2.onclick = fn;
</script>
</body>
</html>
函數定義和函數表達式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
函數表達式：
() + - ! ~ 能夠將匿名函數變爲函數表達式
特色：能夠在後面加括號當即執行
*/
// fn();
//函數定義 能夠在定義前加括號執行，也能夠在定義後加括號執行
function fn() {
alert(1);
}
//fn();
//函數表達式
// fn1();
//經過var 的函數，只能在後面運行******
var fn1 = function () {
alert(2)
};
// fn1();
+function () {
alert(3);
}();
-function () {
alert(4);
}();
!function () {
alert(5);
}();
~function () {
alert(6);
}();
(function () {
alert(7);
})();
(+function () {
alert(8);
}());
</script>
</body>
</html>
實參 形參
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
//fn(9);//執行函數時 能夠傳遞 實參(用已知的變量 / 具體的數據)
var s = 9;
// fn(s);
//形參（至關於函數局部的變量，命名規則和var相同）(定義，無中生有)
function fn(x) {
alert(x);
}
//實參和形參個數不必定非得同樣，可是不同的時候要注意一一對應的關係
sum(1,2,3,4,5,6);
function sum(x,y,z) {
// alert(x+y+z);
}
sum1(1,2,3);
function sum1(a,b,c,d) {
// var a , b, c , d;
a = a || 0;
b = b || 0;
c = c || 0;
d = d || 0;
alert(d);
alert(a+b+c+d);//NAN
}
</script>
</body>
</html>
不定參
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
sum(1,2,3,4,5,6,7,8,9);
function sum() {
console.log(arguments.length);//9
console.log(arguments[8]);//9
var x = 0;
for(var i = 0 ,len = arguments.length; i < len ; i ++ ){
x += arguments[i];
}
console.log(x);//45
}
</script>
</body>
</html>
return
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
每一個函數默認返回 return undefined
*/
function fn() {
alert(1);
return 6
}
var a = fn();
alert(a);
</script>
</body>
</html>
做用域
由於js的規則是先定義，再執行。因此，寫代碼的時候要注意一下這一點
子做用域會修改父做用域的值
做用域解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
alert(fn);
var fn = function () {
alert(1);
};
fn();
/*
1 找
fn = undefined; ===》fn = function () {
alert(1);
};
2 執行
fn = function () {
alert(1);
};
*/
</script>
</body>
</html>
做用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
javascript解析順序
1.（定義）先解析var function 參數
a.該步驟的var只定義變量，後面的=賦值不解析
b.該步驟的函數只定義函數，函數的執行不解析
c.重名的只留一個，var 和 函數重名 函數優先
2.（執行）再從上至下執行其餘代碼
做用域：
做用：讀寫
域：範圍，區域
解析：
從上至下
1 找 var 定義函數 參數
2 執行
*/
/*alert(a);
//var a;
var a = 5;
alert(a);*/
/*
1 找
a = undefined == >a = 5;
2 執行
alert(a); ==》und
a = 5;
alert(a);===>5
*/
/*alert(a);
function a() {
alert(5);
}
a();
alert(a);*/
/*
1 找
a = function a() {
alert(5);
}
2 執行
alert(a); ==》函數
a();函數調用 是新的做用域 只要是做用域 解析時就要分兩步
1 找
2 執行
alert(5); ==》5
alert(a);==》函數
*/
/*var a = 1;
function fn() {
alert(2);
var a = 5;
}
fn();
alert(a);*/
/*
1 找
a = undefined == 》 a = 1;
fn = function fn() {
alert(2);
var a = 5;
}
2 執行
a = 1;
fn();
1 找
a = undefined ==》5
2 執行
alert(2); ==》2
a = 5;
alert(a); == > 1
*/
/*var a = 1;
function fn() {
alert(2);
a = 5;
}
fn();
alert(a);*/
/*
1 找
a = und; ==》a = 1 ==》a = 5
fn = function fn() {
alert(2);
a = 5;
}
2 執行
a = 1;
fn();
1 找
2 執行
alert(2); ==》2
a = 5;此函數沒有的話 會從裏往外找 去父級做用域
alert(a); ===>5
*/
</script>
</body>
</html>
for in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
var obj = {"name": "xiaopo","age": 18, "gender": "girl"};
console.log(obj);//{"name": "xiaopo","age": 18, "gender": "girl"}
console.log(obj.length);//undefined
console.log(obj.name);//xiaopo
for(var key in obj){
console.log(key,obj[key]);
//key是{}裏的屬性名稱 obj[key] {}裏面屬性的值
//name xiaopo
//age 18
//gender girl
}
</script>
</body>
</html>
相關文章
- 1. 日期對象、Math對象、字符串對象、數組對象
- 2. JS對象：數組、日期、Math、自定義對象
- 3. JavaScript 數字相關的屬性方法/Math內置對象
- 4. JavaScript Math 對象 abs() 方法
- 5. 日期、Math、數組api及對象api
- 6. JavaScript操做BOM對象、window對象、history對象、location對象、document對象、javascript內置對象、Date對象、Math對象、定時函數
- 7. JS-日期、Math、數組、對象
- 8. JavaScript Math 對象
- 9. JavaScript--Math對象
- 10. JavaScript Math對象
- 更多相關文章...
- • SQLite 日期 & 時間 - SQLite教程
- • XSD 日期和時間數據類型 - XML Schema 教程
- • Flink 數據傳輸及反壓詳解
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 日期對象、Math對象、字符串對象、數組對象
- 2. JS對象：數組、日期、Math、自定義對象
- 3. JavaScript 數字相關的屬性方法/Math內置對象
- 4. JavaScript Math 對象 abs() 方法
- 5. 日期、Math、數組api及對象api
- 6. JavaScript操做BOM對象、window對象、history對象、location對象、document對象、javascript內置對象、Date對象、Math對象、定時函數
- 7. JS-日期、Math、數組、對象
- 8. JavaScript Math 對象
- 9. JavaScript--Math對象
- 10. JavaScript Math對象