Web前端——JavaScript扩展补充

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>