javascript
Posted iamironman
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript相关的知识，希望对你有一定的参考价值。
## 一、javascript技术
html：定义网页的结构
CSS：美化网页
JavaScript：实现用户交互；
1.1.JavaScript介绍
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。
1.1.1JavaScript与Java的区别
?JS是Netscape公司的产品，Java是Sun公司的产品
?JS是基于对象，Java是面向对象。
?JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
?JS是弱类型，Java是强类型。
1.1.2 JavaScript特点
?安全性较高
?跨平台，兼容性好
1.2 JavaScript的组成
JavaScript主要由三部分组成：ECMAScript、DOM、BOM。
ECMAScript：描述了JavaScript的基本语法（所有浏览器都支持）；
DOM：文档对象模型。提供了处理网页内容的方法；
BOM：浏览器对象模型。提供了与浏览器进行交互的方法；
1.3 如何编写JavaScript代码
方式一：在HTML页面中编写JavaScript代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//往网页输出内容
document.write(‘这是我们的第一个js代码.‘);
</script>
</head>
<body>
</body>
</html>
script标签可以放在head标签中，也可以放在body标签中。而且，在一个HTML页面中，可以存在多个script标签。
方式二：引入外部的JS文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<script>
//往网页输出内容
document.write(‘这是我们的第一个js代码.‘);
</script>-->
<!-- 引入外部js文件 -->
<script type="text/javascript" src="js/first.js"></script>
</head>
<body>
</body>
</html>
注意事项：
1）在js文件中编写js代码，不需要写<script>标签；
2）开始的script标签和结束标签不能够写在一起；
3）如果在HTML页面中引入了外部的js文件，那么该script标签就不能再编写js代码，而且应该在另外一个script标签中编写；
方式三：在HTML元素中编写js代码
## 二、ECMAScript
2.1注释
HTML: <!—注释 -->
CSS: /*注释*/
JavaScript：//单行注释 或 /*多行注释*/
2.2 变量
javascript是一门弱类型的语言。所以，在javascript中声明变量不需要指定类型。
?语法格式：
var 变量名 [= 初始值];
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var a = 10; //不能够以数字开头
document.write(‘a = ‘ + a);
//typeof函数: 查看变量的类型
//document.write(typeof(a));
</script>
</head>
<body>
</body>
</html>
注意事项：
1）var关键字可以不写。变量的类型是根据它的值来确定的。
2）变量名必须以字母或下划线开头；
3）js的变量是区分大小写的；
4）js变量必须要先声明后使用；
5）js变量的类型会随着它的值的改变而发生变化；
?js的数据类型：
number：数值型，包含小数、整数、NaN(非数字)
string：字符串类型；
boolean：布尔类型，它的值可以是true或false；
object：对象类型；
undefined：该变量没有定义或初始化的时候，那么就是undefined
2.3 运算符
?算术运算符：
注意：前++和前--是先对变量执行++或--操作，然后再对结果进行运算。
后++和后--是先对变量执行运算，运算后再对变量执行++或--操作。
补充：+除了可以作为算术运算符以外，还可以字符串连接符。
?比较运算符：
比较运算符的结果要么是true，要么是false。如果成立为true，否则为false。
===：要求比较的两个变量，它们的值和类型必须要同时相同。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var a = 10;
var b = ‘10‘;
document.write(‘a == b ?‘ + (a == b));
document.write(‘<br/>‘); //换行
document.write(‘a === b?‘ + (a === b));
</script>
</head>
<body>
</body>
</html>
?逻辑运算符：用来连接多个条件。
&&逻辑非：只有当多个条件同时成立才返回true，否则返回false；
||逻辑或：只有一个条件成立就返回true，否则返回false；
！逻辑非：如果条件为true，那么就返回false，否则返回true；
?赋值运算符
?三目运算符：
条件表达式 ? ‘内容1’ : ‘内容2’;
说明：如果条件成立，就返回内容1，否则返回内容2。
2.4 流程控制
2.4.1 条件判断
?语法格式：
if (条件表达式) {
} else if (条件表达式) {
} …
else {
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var score = 50;
if (score >= 90) {
document.write(‘优秀‘);
} else if (score >= 75) {
document.write(‘良好‘);
} else if (score >= 60) {
document.write(‘及格‘);
} else {
document.write(‘不及格‘);
}
</script>
</head>
<body>
</body>
</html>
2.4.2 条件选择
?语法格式：
switch (变量) {
case 值1:
…
break; //退出switch
case 值2:
…
break;
..
default: //如果上面case条件都不满足，就执行default后面的js代码。
…
}
var fruit = ‘orange‘;
switch (fruit) {
case ‘apple‘:
document.write(‘苹果‘);
break;
case ‘banana‘:
document.write(‘香蕉‘);
break;
case ‘orange‘:
document.write(‘橘子‘);
break;
default:
document.write(‘水果‘);
}
2.4.3 循环语句
?while循环：先判断条件是否成立。如果条件成立就重复执行大括号中的js代码。直到条件不成立为止。
while (条件) {
….
}
需求：输出1~10的总数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var num = 1;
var total = 0;
while (num <= 10) {
total += num;
num++;
}
document.write(‘结果：‘ + total);
</script>
</head>
<body>
</body>
</html>
?do..while循环：先执行大括号中的js代码，然后再判断条件是否成立。如果条件成立就继续执行大括号中的js代码。直到条件不成立为止。
do {
} while (条件);
需求：统计1~10的奇数的总和。
//统计1~10之间奇数的总和
var num = 1;
var total = 0;
do {
if (num % 2 == 1) {
total += num;
}
num++;
} while (num <= 10);
document.write(‘结果：‘ + total);
?for循环：先执行初始化语句，再判断条件是否成立。如果条件成立，就执行大括号中的js代码。执行完js代码后，再执行循环后的语句。接着，再判断条件是否成立，如果成立就继续执行大括号中的js代码。直到条件表达式不成立为止。
for ([初始化语句]; [初始化语句]; [初始化语句]) {
}
注意：初始化语句只会执行一次。如果没有变量需要初始化，初始化语句可以没有。但是，初始化语句后面的分号一定要有。
需求：实现1~10之间偶数的相加。
var total = 0;
for (var i = 1; i <= 10; i++) {
if (i % 2 == 0) {
total += i;
}
}
document.write(‘结果：‘ + total);
案例：使用循环在页面上输出以下图形
功能分析：
第一行：1个星号，5个空格
第二行：3个星号，4个空格
第三行：5个星号，3个空格
第四行：7个星号，2个空格
第五行：9个星号，1个空格
第六行：11个星号，0个空格
星号的数量 = 行号 * 2 - 1
空格的数量 = 6 - 行号
实现思路：
1）循环输出每一行；
2）循环每一行的时候，输出空格和星号；
三、函数
作用：1）实现js代码的重用；2）创建对象；
方式一：使用function关键字定义函数
?语法格式：
function 函数名(参数列表) {
函数体…
}
需求：定义一个函数，根据月份输出该月份的天数。
<script>
//定义函数
function getDays(month) {
//输出月份的天数
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8
|| month == 10 || month == 12) {
document.write("该月份的天数有31天！")
} else if (month == 4 || month == 6 || month == 9 || month == 1) {
document.write("该月份的天数有30天！");
} else if (month == 2) {
document.write("该月份的天数有28天！");
}
}
//调用函数
getDays(10);
</script>
?注意事项：
1）定义函数的时候不需要定义它的返回值类型。如果函数需要返回结果，那么可以使用return命令直接返回即可；
2）函数的形参定义不需要使用var；
3）js函数是没有重载（可以存在同名的函数），后面定义的函数会覆盖前面定义的函数。所以，在一个js文件中，不要出现重复的函数定义。
方式二：定义函数变量
?语法格式：
var 变量名 = function(参数列表) {
}
//定义函数变量
var getDays = function(month) {
//输出月份的天数
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8
|| month == 10 || month == 12) {
return 31;
} else if (month == 4 || month == 6 || month == 9 || month == 1) {
return 30;
} else if (month == 2) {
return 28;
}
return -1;
}
补充：全局变量和局部变量的区别？
全局变量：在函数外部定义的变量。可以被该页面的所有函数引用。
局部变量：在函数内部定义的变量。只能够在当前函数中使用。注意：在函数中定义局部变量必须要加上var。如果没有加var，那么浏览器就会在全局中定义该变量。
四、内置对象
4.1 String对象
?创建字符串的方式：
方式一：var 变量名 = ‘内容’;
方式二：var 变量名 = new String(‘内容’);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var s1 = "java"; //String类型
var s2 = new String("java"); //Object类型
var s3 = new String("java");
document.write("是同一个对象吗？" + (s1 == s2) + "<br/>");
document.write(‘s1的类型：‘ + typeof(s1) + ‘<br/>‘);
document.write(‘s2的类型：‘ + typeof(s2) + ‘<br/>‘);
document.write("是同一个对象吗？" + (s1 === s2) + "<br/>");
document.write("是同一个对象吗？" + (s2 == s3) + "<br/>");
</script>
</head>
<body>
</body>
</html>
?方式一和方式二的区别：
1）类型上的区别：方式一创建的字符串类型是String类，而方式二创建的字符串类型是Object类型；
2）处理上的区别：方式一创建的字符串不能够添加额外的属性和方法，而方式创建的字符串可以添加额外的属性和方法；
4.1.1 String对象的常用方法
字符串函数 功能
fontcolor(colorval) 构建一个指定颜色值的font标签，然后把字符串的内容包含起来
concat() 拼接字符串
charAt() 根据索引值获取单个字符
charCodeAt() 返回指定索引值字符的unicode编码
indexOf() 返回字符串中指定内容的开始位置
lastIndexOf() 返回字符串中指定内容最后出现的位置
substring(start, end) 返回字符串中指定开始和结束位置的内容，不包含end位置的字符
substr(start, length) 返回字符串中从指定位置开始的指定长度的内容
valueof() Object对象中的一个方法。该方法可以根据不同的对象返回不同的内容
案例：定义一个函数，实现字符串的反转功能
4.2 Number对象
Number代表数值数据类型，以及提供数值常量的对象。
?定义一个数值变量的方式：
var 变量名 = 数值;
var 变量名 = new Number(数值);
?常用方法：
toString(n)：可以把一个数值换成指定进制的字符串。
4.3 Math对象
Math对象是一个数学的工具对象。它提供了一些用来操作数值的方法。例如：
abs() 求绝对值
ceil() 获取大于指定数值的最小整数，向上取整。
floor() 获取小于指定数值的最大整数
max() 求两个数的最大值
min() 求两个数的最小值
random() 获取0~1之间的随机数，但是不包括1
round() 对指定的值进行四舍五入运算
toFixed 返回指定位数小数的字符串形式
案例：在网页上生成一个四位数的验证码
4.4 Date对象
Date对象代表一个日期和时间。
?创建Date对象：
?常用方法：
getTime() 获取Date对象的毫秒数
getFullYear() 获取日期的年份
getMonth() 获取日期的月份，从0开始。
getDate() 获取日期的日
getHours() 获取日期的小时
getMinutes() 获取日期的分钟
getSeconds() 获取日期的秒
4.5 Array对象
Array代表一个数组，数组就是一个用来存储数据的容器。
?创建数组的方式：
?常用方法：
concat() 把多个元素或数组拼接成一个新的数组
join() 使用指定符号把数组的元素拼接成一个字符串并返回该字符串
pop() 删除并返回数组的最后一个元素
push() 往数组中添加一个元素，并返回数组的长度
reverse() 反转数组元素
slice() 返回指定开始和结束位置元素所组成的新数组
splice() 从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素
sort() 对数组进行排序
4.6 自定义对象
方式一：通过函数创建对象
var 对象名 = new 函数名(参数列表);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*自定义对象
function person() {} //类似java的构造函数
var p = new person();
p.name = ‘铁蛋‘; //成员属性
p.age = 18;
p.say = function() { //成员方法
//this代表say方法的调用者对象
alert(‘我的名字是‘ + this.name); //弹出一个对话框
};*/
function person(name, age) {
this.name = name; //指定成员属性
this.age = age;
this.say = function() {
alert(‘我的名字是‘ + this.name); //弹出一个对话框
}
}
//创建person对象
var p = new person(‘小宝‘, 20);
document.write(‘姓名：‘ + p.name + ‘，年龄：‘ + p.age + ‘<br/>‘);
p.say(); //调用成员方法
</script>
</head>
<body>
</body>
</html>
方式二：通过object创建对象
var 变量名 = new object();
//通过Object创建对象
var p = new Object();
p.name = ‘大宝‘;
p.age = 50;
p.say = function() {
alert(‘我的名字是：‘ + this.name);
}
document.write(‘姓名：‘ + p.name + ‘，年龄：‘ + p.age + ‘<br/>‘);
p.say(); //调用成员方法
方式三：通过JSON语法创建对象
?语法格式：
var 变量名 = {
键: 值,
键: 值,
…
};
//使用json语法创建对象
var p = {
name: ‘张三‘,
age: 20,
say: function() {
alert(‘我的名字是：‘ + this.name);
}
};
document.write(‘姓名：‘ + p.name + ‘，年龄：‘ + p.age + ‘<br/>‘);
p.say(); //调用成员方法
案例：创建数组工具
要求：创建一个对象包含以下两个方法，并实现其功能。
?toString(arr)：把数组转换成字符串，并返回字符串；
?seach(arr, target)：查询数组的某个元素，返回该元素在数组中的坐标。如果没有该元素，就返回-1。
今天学习内容
1.了解JavaScript的作用
2.掌握JavaScript的基本语法：定义变量、运算符、流程控制、函数定义
3.了解内置对象的使用，并能够通过JavaScript文档查找到对象的具体用法
4.理解自定义对象的使用
1.1 正则表达式
正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。
1.1.1 创建正则表达式对象
?创建正则表达式：
1）/正则表达式/[模式]
2）new RegExp(“正则表达式”)
其中，模式分为g模式和i模式。如果设置了g模式后，当查找到符合正则表达式的内容，那么下一次就不会再重新从字符串开始位置重新查找，而是从上一次匹配的字符串的后面继续查找。如果指定了i模式，那么将忽略大小写；
注意：1）使用new方式创建正则表达式对象，那么正则表达式不需要写反斜杠/；2）正则对象的参数要使用双引号引起来；
1.1.2 正则表达式的用法
1. 匹配内容
正则表达式对象提供了test()方法，该方法用于判断字符串是否匹配正则表达式。如果匹配就返回true，否则返回false。例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var str = "13666668888";
// 创建正则表达式对象
var regex = /^1[358]d{9}$/;
//匹配
if (regex.test(str)) {
alert("这是一个合法的手机号码！");
} else {
alert("非法的手机号码！");
}
</script>
</head>
<body>
</body>
</html>
2. 查找内容
正则表达式提供了exec()方法。该方法用于在字符串里面查找并返回符合正则表达式的内容。例如：
3. 替换内容
String对象提供了替换文本的replace方法。该方法的第一个参数是一个正则表达式对象，第二个参数是要替换的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var content = "我不吃鸡，我不吃鸡，我不吃鸡";
content = content.replace(/不吃/g, "吃");
alert(content);
</script>
</head>
<body>
</body>
</html>
1.2 arguments变量
每一个函数的内部都隐式地维护了一个arguments数组。当调用函数的时候，如果函数需要传入参数，那么HTML解析器首先把这些参数保存在arguments数组中，然后再由arguments来给参数分配参数的值。如果要获取传入参数的值，那么就可以在函数中直接访问arguments来获取。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//需求：定义一个函数，该函数要实现任意参数的相加。
/*function add(arr) {
var result = 0;
for (var i in arr) {
result += arr[i];
}
return result;
}
var arr = [10, 20, 33];
document.write(‘相加的结果：‘ + add(arr) + ‘<br/>‘);*/
function add() {
var result = 0;
for (var i in arguments) {
result += arguments[i];
}
return result;
}
document.write(add(1,2) + ‘<br/>‘);
document.write(add(1,2,3) + ‘<br/>‘);
document.write(add(1,2,3,4) + ‘<br/>‘);
</script>
</head>
<body>
</body>
</html>
其中arguments就是一个数组对象。所以，操作arguments与操作数组的方式相同。
1.3 JavaScript事件
1.3.1 事件的四大要素
事件源：就是事件发生的地方。例如：一个按钮或HTML元素等等。
事件类型：鼠标事件、焦点事件、键盘事件等等。
事件监听器：用来监听事件的发生。例如：onclick、onmouseover等等；
相应动作：就是一些js代码。
1.3.2 绑定事件
第一步：在HTML元素上指定onXxx属性
第二步：添加响应的js代码
注意：在一个HTML元素上可以同时绑定多个事件。但是注意有些事件是不允许同时存在的，例如：onclick和ondblclick。
1.3.3 常见的事件属性
?鼠标事件：
onclick：鼠标单击的事件；
ondblclick：鼠标双击事件。注意：单击和双击事件不能够同时使用。
onmouseover：鼠标移入事件；
onmouseout：鼠标移出事件；
注意：onclick和ondblclick事件不可以同时使用。
?焦点事件：
onfocus：元素获得焦点的时候触发事件；
onblur：元素失去焦点的时候触发事件；
?其他事件：
onload：当页面加载完之后触发该事件，一般在body标签中使用；
onchange：当元素的内容发生变化才会触发该事件，一般在下拉框使用较多；
onsubmit：点击提交表单按钮的时候，在提交表单前触发的事件。可以通过该事件提交表单之前对表单项进行数据验证。该事件在form标签中使用。
如果要禁止表单的提交，那么onsubmit就要返回false。
## 三、BOM编程
2.1 什么是BOM编程
BOM(Browser Object Model)：浏览器对象模型。当打开浏览器的时候，浏览器会使用许多的对象来描述浏览器的各个部分。
这些对象的关系如下图所示：
如果我们要通过js代码操作浏览器，可以通过这些对象的属性和方法来访问。所谓的BOM编程，就是通过这些对象的属性和方法操作浏览器。
2.2 常用的BOM对象
2.2.1 Window对象
window对象是所有BOM对象的根对象。而且该对象是一个全局对象，它保存所有的全局变量和函数。
?常用属性：
window.location：获取location对象；
window.document：获取document对象；
window.screen：获取screen对象；
window.navigator：获取navigator对象；
window.history：获取history对象；
注意：window可以不写。
?常用方法：
alert()：弹出一个提示框。
open()：弹出一个新的窗口
参数说明：
URL：网址的地址；
name：窗口的名字；
features：定义窗口特征；
注意：有些浏览器不支持上面的一些特征属性。
close()：关闭窗口；
setInterval()：指定毫秒数执行指定的js代码。然后每隔指定毫秒数重复执行。该方法会返回一个定时器ID。
clearInterval(id)：根据ID取消定时器；
setTimeout()：指定毫秒数后执行指定的js代码一次；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var name = ‘张三‘; //全局变量
//alert(name); //省略window对象
//alert(window.name);
function test() {
alert(‘test方法...‘);
}
//test(); //省略window对象
//window.test();
//弹窗
window.open(‘ad.html‘, ‘广告‘, ‘width=280px,height=190px,left=1050px,top=420px,location=no‘);
//在页面上显示系统当前时间
function showTime() {
var d = new Date();
var yy = d.getFullYear();
var mm = d.getMonth() + 1;
var dd = d.getDate();
var hh = d.getHours();
var mi = d.getMinutes();
var ss = d.getSeconds();
document.write(yy + ‘年‘ + mm + ‘月‘ + dd + ‘日 ‘
+ hh + ‘时‘ + mi + ‘分‘ + ss + ‘秒‘);
}
//定时器
//var id = window.setInterval(showTime, 1000); //每一秒钟定时执行该方法一次
//alert(id); //定时器ID
window.setTimeout(showTime, 3000); //指定毫秒数之后执行js代码一次
</script>
</head>
<body>
<!--关闭窗口-->
<input type="button" onclick="window.close()" value="关闭当前窗口"/>
</body>
</html>
2.2.2 Location对象
Location对象代表浏览器的地址栏。
?常用属性：
href：设置或获取地址栏的信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//获取Location对象
var url = window.location.href;
//alert(url);
//设置地址栏的地址（可以实现页面的跳转）
//window.location.href = ‘http://www.baidu.com‘;
//location.href = ‘http://www.baidu.com‘;
location = "http://www.entor.com.cn";
</script>
</head>
<body>
</body>
</html>
2.2.3 History
History对象代表前进后退按钮。
?常用方法：
back()：后退一步；
forward()：前进一步；
go(n)：如果正数就前进n步，如果是负数就后退n步；
【代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="后退" onclick="window.history.back()"/>
<input type="button" value="前进" onclick="window.history.forward()"/>
<input type="button" value="后退2步" onclick="window.history.go(-2)"/>
<input type="button" value="前进2步" onclick="window.history.go(2)"/>
</body>
</html>
## 四、DOM编程
3.1 DOM编程介绍
DOM(Document Object Model)：文档对象模型。当浏览器解析HTML页面的时候，它会把整个HTML页面中的所有元素按照它们出现的顺序在内存中生成一个文档树对象。然后再把文档树对象显示在浏览器中。所谓DOM编程，就是指浏览器解析HTML页面的时候，它会为每一个文档树中的节点创建一个对象来描述。我们在浏览器所看到的内容只是这些对象的属性而已。因此，如果要访问网页的内容，那么只需要通过这些对象的属性来访问即可。
3.2 如何获取DOM元素
3.2.1 根据元素的属性查找
?document.getElmenetById(元素的ID属性)：根据元素ID查找元素；
?document.getElementsByTagName()：根据元素名查找元素；
?document.getElementsByName()：根据元素的name属性查找元素；
3.2.2 通过元素的关系查找
?firstChild：获取当前节点的第一个子节点；
?lastChild：获取当前节点的最后一个子节点；
?parentNode：获取当前节点的父节点；
?childNodes：获取当前节点的所有子节点；
?nextSibling：获取当前节点的下一个兄弟节点；
?previousSibling：获取当前节点的上一个兄弟节点；
3.3 元素的属性
?设置和获取文本：
HTML元素.innerHTML = “HTML内容”; //设置标签体的内容
HTML元素.innerHTML; //获取标签体的内容
INPUT元素.value = “文本内容”; //设置input标签的文本
INPUT元素.value; //获取input标签的文本
需求：在HTML页面中显示当前系统的时间。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function showTime() {
//获取系统的时间
var d = new Date();
var yy = d.getFullYear();
var mm = d.getMonth() + 1;
var dd = d.getDate();
var hh = d.getHours();
var mi = d.getMinutes();
var ss = d.getSeconds();
var time = yy + ‘年‘ + mm + ‘月‘ + dd + ‘日 ‘
+ hh + ‘时‘ + mi + ‘分‘ + ss + ‘秒‘;
//获取span标签
var spanNode = document.getElementById("sysdate");
spanNode.innerHTML = time;
}
//定义一个定时器
window.setInterval(showTime, 1000); //每隔1秒执行showTime方法一次
</script>
</head>
<body>
<span id="sysdate"></span>
</body>
</html>
案例1：实现一个定时器的功能
1）定义一个启动的按钮，当点击按钮的时候，就开始计时；
2）定义一个暂停的按钮，当点击按钮的时候，就取消定时器；
案例2：购物车的全选和取消功能
3.4 创建和删除节点
?创建一个新的元素：
var 新元素 = document.createElement(‘元素名’);
?往元素中添加子元素：
父元素.appendChild(子元素);
?删除子元素：
父元素.removeChild(子元素);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" />
</body>
<script>
var divNode = document.createElement("div");
//设置内容
divNode.innerHTML = ‘对不对？‘;
//alert(divNode);
//获取body元素
var bodyNode = document.getElementsByTagName("body")[0];
//把div添加到body中
bodyNode.appendChild(divNode);
//删除input标签
var inputNode = document.getElementsByTagName("input")[0];
bodyNode.removeChild(inputNode);
</script>
</html>
案例3：添加和删除附件的功能
3.5操作元素的CSS样式
所有元素都一个style属性。如果要元素的CSS样式，就可以通过元素的style属性修改元素的样式。例如：
DOM对象.style.样式属性 = 样式值
?查找样式属性的方法：
资料 》DHTML文档 》HTML参考 》HTML元素 》样式。
案例4：生成输出验证码，并使用javaScript给验证码添加样式。
以上是关于javascript的主要内容，如果未能解决你的问题，请参考以下文章