JS補充 document也是windows的一個子對象 a標簽點擊事件 要想設置點擊a標簽，執行某種方法，推薦在a標簽的herf屬性使用JavaScript偽協議，實現點擊之後執行的js方法，而不是設置click 例如： windows對象對話框 windows自帶的幾個彈出對話框方法 可輸入內容 ...
JS補充
document也是windows的一個子對象
a標簽點擊事件
要想設置點擊a標簽，執行某種方法，推薦在a標簽的herf屬性使用JavaScript偽協議，實現點擊之後執行的js方法，而不是設置click
例如：
alertwin()是一個方法
<a href="javascript:alertwin()">hello</a>windows對象對話框
windows自帶的幾個彈出對話框方法
- 可輸入內容的對話框 alert(message)
- 只含確定按鈕的對話框 prompt(message) 返回輸入string
- 含確定和取消的對話框 confirm(message) 返回一個Boolean
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>對話框</title>
<script type="text/javascript">
function alertwin() {
alert('信息');
}
function promptWin() {
//prompt()彈出一個輸入對話框
//如果輸入,prompt()方法就會返回用戶輸入信息
var inputMsg = prompt('請輸入名字');
console.log(inputMsg);
}
function confirmMsg(){
//confirm()返回一個boolean
var flag = confirm("確定刪除？");
console.log(flag);
}
</script>
</head>
<body>
<button type="button" onclick="alertwin()">對話框</button>
<button type="button" onclick="promptWin()">輸入對話框</button>
<button type="button" onclick="confirmMsg()">確認對話框</button>
<br /><br />
</body>
</html>
location對象
- location.href = ''; 會使瀏覽器留下歷史記錄
- location.replace(); 瀏覽器不會留下歷史記錄
- location.reload(); 刷新效果
編碼和解碼URI
function encode_decode() {
var uri = '19_encodeURI_decodeURI.html?name1=老王&name2=如花&key=jack marry john';
//編碼
var encodeURI1 = encodeURI(uri);
//結果為name1=%E8%80%81%E7%8E%8B&name2=%E5%A6%82%E8%8A%B1&key=jack%20marry%20john
console.log(encodeURI1);
//解碼
var decodeURI1 = decodeURI(encodeURI1);
console.log(encodeURI1);
}Json工具類
- stringify json數據轉為string
- parse 把string類型的json數據轉為一個object
let json = {empno: 1000, ename: "scott", job: "CLERK"};
var stringify = JSON.stringify(json);
var otherJson = JSON.parse(stringify);
//通過"."來獲取內容
console.log(otherJson.empno, otherJson.ename, otherJson.job);模擬進度條
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模擬進度條</title>
<style>
.processbar{
overflow: hidden;/*超出的自動隱藏*/
width: 800px;
height: 20px;
border: 1px solid skyblue;
border-radius: 5px;
}
.block{
float: left;/*從左到右排列*/
height: 20px;
width: 0px;
background-color: skyblue;
}
</style>
<script>
var length=0;//進度條的長度
function startDownload(){
const processbar =document.querySelector(".processbar");
let width = Math.random()*30;//隨機獲取寬度
//創建一個div元素
let block = document.createElement("div");
length += width;
//當前的進度長度是否大於800
if(length>800){
//獲取最後剩餘的寬度
width =800-(length-width);
block.classList="block";
block.style.width = width+"px";
processbar.appendChild(block);
return;//停止
}else{
block.style.width = width+"px";
block.classList="block";//設置類樣式為block
processbar.appendChild(block);//添加元素
setTimeout(startDownload,100);//每400毫秒執行一次startDownload方法
}
}
</script>
</head>
<body>
<button type="button" onclick="startDownload()">開始下載</button>
<br /><br />
<div class="processbar">
</div>
</body>
</html>
