您的位置：首页 > Web前端 > JavaScript

JavaScript 高淇讲解的代码（二）

2013-09-27 11:06 302 查看

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="测试" onclick="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="测试" onclick="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" onclick="testPerson();"/>
<br/>
<input type="button" value="测试Boy" onclick="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" onclick="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="测试确认框" onclick="testFrame();"/>
<input type="button" value="测试询问框" onclick="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" onclick="testTimeout();"/>
<input type="button" value="测试ClearTimeout" onclick="testClearTimeour();"/>
<br/>
<br/>
<input type="button" value="测试Interval" onclick="testInterval();"/>
<input type="button" value="测试ClearInterval" onclick="testClearInterval();"/>
<br/>
<br/>
<input type="button" value="测试Navigator" onclick="testNavigator();"/>
</body>
</html>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 高淇

相关文章推荐

新的分享

章节导航