JavaScript练习

最新推荐文章于 2024-04-06 09:29:48 发布

zmhmz

最新推荐文章于 2024-04-06 09:29:48 发布

阅读量166

点赞数

本文链接：https://blog.csdn.net/zuebak/article/details/101562328

版权

红绿灯

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{width:250px;height:52px;padding:15px 30px;border:2px solid #ccc;border-radius:16px;margin:0 auto;}
			.box .count{width:60px;color:#666;font-size:280%;line-height:50px;padding-left:6px;margin-left:5px;border:1px solid #fff}
			.box div{margin-left:5px;float:left;width:50px;height:50px;border-radius:50px;border:1px solid #666;}
			.gray{background-color:#eee;}
			.red{background-color:red;}
			.yellow{background-color:yellow;}
			.green{background-color:#26ff00;}
		</style>
	</head>
	<body>
		<div class="box">
			<div id="red"></div>
			<div id="yellow"></div>
			<div id="green"></div>
			<div id="count" class="count"></div>
		</div>
	</body>
	<script type="text/javascript">
		      var lamp = {
		        red: {
		          obj: document.getElementById('red'),
		          timeout: 30,
		          style: ['red', 'gray', 'gray'],
		          next: 'green'
		        },
		        yellow: {
		          obj: document.getElementById('yellow'),
		          timeout: 5,
		          style: ['gray', 'yellow', 'gray'],
		          next: 'red'
		        },
		        green: {
		          obj: document.getElementById('green'),
		          timeout: 35,
		          style: ['gray', 'gray', 'green'],
		          next: 'yellow'
		        },
		        changeStyle(style) {
		          this.red.obj.className = style[0];
		          this.yellow.obj.className = style[1];
		          this.green.obj.className = style[2];
		        }
		      };
		      var count = {
		        obj: document.getElementById('count'),
		        change: function(num) {
		          this.obj.innerHTML = (num < 10) ? ('0' + num) : num;
		        }
		      };
		      var now = lamp.green;
		      var timeout = now.timeout;
		      lamp.changeStyle(now.style);
		      count.change(timeout);
		      setInterval(function() {
		        if (--timeout <= 0) {
		          now = lamp[now.next];
		          timeout = now.timeout;
		          lamp.changeStyle(now.style);
		        }
		        count.change(timeout);
		      }, 1000);
		    
	</script>
</html>

节点


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="test" ></div>
		<script>
			var test = document.getElementById('test');
			console.log(test);
			console.log(test.__proto__);
			
		</script>
		<div id="test"></div>
		<script>
			var test = document.getElementById('test');
			console.log(test.nodeName);
			console.log(test.tagName);
			console.log(document.nodeName);
			console.log(document.tagName);
		</script>
		var test= document.getElementById('test');
		 test.nodeType === Node.ELEMENT_NODE;
		 document.nodeType === Node.DOCUMENT_NODE;
	</body>
</html>

利用document对象的方法

<!DOCTYPE html>
<html>
<head>
	<title>利用document对象的方法</title>
</head>
<body>
	<div id="box">box</div>
	<div class="bar">bar</div>
	<div name="main">main</div>
	<script type="text/javascript">
		console.log(document.getElementById('box'));
		console.log(document.getElementByClassName('bar'));
		console.log(document.getElementsByTagName('div'));
		console.log(document.getElementByName('main'));
	</script>
</body>
</html>