DOM 基础（二）
<!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>
<title></title>
<style type="text/css">
.day
{
background-color: Green;
}
.night
{
background-color: Black;
}
.openlight
{
background-color: White;
}
.closelight
{
background-color: Black;
}
.tooltip
{
background-color: Yellow;
border-style: solid;
border-width: 1px;
border-color: Red;
}
</style>
</head>
<body class="openlight">
<div class="day">
这里是内容</div>
<input type="button" value="黑夜（用.class）" onclick="document.getElementById('divTest').class='night';" />
<input type="button" value="黑夜（用.className）" onclick="document.getElementById('divTest').className='night';" />
<input type="button" value="白天" onclick="document.getElementById('divTest').className='day';" /><br />
<script type="text/javascript">
function switchLight() {
var switchBtn = document.getElementById("switchBtn");
if (document.body.className == "openlight") {
document.body.className = "closelight"
switchBtn.value = "开灯";
}
else if (document.body.className == "closelight") {
document.body.className = "openlight"
switchBtn.value = "关灯";
}
}
</script>
<input type="button" onclick="initEvent()" value="初始化本控件" />
<input type="button" id="switchBtn" value="关灯" onclick="switchLight()" />
<input type="button" value="改变自己的（背景）颜色" onclick="this.style.background='Red'" />
<input type="button" value="改变自己的（前景）颜色" onclick="this.style.color='Red'" />
<input type="text" value="失去/获得焦点测试" onfocus="this.style.background='Green';this.value='获得焦点';"
onblur="this.style.background='Red';this.value='失去焦点';" /><br />
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByName("nextText");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onblur = inputOnBlur;
};
}
function inputOnBlur() {
//this
if (this.value.length == 0) {
this.style.background = "red";
} else {
this.style.background = "white";
}
}
</script>
<input type="text" name="nextText" /><font color="red">*</font><br />
<input type="text" name="nextText" /><font color="red">*</font><br />
<input type="text" name="nextText" /><font color="red">*</font><br />
<input type="text" name="nextText" /><font color="red">*</font><br />
<script type="text/javascript">
function indexOf(arr, element) { //判断元素在数组中的位置;alert(indexOf([1,3,5],3))
for (var i = 0; i < arr.length; i++) {
if (element == arr[i])
return i;
}
return -1;
}
function initRating() {
var tableRating = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onclick = tdOnClick;
td.style.cursor = "pointer";
}
}
function tdOnClick() {
this.style.background = "red";
var tableRating = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td");
var index = indexOf(tds, this);
for (var i = 0; i < tds.length; i++) {
if (i <= index)
tds[i].style.background = "red";
else tds[i].style.background = "white";
}
}
function initRating2() {
var tableRating = document.getElementById("tableRating2");
var tds = tableRating.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.style.cursor = "pointer";
td.onmouseover = function () {
var tableRating = document.getElementById("tableRating2");
var tds = tableRating.getElementsByTagName("td");
var index = indexOf(tds, this);
for (var i = 0; i < tds.length; i++) {
if (i <= index)
tds[i].innerText = "★";
else tds[i].innerText = "☆";
}
};
}
}
</script>
打分控件:<input type="button" onclick="initRating();" value="初始化打分控件" />
<table id="tableRating">
<tr><td>★</td><td>★</td><td>★</td><td>★</td><td>★</td></tr>
</table>
<br />
打分控件:<input type="button" onclick="initRating2();" value="初始化打分控件2" />
<table id="tableRating2">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
<br />
<script type="text/javascript">
function toggleDiv(cb) {
var toggleDiv = document.getElementById("div1");
if (cb.checked) {
toggleDiv.style.display = ""; //没有值表示显示
} else
toggleDiv.style.display = "none";
}
</script>
<input type="checkbox" id="checkBox" onclick="toggleDiv(this)" /><label for="cbShow">显示高级选项</label>
<div id="div1" style="display: none">
这里有一些高级选项</div>
<br />
<br />
<font color="Gredn">光标进入离开练习</font><br />
<a href="http://www.xtu.edu.cn" onmouseout="document.getElementById('xtuDiv').style.display='none'"
onmouseover="document.getElementById('xtuDiv').style.display=''">湘潭大学</a>
<div id="xtuDiv" style="display: none">
湘潭大学是<font color="red">老泽东同志亲笔题名并嘱托“一定要把湘潭大学办好”</font>的一所省部共建的重点大学<a href="http://www.xtu.edu.cn">www.xtu.edu.cn</a>
</div>
<br />
<!--
元素的position 样式值：static（无定位，显示在默认位置）、absolute（绝对定位）、fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化， IE6不支持）、 relative （相对元素默认位置的定位）。如 果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top （上边缘距离）、 left（左边缘距离）两个样式值。left 、top 都是指的层的左上角的坐标
-->
pisition练习<br />
<input type="button" value="pisition练习(top:320px;left:300px)" style="position: absolute;
top: 320px; left: 300px" />
<script type="text/javascript">
//这里是图片跟踪鼠标显示，去掉/**/就可以了
/* document.onmousemove = function () {
var x = window.event.clientX;
var y = window.event.clientY;
if (!divMM) {
return;
}
divMM.style.left = x;
divMM.style.top = y;
}
*/
</script>
<div id="divMM" style="position: absolute">
<img src="E:/MM.jpeg" alt="MM" width="50px" height="50px" />
</div>
<br />
<br />
<br />
<script type="text/javascript">
function divInitEvent() {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.onmouseover = linkMouseOver;
link.onmouseout = linkMouseOut;
}
}
function linkMouseOver() {
var div = document.createElement("div");
div.className = "tooltip";
div.style.position = "absolute";
div.style.top = window.event.clientY;
div.style.left = window.event.clientX;
div.innerHTML = "love<font color='Red'>LOVE红色</font>";
document.body.appendChild(div);
}
function linkMouseOut() {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.className == "tooltip")
// div.style.display = "none"; //这里中介隐藏层，但是还是存在于内存，会造成内存泄漏
document.body.removeChild(div); //这里中介移除层，不会造成内存泄漏
}
}
</script>
<a href="http://www.xtu.edu.cn" title="本人就读的学校">湘潭大学</a> <a href="http://www.baidu.com"
title="百度搜索">百度</a> <a href="http://www.sina.com" title="博客新闻网">新浪网</a>
<input type="button" value="初始化本控件" onclick="divInitEvent()" />
<br />
<script type="text/javascript">
var intervalId;
function showDiv() {
intervalId = setInterval("inc()", 100);
}
function inc() {
var divxtu = document.getElementById('divxtu');
var oldwidth = divxtu.style.width;
oldwidth = parseInt(oldwidth, 10);
var oldheight = divxtu.style.height;
oldheight = parseInt(oldheight, 10);
if (oldwidth >= 200 && oldheight >= 200) {
clearInterval(intervalId);
} else if (oldwidth >= 200 && oldheight <= 200) {
oldheiht = oldheight + 10 + "px"
} else if (oldwidth <= 200 && oldheight >= 200) {
oldwidth = oldwidth + 10 + "px";
} else if (oldwidth <= 200 && oldheight <= 200) {
oldheiht = oldheight + 10 + "px"
oldheight = oldheight + 10 + "px";
}
divxtu.style.width = oldwidth;
divxtu.style.height = oldheight;
}
</script>
<div id="divxtu" style="width: 10px; height: 10px; border-style: solid; border-color: Red;
border-width: 1px">
湘潭大学湘潭大学湘潭大学
</div>
<input value="修改层的宽和高" type="button" onclick="var divxtu=document.getElementById('divxtu');divxtu.style.width='200px';divxtu.style.height='200px'" />
<input value="动态放大层的宽和高" type="button" onclick="showDiv()" />
</body>
</html>