378day（js时间线，二级菜单练习）_js 流程图实现二级时间线-CSDN博客

本文链接：https://blog.csdn.net/orangecloudy/article/details/83066670

《2018年10月15日》【连续378天】

标题：js时间线，二级菜单练习；

内容：

1、创建Document对象，开始解析Web页面；此阶段document.readyState = 'loading';

2、遇到link外部css，创建创建线程加载，并继续解析文档；

3、遇到script外部js，并且没有设置async、defer，浏览器加载并阻塞，等待js加载完成并执行该脚本，继续解析文档；

4、遇到script外部js，并且设置有async、defer，浏览器创建线程，并继续解析文档；

5、遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档；

6、当文档解析完成，document.readyState = 'interactive';

7、文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意defer与async的区别，可见另一篇博客）；

8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段；

9、当所有async的脚本加载完成并执行后，img等加载完成后，document.readyStste = 'complete',window对象触发load事件；

10、从此，以异步响应方式处理用户输入，网络事件等；

    <input type="password" name="password">
    <input type="button" id="but"  value="确定">
	<script type="text/javascript">
		var input = document.getElementsByTagName('input')[0];
		var but = document.getElementById('but');
		but.addEventListener('click',function(){
			alert(input.value);
		},false);
    </script>

二级菜单：

写的太繁琐了。。。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.box{
			float: left;
			width: 100px;
		}
		.big{
			float: left;
			height: 120px;
			width: 50px;
			background-color: orange;
		}
		.sma{
			float: left;
			height: 120px;
			width: 50px;
			background-color: red;
			display: none;
		}

	</style>
</head>
<body>
	<div class="box">
		<div class="big">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		</div>
		<div class="sma" id="0">12</div>
		<div class="sma" id="1">23</div>
		<div class="sma" id="2">34</div>
		<div class="sma" id="3">45</div>
		<div class="sma" id="4">56</div>
	</div>
	<script type="text/javascript">
		var li = document.getElementsByTagName('li');
		for(var i = 0; i < li.length; i++){
			(function (i) {
				li[i].onmouseover =function(){
					var sma = document.getElementById(i+"");
					console.log(sma);
					if(sma){
						sma.style.display = "block";
					}
				}
				li[i].onmouseout = function(){
					var sma = document.getElementById(i+"");
					console.log(sma);
					if(sma){
						sma.style.display = "none";
					}
				}
			}(i));
		}
		
	</script>
</body>
</html>