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() {
var inputMsg = prompt('请输入名字');
console.log(inputMsg);
}
function confirmMsg(){
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=老王&name2=如花&key=jack marry john
console.log(encodeURI1);
//解码
var decodeURI1 = decodeURI(encodeURI1);
console.log(encodeURI1);
}
Json工具类
stringify json数据转为stringparse 把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;
let block = document.createElement("div");
length += width;
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";
processbar.appendChild(block);
setTimeout(startDownload,100);
}
}
</script>
</head>
<body>
<button type="button" onclick="startDownload()">开始下载
</button>
<br /><br />
<div class="processbar">
</div>
</body>
</html>
转载于:https://www.cnblogs.com/chaoyang123/p/11549749.html
