JavaScript 高淇讲解的代码（二）

最新推荐文章于 2024-11-08 16:09:18 发布

Cary_诚

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量1.6k

点赞数

分类专栏： JavaScript 文章标签： javascript 高淇

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了HTML中操作CSS属性的基本方法，以及如何通过事件机制实现动态改变元素样式。此外，还涉及了JavaScript中事件对象的使用，以及类的定义方式、原型继承、JSON对象的应用。同时，展示了如何利用JavaScript实现基本的输入按钮与事件响应。

摘要由CSDN通过智能技术生成

4_事件机制_event对象_操作CSS属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<style>
			#div1 {
				background-color: red;
				position: absolute;
				top: 100px;
				left: 100px;
				width: 10px;
				height: 10px;
			}
		</style>
		<script>
			var divPos = 100;

			function test() {
				var a = document.getElementById("div1");
				a.style.backgroundColor = "blue";
				divPos += 10;
				a.style.left = divPos + "px";
			}
		</script>
	</head>
	<body>
		<div id ="div1"></div>
		<input type="button" value="测试" οnclick="test();"/>
	</body>
</html>

<!-- 4_操作CSS属性 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<script>
			function test (event) {
				var evt = window.event || event;				
				/*
				 * ie:window.event
				 * fire fox:参数event
				 */
				var src = evt.srcElement || evt.target;
				var code = evt.keyCode || evt.charCode;
				alert(code);
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试" οnclick="test(event);"/>
	</body>
</html>

<!-- 4_事件机制_event对象 -->

5_常见内置对象_类的定义方式_prototype继承方式_JSON

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<script>
			// 类
			function Person(name, age) {
				this.name = name;
				this.age = age;

				this.study = function() {
					console.log("Your name is: " + this.name + ", Your age is: " + this.age);
				}
			}

			function testPerson() {
				var p = new Person("cary", 25);
				p.study();
			}

			// 继承
			function Boy() {
			}

			Boy.prototype = new Person("李四", 12);

			Boy.prototype.runner = function() {
				console.log("Boy run!");
			}
			function testBoy() {
				var b = new Boy();
				b.study();
				b.runner();
			}

		</script>
	</head>
	<body>
		<input type="button" value="测试Person" οnclick="testPerson();"/>
		<br/>
		<input type="button" value="测试Boy" οnclick="testBoy();"/>
		<br/>
	</body>
</html>

<!-- 5_类的定义方式_prototype继承方式 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<script>
			function testJSON() {
				var a = {
					name : "Yin",
					age : 25,
					study : function() {
						console.log("Learning...");
					}
				};
				//对象直接量
				var b = {
					name : "Cary",
					age : 21
				};

				var fs = [a, b];

				var c = {
					friends : fs
				};

				console.log(c.friends[0].name + " , " + c.friends[1].name);
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试JSON" οnclick="testJSON();"/>
		<br/>
	</body>
</html>

<!-- 5_JavaScript object native js原生对象 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<script>
			function testFrame() {
				var isLogin = confirm("你确认登录吗？");
				if (isLogin) {
					console.log("yes");
				} else {
					console.log("no");
				}
			}
			
			function testFrame1(){
				var name = prompt("请输入名字");
				console.log("Your name is : " + name);
			}
			
		</script>
	</head>
	<body>
		<input type="button" value="测试确认框" οnclick="testFrame();"/>
		<input type="button" value="测试询问框" οnclick="testFrame1();"/>
	</body>
</html>

<!-- 5_常见内置对象 -->

6_window对象_定时控制_navigator_history_location对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
	</head>
	<script>
		var t;
		var v;

		function aa(a, b) {
			console.log("a + b = " + (a + b));
		}

		function testTimeout() {
			var c = 1;
			var d = 2;
			t = window.setTimeout(function() {
				aa(c, d);
			}, 3000);
		}

		function testClearTimeour() {
			window.clearTimeout(t);
		}

		function testInterval() {
			var c = 1;
			var d = 2;
			v = window.setInterval(function() {
				aa(c, d);
			}, 500);
		}

		function testClearInterval() {
			window.clearInterval(v);
		}

		function testNavigator() {
			console.log("userAgent : " + navigator.userAgent);
			console.log("Is firefox : " + navigator.userAgent.toLowerCase().indexOf("firefox"));
		}
	</script>
	<body>
		<input type="button" value="测试Timeout" οnclick="testTimeout();"/>
		<input type="button" value="测试ClearTimeout" οnclick="testClearTimeour();"/>
		<br/>
		<br/>
		<input type="button" value="测试Interval" οnclick="testInterval();"/>
		<input type="button" value="测试ClearInterval" οnclick="testClearInterval();"/>
		<br/>
		<br/>
		<input type="button" value="测试Navigator" οnclick="testNavigator();"/>
	</body>
</html>

<!-- 6_window对象_定时控制 -->