【前端】js2
文章目錄
1.內建物件_陣列和日期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 1. 陣列物件
1. 陣列在JS中是一個類，通過構造方法建立物件
2. 陣列的四種方式
1. new Array() 無參的構造方法，建立一個長度為0的陣列
2. new Array(5) 有參的構造方法，指定陣列的長度
3. new Array(2,4,10,6,41) 有參的構造方法，指定陣列中的每個元素
4. [4,3,20,6] 使用中括號的方式建立陣列
java陣列
int[] array = new int[5]
int[] array = {1,2,3} array = new int[]{1,2,3}
js的陣列特點:
1. 陣列中的元素型別不需要一致
2. 陣列可以自動擴容(只要新增元素就會擴容, 沒有越界異常, 沒有預設值)
*/
var array = [0,1,"a"]
array[4] = 4; //擴容
document.writeln(array.length) //5
document.writeln("<br>")
for(var i=0; i < array.length; i++){
document.writeln(array[i]) //0 1 a undefined 4
}
</script>
<!--111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
document.writeln("<hr>")
/*
* 2. 日期物件
1. 作用：Date 物件用於處理日期和時間。
2. 建立 Date 物件的語法: var myDate=new Date()
1. Date 物件會自動把當前日期和時間儲存為其初始值。
3. 日期物件的方法
1. getFullYear() 從 Date 物件以四位數字返回年份。
2. getMonth() 從 Date 物件返回月份 (0 ~ 11)。
3. getDate() 從 Date 物件返回一個月中的某一天 (1 ~ 31)。
4. getTime() 返回 1970 年 1 月 1 日（Unix）至今的毫秒數。類似於Java中的System.currentTimeMillis()
5. toLocaleString() 根據本地時間格式，把 Date 物件轉換為字串。
*/
var myDate = new Date()
document.writeln(myDate) // 系統當前時間
document.writeln("<br>")
document.writeln(myDate.getMonth()) //10月列印出：9
document.writeln("<br>")
document.writeln(myDate.getTime()) //1970年到現在 時間毫秒值
document.writeln("<br>")
document.writeln(myDate.toLocaleString())
</script>
</head>
<body>
</body>
</html>
2.內建物件_字串解析和url編碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* parseInt() : 從左開始讀取到第一個非數字的內容,停止解析, 返回整數
* parseFloat () : 從左開始讀取到第一個非數字的內容,停止解析, 返回整數+小數
* isNaN : 如果是NaN(not a number),返回true
*/
var str = "1230.01 px"
// var n = parseInt(str)
var n = parseFloat(str)
document.writeln(n) //1230.01
var a
var b = 1
var c = a + b
document.writeln(isNaN(c)) //true
document.writeln("<br>")
</script>
<!--1111111111111111111111111111111111111111111111111111111111111111111-->
<script>
/*
* url(uri)編碼 : url遠端 < uri遠端和本地
* word=%E6%9D%AF%E5%AD%90
*
* 前端->伺服器(請求): 提交的資料 要經過 url編碼
* 編碼: 字元 -> 位元組
* 杯子 -> %E6%9D%AF%E5%AD%90 （瀏覽器渲染的url中還是杯子）
*
* 伺服器接收到 : url解碼
* %E6%9D%AF%E5%AD%90 -> 杯子
* encodeUri : 編碼
* decodeUri : 解碼
*/
var word = '杯子'
var result = encodeURI(word)
document.writeln(result) //%E6%9D%AF%E5%AD%90
var re = decodeURI(result)
document.writeln(re) //杯子
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function method01() {
/*
* 1. 獲取span的字型大小
* 2. 字型大小 * 2
* 3. 重新賦值給span標籤
*/
var span = document.getElementById("myid");
console.log(span.style.fontSize) // 20px
var newSize = parseInt(span.style.fontSize) * 2
span.style.fontSize = newSize + "px"
}
</script>
</head>
<body>
<input type="button" value="字型放大兩倍" onclick="method01()"> <br><br>
<span style="font-size: 20px" id="myid">字型</span>
</body>
</html>
3.Bom程式設計_window物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* Bom : browser object model 瀏覽器物件模型
* 1. window
* 2. history
* 3. location
*
* window : 視窗 (執行環境)
* window物件在編寫時可以被省略!
* 三種提示框
* 1. alert(msg) : 警告框, 只有確認按鈕
* 2. var result = confirm(msg) : 確認框
* a. 確定 : 返回true
* b. 取消 : 返回false
* 3. var result = prompt(msg,default)
* a. 確定: 返回輸入的內容
* b. 取消: 返回null
* 兩種計時器
* 1. 無限迴圈
* 返回值 setInterval(method,time,param)
* 每隔time ms 執行一次method(呼叫method,傳入的param)
* 返回值: 就是當前設定的計時器
* 2. 單次使用 setTimeout
* 清除計時器
* clearInterval(計時器物件)
* clearTimeout
*/
// window.alert("警方提示: 今晚會下雨~~")
// alert("警方提示: 今晚會下雨2~~")
// var result = confirm("你滿18週歲了嗎?");
// document.writeln(result)
// var content = prompt("安全問題: 你的女朋友是誰?","高圓圓");
// document.writeln(content)
</script>
<script>
var method01 = function (a) {
// document.writeln(a)
console.log(a) //如上是網頁輸出
}
var timer = setInterval(method01,1000,"呼")
// setInterval("method01('嘻')",1000)
// setTimeout(method01,3000,'呵呵')
function method02() {
clearInterval(timer)
}
</script>
</head>
<body>
<input type="button" value="按鈕" onclick="method02()">
</body>
</html>
4.案例_會動的時鐘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
前端套路
* 1. 先實現 頁面初始化效果 (主要: html + css)
* 2. 哪些事件驅動什麼邏輯 (js)
*
* 實現: 時鐘
* 1. 先實現 頁面初始化效果
* 坑: 頁面剛重新整理的時候,設定系統當前時間
* 1. 先獲取系統事件
* 2. 然後設定到div標籤內
* notice: a. 頁面載入事件 b.innerText (開閉標籤之間的內容)
*
* 2. 哪些事件驅動什麼邏輯 (js)
* 1. 開始按鈕被點選: 時間動起來
* 方案A: 每隔1秒,時間+1 (時間進位制問題)
* 方案B: 每隔1秒,獲取系統當前時間(不自己寫)
*
* 2. 暫停按鈕被點選: 時間不動了
* 清除計時器
*
* 坑: 連續點選開始按鈕, 那麼就停不掉了!!!
* 原因: 計時器在一個網頁中可以設定多個
* timer = 0x0001
* timer = 0x0002
* 解決:
* 1. 方案A: 點開始, 先清除timer
* 2. 方案B:
* 當開始按鈕點選的時候,開始按鈕 禁用!
* 當暫停按鈕點選的時候,開始按鈕 啟用!
*/
</script>
<!--111111111111111111111111111111111111111111111111111111111111111111-->
<script>
window.onload = function (ev) {
method01()
}
function method01() {
var myDate = new Date();
var time = myDate.toLocaleString();
console.log(time)
//尋找id=mydiv的標籤(事先載入好 : 頁面載入事件)
var div = document.getElementById("mydiv");
div.innerText = time
}
//注意: 命名函式不要寫在另外一個函式內部
var timer;
function start() {
// clearInterval(timer)
timer = setInterval(method01,1000)
var startBtn = document.getElementById("start");
startBtn.disabled = true //禁用
}
function pause() {
clearInterval(timer)
var startBtn = document.getElementById("start");
startBtn.disabled = false //啟用
}
</script>
</head>
<body>
<div id="mydiv" style="color: green;font-size: 30px">
系統當前時間
</div>
<input type="button" value="開始" onclick="start()" id="start">
<input type="button" value="暫停" onclick="pause()">
</body>
</html>
5.Bom程式設計_location物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* location : 位址列
* 1. 重要屬性 href (位址列中的內容,如果被修改,會自動跳轉)
* 2. 方法 reload() : 重新載入
*/
function method01() {
location.href = "http://www.baidu.com"
}
function method02() {
location.reload()
}
</script>
</head>
<body>
<input type="button" value="跳轉到百度" onclick="method01()"> <br>
<a href="http://www.baidu.com">超連結:跳轉</a>
<hr>
<input type="button" value="重新載入" onclick="method02()">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 事件: 頁面載入
* 邏輯: 倒數計時, 時間=0, 跳轉
*/
var i = 5;
function method01() {
i--;
var span = document.getElementById("myspan");
span.innerText = i + "秒後回到主頁"
if(i == 0){
location.href = "http://www.baidu.com"
}
}
window.onload = function (ev) {
setInterval(method01,1000)
}
</script>
</head>
<body>
付款成功!!! <br>
<span id="myspan">5秒後回到主頁</span> <a href="http://www.baidu.com">如果沒有自動跳轉,請點選這個</a>
</body>
</html>
6.Bom程式設計_history物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* history: 歷史記錄
* A ->跳轉 B (記錄: 上一步)
* B ->回退 A (記錄: 下一步)
* 函式:
* forward()
* back()
* go(index)
*/
function forward() {
// history.forward()
history.go(1)
}
</script>
</head>
<body>
第一頁面 <br>
<a href="06_history第二頁面.html">點選跳轉到二</a><br>
<input type="button" value="前進" onclick="forward()">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function back() {
// history.back()
history.go(-1)
}
</script>
</head>
<body>
第二頁面 <br>
<input type="button" value="後退" onclick="back()">
</body>
</html>
相關文章
- 前端前端
- 前端科普系列（1）：前端簡史前端
- 不懂 Nginx 的前端不是好前端Nginx前端
- 前端增長-重新定義大前端前端
- 前端效能優化 —— 前端效能分析前端優化
- 前端 101：給不瞭解前端的同學講前端前端
- 前端資源分享-只為更好前端前端
- 學前端？先了解前端發展史前端
- 前端專案docker：前端docker入門前端Docker
- 前端圖床搭建實踐（前端篇）前端圖床
- 前端招聘與前端賣身的困境前端
- 前端基礎之前端知識引入前端
- 前端題前端
- 前端框架前端框架
- 前端_CSS前端CSS
- 前端_HTML前端HTML
- web 前端Web前端
- 前端思考前端
- 前端路由前端路由
- 前端大概前端
- 前端RenderTree前端
- 前端:HTML前端HTML
- 前端安全前端
- 前端---HTML前端HTML
- 前端----CSS前端CSS
- 前端-2前端
- 前端庫前端
- 阿里前端談：前端發展史，引領新技術、前端價值阿里前端
- 前端進階（1）Web前端效能優化前端Web優化
- 前端面試查漏補缺--(八) 前端加密前端面試加密
- 前端技術演進（二）：前端與協議前端協議
- 一個無名前端的10年前端路前端
- 前端工程師必備：前端的模組化前端工程師
- Web前端飽和了？還能學Web前端嗎？Web前端
- 前端監控和前端埋點方案設計前端
- Web前端如何學？Web前端學習方法分享Web前端
- 前端基礎（四）：前端國際規範收集前端
- 網易考拉前端團隊 - 大量招前端啦！前端