BOM對象
瀏覽器對象模型
js把瀏覽器抽象成爲一個
Windows對象
JS三種彈框
- 警告框：提示信息 alert()
- 確認框：確認信息 confirm()
- 輸入框：輸入信息 prompt()
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彈框操作</title>
</head>
<body>
<script>
//警告
alert('中國')
//確認框
let result = confirm("確定要刪除嗎");
if (result == true) {
console('單擊了確定');
} else {
console('單擊了取消');
}
//輸入框
let result = prompt('請輸入您的年齡')
if (result!= null) {
console.log('用戶輸入的值：${result}');
} else {
console.log('單擊了取消');
}
</script>
</body>
</html>
JS兩個定時器
1、一次性定時器 創建：let 定時器對象=setTimeout(‘函數名()’,毫秒) 關閉:clearTimeout(定時器對象)【登錄彈框成功，只提示一次】
2、循環性定時器：無限循環 創建：let 定時器對象=setInterval(函數，毫秒) 關閉：clearInterval（定時器對象）【輪播圖】
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>定時器</title>
</head>
<body>
<!--
1、一次性定時器 創建：let 定時器對象=setTimeout(‘函數名()’,毫秒) 關閉:clearTimeout(定時器對象)【登錄彈框成功，只提示一次】
2、循環性定時器：無限循環 創建：let 定時器對象=setInterval(函數，毫秒) 關閉：clearInterval（定時器對象）【輪播圖】
-->
<button id="btn1"> 取消打印時間</button>
<button id="btn2"> 取消打印自然數</button>
<script>
//定時五秒，在控制檯打印當前時間
function fun1() {
console.log(new Date().toLocaleString());
}
let timout = setTimeout('fun1()', 5000)
//取消打印時間
document.getElementById('btn1').onclick = function () {
clearTimeout(timout);
}
//每隔2秒遞增
let num = 1;
function fun2() {
console.log(num++);
}
let interval=setInterval(fun2,2000)
//點擊按鈕取消打印自然數
document.getElementById('btn2').onclick = function () {
clearInterval(fun2());
}
</script>
</body>
</html>
location地址
1、獲取當前窗口地址 location.href
2、刷新頁面 location.reload()
3、跳轉頁面 location.href=‘新頁面地址’
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>location</title>
</head>
<body>
<!--
1、獲取當前窗口地址 location.href
2、刷新頁面 location.reload()
3、跳轉頁面 location.href='新頁面地址'
-->
<button onclick="addr()">獲取當前瀏覽器地址</button>
<button onclick="refresh()">刷新當前頁面</button>
<button onclick="jump()"> 跳轉頁面</button>
<script>
function addr() {
console.log(location.href);
}
function refresh() {
console.log(location.reload());
}
function jump() {
location.href='https://www.jd.com';
}
</script>
</body>
</html>
DOM對象
簡介
DOM(Document Object Model) 頁面文檔對象模型
作用：JS把頁面抽象成爲一個對象,允許我們使用js來操作頁面
dom獲取元素
document.getElementById(id屬性值)
document.querySelectorAll(css選擇器)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>獲取元素</title>
</head>
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="德瑪西亞"/> <br/>
密碼 <input type="password" name="password"> <br/>
生日 <input type="date" name="birthday"><br/>
性別
<input type="radio" name="gender" value="male" class="radio">男 
<input type="radio" name="gender" value="female" class="radio"/>女<br/>
愛好
<input type="checkbox" name="hobby" value="smoke">抽菸
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">燙頭<br/>
頭像 <input type="file" name="pic"><br/>
學歷
<select name="edu">
<option value="0">請選擇</option>
<option value="1">入門</option>
<option value="2">精通</option>
<option value="3">放棄</option>
</select><br/>
簡介
<textarea name="userIntro" cols="30" rows="10">默認值</textarea><br/>
<input type="reset" value="清空按鈕"/>
<input type="submit" value="提交按鈕"/><br/>
</form>
<script>
//獲取id=username的標籤對象
//console.log(document.getElementById('username'));
console.log(document.querySelector('#username'));
//獲取class=radio的標籤對象數組
console.log(document.querySelectorAll('.radio'));
//獲取所有的option標籤對象數組
console.log(document.querySelectorAll('option'));
//獲取name=hobby的input標籤對象數組
console.log(document.querySelectorAll('input[name=hobby]'));
//獲取文件上傳選擇框
console.log(document.querySelectorAll('form input[type="file"]'));
</script>
</body>
</html>
dom操作內容
-
獲取或者修改元素（標籤）的純文本內容
語法：
js對象.innerText; -
獲取或者修改元素的html超文本內容
語法：
js對象.innerHTML; -
獲取或者修改包含自身的html內容（瞭解）
語法：
js對象.outerHTML;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>操作內容</title>
<style>
#myDiv {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="myDiv">程序猿最討厭的四件事：<br>寫註釋、寫文檔……</div>
<script>
let myDiv = document.getElementById('myDiv');
// 1.innerText操作div內容
// 1.1 獲取純文本
console.log(myDiv.innerText);
// 1.2 設置純文本
myDiv.innerText='<h1>我愛中國</h1>'; // 覆蓋
myDiv.innerText+='我愛中國'; // 追加
// 2.innerHTML操作div內容
// 2.1 獲取超文本內容
console.log(myDiv.innerHTML);
// 2.2 設置超文本
myDiv.innerHTML='<h1>我愛中國</h1>'; // 覆蓋
myDiv.innerHTML+='<h1>我愛中國</h1>'; // 追加
// 3.outerHTML操作div （擴展）
myDiv.outerHTML = '<p>我搖身一變</p>';
</script>
</body>
</html>
dom操作屬性
- 獲取文本框的值,單選框或複選框的選中狀態 語法: element.properties 獲取或者修改元素對象的原生屬性
- 給元素設置自定義屬性 語法: element.setAttribute(屬性名,屬性值) 給元素設置一個屬性值,可以設置原生和自定義
- 獲取元素的自定義屬性值 語法: element.getAttribute(屬性名) 獲取元素的一個屬性值,可以獲取原生和自定義
- 移除元素的自定義屬性 語法: element.removeAttribute(屬性名)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>操作屬性</title>
</head>
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="德瑪西亞"/> <br/>
愛好
<input type="checkbox" name="hobby" value="smoke">打球
<input type="checkbox" name="hobby" value="drink">唱歌
<input type="checkbox" name="hobby" value="perm">蹦迪<br/>
<input type="reset" value="清空按鈕"/>
<input type="submit" value="提交按鈕"/><br/>
</form>
<script>
// 1.獲取文本框預定義的屬性值
let username = document.getElementById('username');
console.log(username);
console.log(username.type); // text
console.log(username.name); // username
console.log(username.value); // 德瑪西亞
// 2.給文本框設置自定義屬性[新增、修改]
username.setAttribute('自定義','我是自定義屬性');
// 3.獲取文本框自定義屬性
console.log(username.getAttribute('自定義'));
// 4.移出文本框自定義屬性
username.removeAttribute('自定義')
username.removeAttribute('value')
</script>
</body>
</html>
dom操作樣式
-
設置一個css樣式【會用】
語法:
js對象.style.樣式名=‘樣式值’
特點：樣式名按照駝峯式命名
css格式：font-size
js格式：fontSize -
批量設置css樣式（瞭解）
語法:
js對象.style.cssText=‘css樣式字符串’
缺點：讓開發者痛苦，有耦合性 -
通過class設置樣式【重點】
語法:
js對象.className=‘class選擇器名’
特點：解耦
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>操作樣式</title>
<style>
#p1{ background-color: red;}
.mp {
color: green;
font-size: 30px;
font-family: 楷體;
}
.mpp {
background-color: lightgray;
}
</style>
</head>
<body>
<p id="p1">1. 設置一個css樣式</p>
<p id="p2">2. 批量設置css樣式</p>
<p id="p3" >3. 通過class設置樣式</p>
<script>
let p1 = document.getElementById("p1");//獲取段落標籤
let p2 = document.getElementById("p2");//獲取段落標籤
let p3 = document.getElementById("p3");//獲取段落標籤
// 1. 設置一個css樣式
p1.style.backgroundColor='black';
p1.style.color='white';
// 2. 批量設置css樣式
p2.style.cssText='border:1px solid red;font-size:20px;';
// 3. 通過class設置樣式
p3.className='mp mpp'; // 注意不要畫蛇添足：不要加. class="mp mpp"
</script>
</body>
</html>
dom操作元素（標籤）
-
創建一個標籤對象
語法：
document.createElement(標籤名稱) -
給父標籤添加一個子標籤
語法：
父標籤對象.appendChild(子標籤對象)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>操作元素</title>
</head>
<body>
<ul id="star">
<li>阿卡麗</li>
<li>沙皇</li>
</ul>
<script>
// 添加一個新列表項 <li>馬爾扎哈</li>
// 方式一
document.getElementById('star').innerHTML+='<li>馬爾扎哈</li>';
// 方式二
// 1.1 創建li標籤
let li = document.createElement('li');
li.innerText='小陳：都要'
console.log(li);
// 1.2 父標籤添加子標籤
document.getElementById('star').appendChild(li);
</script>
</body>
</html>
正則表達式
在js中使用正則表達式
1.創建方式
1）let rege = new RegExp(“正則表達式字符串”);
2）let rege = /正則表達式/;
2.驗證方法
1）正則對象.test(字符串)
符合正則規則就返回true，否則false
2）字符串對象.match(正則對象)
返回字符串中符合正則規則的內容。
3. 瞭解下正則修飾符
4. 在線正則表達式
https://tool.oschina.net/regex/#
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>正則表達式</title>
</head>
<body>
<script>
// 1.創建正則對象
let reg1 = new RegExp('\\d+'); // 規則只能是純數字
console.log(reg1.test('abc')); // false
console.log(reg1.test('123321')); // true
// 2.直接使用正則表達式【推薦】
let reg2 = /\d+/;
console.log(reg2.test('abc')); // false
console.log(reg2.test('123321')); // true
console.log("a1".match(reg2)); // 表示獲取字符串符合正則規則那部分內容 【瞭解】
</script>
<script>
//正則表達式修飾符(自學瞭解)
let regi = /[amn]/i;//不區分大小寫匹配amn ignore 忽略大小寫
let resi = "ABC".match(regi);//從"ABC"中匹配regi模式字符串
console.log(resi);
let regg = /\d/g;//全局查找數字 global 全局
let resg = "1 plus 2 equals 3".match(regg);
console.log(resg);
let regm = /^\d/m;//多行匹配開頭的數字 （^ 限定開始 $ 限定結束） multpart 多行
let resm = "abc1 plus 2 equals 3\n6abcmnk".match(regm);
console.log(resm);
</script>
<script>
console.log('-------------------------------')
// 以郵箱舉例
let emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
console.log(emailReg.test('sadfsadf')); // false
console.log(emailReg.test('[email protected]')); // true
// 以手機號舉例
let phoneReg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
console.log(phoneReg.test('123123')); // false
console.log(phoneReg.test('18312332199')); // true
</script>
</body>
</html>
案例練習
表單校驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>案例-表單校驗</title>
<style type="text/css">
.regist_bg {
width: 100%;
height: 600px;
padding-top: 40px;
background-image: url(../img/bg.jpg);
}
.regist {
border: 7px inset #ccc;
width: 700px;
padding: 40px 0;
padding-left: 80px;
background-color: #fff;
margin-left: 25%;
border-radius: 10px;
}
input[type="submit"] {
background-color: aliceblue;
width: 100px;
height: 35px;
color: red;
cursor: pointer;
border-radius: 5px;
}
.warn {
color: red;
font-size: 12px;
display: none;
}
</style>
<!--
表單校驗
1. 兩次密碼輸入一致
2. 郵箱格式正確
3. 手機號格式正確
4. 提交表單時校驗表單項是否合法.
總結:
form表單的 onsubmit 事件 表單提交之前觸發
-->
</head>
<body>
<div class="regist_bg">
<div class="regist">
<form action="#" id="myForm">
<table width="700px" height="350px">
<tr>
<td colspan="3">
<font color="#3164af">會員註冊</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用戶名</td>
<td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50"/><span
id="loginnamewarn" class="warn">用戶名不能爲空</span></td>
</tr>
<tr>
<td align="right">密碼</td>
<td colspan="2"><input id="pwd1" type="password" name="pwd1" size="50"/></td>
</tr>
<tr>
<td align="right">確認密碼</td>
<td colspan="2"><input id="pwd2" type="password" name="pwd2" size="50"/>
<span id="pwdwarn" class="warn">密碼不一致</span></td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input id="email" type="text" name="email" size="50"/>
<span id="emailwarn" class="warn">郵箱格式有誤</span>
</td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" name="username" size="50"/></td>
</tr>
<tr>
<td align="right">性別</td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
</td>
</tr>
<tr>
<td align="right">電話號碼</td>
<td colspan="2"><input id="phone" type="text" name="phone" size="50"/>
<span id="phonewarn" class="warn">手機格式有誤</span>
</td>
</tr>
<tr>
<td align="right">所在地</td>
<td colspan="3">
<select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
<option value="">----請-選-擇-省----</option>
<option value="0">北京</option>
<option value="1">遼寧</option>
<option value="2">江蘇</option>
</select>
<select id="cityId" style="width:150px">
<option>----請-選-擇-市----</option>
</select>
</td>
</tr>
<tr>
<td width="80" align="right">驗證碼</td>
<td width="100"><input type="text" name="verifyCode"/></td>
<td><img src="../img/checkMa.png"/></td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input id="rebtn" type="submit" value="註冊"/>
</td>
</tr>
</table>
</form>
</div>
</div>
<script>
// 1. 兩次密碼輸入一致
//通過id屬性獲得密碼框、確認密碼框標籤對象
let pwd1 = document.getElementById('pwd1');
let pwd2 = document.getElementById('pwd2');
//比較兩次輸入的密碼是否一致
function checkPwd() {
let boo = pwd1.value == pwd2.value;
if (boo == true) {
//密碼一致的時候，提示信息不出來
document.getElementById('pwdwarn').style.display = 'none';
} else {
//span信息顯示出來
document.getElementById('pwdwarn').style.display = 'inline';
}
return boo;
}
//給確認密碼框綁定失去焦點的事件
pwd2.onblur = checkPwd;
// 2. 郵箱格式正確,使用正則表達式
let emailR = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
//獲取郵箱的對象
let email = document.getElementById('email');
function checkEmail() {
let boo = emailR.test(email.value);
if (boo == true) {
//郵箱格式正確時候，提示信息不出來
document.getElementById('emailwarn').style.display = 'none';
} else {
//span信息顯示出來
document.getElementById('emailwarn').style.display = 'inline';
}
return boo;
}
//綁定失去焦點事件
email.onblur = checkEmail;
// 3. 手機號格式正確
//獲取手機號的js對象
let phone = document.getElementById('phone');
//定義正則表達式
let phoneT = /^1[3456789]\d{9}$/;
function checkPhone() {
let boo = phoneT.test(phone.value);
if (boo == true) {
document.getElementById('phonewarn').style.display = 'none';
} else {
//span信息顯示出來
document.getElementById('phonewarn').style.display = 'inline';
}
return boo;
}
//綁定失去焦點事件
phone.onblur = checkPhone;
//提交表單時，會觸發onsubmit事件
document.getElementById('myForm'), onsubmit = function () {
return checkPwd() && checkPhone() && checkEmail();
}
</script>
</body>
</html>
省市級聯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>案例-省市級聯</title>
<style type="text/css">
.regist_bg {
width: 100%;
height: 600px;
padding-top: 40px;
background-image: url(../img/bg.jpg);
}
.regist {
border: 7px inset #ccc;
width: 600px;
padding: 40px 0;
padding-left: 80px;
background-color: #fff;
margin-left: 25%;
border-radius: 10px;
}
input[type="submit"] {
background-color: aliceblue;
width: 100px;
height: 35px;
color: red;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="regist_bg">
<div class="regist">
<form action="#">
<table width="600" height="350px">
<tr>
<td colspan="3">
<font color="#3164af">會員註冊</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用戶名</td>
<td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60"/></td>
</tr>
<tr>
<td align="right">密碼</td>
<td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60"/></td>
</tr>
<tr>
<td align="right">確認密碼</td>
<td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60"/></td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input id="emailId" type="text" name="email" size="60"/></td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" name="username" size="60"/></td>
</tr>
<tr>
<td align="right">性別</td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
</td>
</tr>
<tr>
<td align="right">電話號碼</td>
<td colspan="2"><input type="text" name="phone" size="60"/></td>
</tr>
<tr>
<td align="right">所在地</td>
<td colspan="3">
<select id="provinceId" style="width:150px">
<option value="">----請-選-擇-省----</option>
</select>
<select id="cityId" style="width:150px">
<option value="">----請-選-擇-市----</option>
</select>
</td>
</tr>
<tr>
<td width="80" align="right">驗證碼</td>
<td width="100"><input type="text" name="verifyCode"/></td>
<td><img src="../img/checkMa.png"/></td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="註冊"/>
</td>
</tr>
</table>
</form>
</div>
</div>
<!--
省市級聯【重點】
1. 頁面加載完成後自動裝載省數據
2. 當選中省時,裝載該省的市數據
-->
<script type="text/javascript">
// 準備數據 【二維數組】
let data = new Array();
data['北京'] = ['順義區', '昌平區', '朝陽區'];
data['河北'] = ["保定", "石家莊", "廊坊"];
data['遼寧'] = ["瀋陽", "鐵嶺", "撫順"];
let provinceId = document.getElementById("provinceId");//獲取省下拉列表
let cityId = document.getElementById("cityId");//獲取市下拉列表
//頁面加載成功後，初始化省份數據
window.onload = function () {
//遍歷省份【索引for】
for (let index in data) {
//獲取或者修改元素的html超文本內容
provinceId.innerHTML += `<option value="${index}">${index}</option>`;
}
}
//給省份綁定onchange事件
provinceId.onchange = function () {
//清空上一次的信息
cityId.innerHTML = `<option value="">----請-選-擇-市----</option>`;
//獲得省份後面的城市
let citys = data[this.value];
//遍歷【增強for】
for (let city of citys) {
cityId.innerHTML += `<option value="${city}">${city}</option>>`;
}
}
</script>
</body>
</html>
隔行變色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>案例-隔行變色</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<th width="100px"><input type="checkbox">全/<input type="checkbox">反選</th>
<th>分類ID</th>
<th>分類名稱</th>
<th>分類描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>1</td>
<td>手機數碼</td>
<td>手機數碼類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>2</td>
<td>電腦辦公</td>
<td>電腦辦公類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>5</td>
<td>牛奶製品</td>
<td>牛奶製品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>6</td>
<td>大豆製品</td>
<td>大豆製品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>7</td>
<td>海蔘製品</td>
<td>海蔘製品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>8</td>
<td>羊絨製品</td>
<td>羊絨製品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>9</td>
<td>海洋產品</td>
<td>海洋產品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>10</td>
<td>奢侈用品</td>
<td>奢侈用品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
</table>
<!--
隔行變色
1. 表格奇偶行顏色不同
2. 鼠標移入顏色高亮
-->
<script>
let oldcolor;
//獲得所有的tr的js對象，返回是一個數組
let arr = document.querySelectorAll('table tr');
//遍歷該數組
for (let i = 0; i < arr.length; i++) {
//偶數索引，奇數行
if (i % 2 == 0) {
arr[i].style.backgroundColor = 'pink';
} else {
arr[i].style.backgroundColor = 'skyblue'
}
//鼠標移入移出事件
arr[i].onmouseover = function () {
oldcolor= arr[i].style.backgroundColor;
arr[i].style.backgroundColor = 'blue';
}
arr[i].onmouseout = function () {
arr[i].style.backgroundColor = oldcolor;
}
}
</script>
</body>
</html>