练习
1. 逐渐变大
<script type="text/javascript">
function showId() {
showIntervalId = setInterval("inc()", 100);
}
function inc() {
var div1 = document.getElementById("div1");
var oldwidth = div1.style.width;
oldwidth = parseInt(oldwidth, 10);
var oldheight = div1.style.height;
oldheight = parseInt(oldheight, 10);
if (oldwidth >= 200) {
clearInterval(showIntervalId);
}
oldwidth += 10;
oldheight += 10;
div1.style.width = oldwidth + "px";
div1.style.height = oldheight + "px";
}
</script>
</head>
<body>
<div id="div1" style="width:10px; height:100px; border:solid red 1px;">IE中body的事件范围：在body中内容有效，如果想要整个有效 需要在document中做元素的位置、大小单位IE中body的事件范围：在body中内容有效，如果想要整个有效 需要在document中做元素的位置、大小单位</div>
<input type="button" value="逐渐变大" οnclick="showId()" />
2。隐藏登陆框
<script type="text/javascript">
function showLogin() {
var loginDiv=document.getElementById("loginDiv");
loginDiv.style.display="";
}
function hideLogin() {
var loginDiv = document.getElementById("loginDiv");
loginDiv.style.display = "none";
}
</script>
</head>
<body>
<a href="javascript:showLogin()">登陆</a>
<div style="position:absolute; top:200px;left:200px; border:solid blue thin; display:none;" id="loginDiv">
<img src="123.jpg" οnclick="hideLogin()"style="float:right" />
<table>
<tr><td><label for="username">用户名</label></td><td><input type="text" id="username" /></td></tr>
<tr><td><label for="password">密码</label></td><td><input type="text" id="password" /></td></tr>
</table>
</div>
3.详细介绍
function showDetails() {
var details = document.getElementById("details");
details.style.display = '';
details.style.left = window.event.clientX;
details.style.top = window.event.clientY;
}
function hideDetails() {
var details = document.getElementById("details");
details.style.display = 'none';
}
</script>
</head>
<body>
<img src="123.jpg" οnmοuseοver="showDetails()"; />
<div style="display:none; position:absolute" id="details">
<img src="123.jpg" />
<p>身高：160</p>
<p>体重：100kg</p>
<p><input type="button" value="关闭" οnclick="hideDetails()" /></p>
</div>
4.动态添加图片
<script type="text/javascript">
var data = { "123.jpg": ["123.jpg", "smile", "160"], "234.jpg": ["123.jpg", "lucky", "165"], "123.jpg": ["123.jpg", "wuhazjc", "170"] };
function loadImg() {
for (var smallimgpath in data) {
var smallImg = document.createElement("img");
smallImg.src = smallimgpath;
smallImg.setAttribute("a1", data[smallimgpath][0]);
smallImg.setAttribute("a2", data[smallimgpath][1]);
smallImg.setAttribute("a3", data[smallimgpath][2]);
smallImg.onmouseover = function () {
document.getElementById("detailImg").src = this.getAttribute("a1");
document.getElementById("detailHeight").innerHTML = this.getAttribute("a3");
document.getElementById("detailName").innerHTML = this.getAttribute("a2");
var details = document.getElementById("details");
details.style.top = window.event.clientY;
details.style.left = window.event.clientX;
details.style.display = '';
};
document.body.appendChild(smallImg);
}
}
function hideDetails() {
var details = document.getElementById("details");
details.style.display = "none";
}
</script>
</head>
<body οnlοad="loadImg()">
<div style="display:none;position:absolute;" id="details">
<img id="detailImg" src="" />
<p id="detailHeight"></p>
<p id="detailName"></p>
<p><input type="button" value="close" οnclick="hideDetails()" /></p>
</div>
5.评分控件
<script type="text/javascript">
function indexOf(arr,element){
for(var i=0;i<arr.length;i++){
if(arr[i]==element){
return i;
}
}
return -1;
}
function initEvent() {
var rating = document.getElementById("rating");
var tds = rating.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.style.cursor = 'pointer';
td.onmouseover = function () {
var rating = document.getElementById("rating");
var tds = rating.getElementsByTagName("td");
var index = indexOf(tds, this);
for (var i = 0; i<= index; i++) {
tds[i].innerText = '★';
}
for (var i = index+1; i < tds.length; i++) {
tds[i].innerText = '☆';
}
};
}
}
</script>
</head>
<body οnlοad="initEvent()">
<table id="rating"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table>
6.文本框一入一出
<script type="text/javascript">
function inputFocus(keyword) {
if (keyword.value == '输入搜索关键字') {
keyword.value = '';
keyword.style.color = "Black";
}
}
function inputBlur(keyword) {
if (keyword.value.length <= 0) {
keyword.value = '输入搜索关键字';
keyword.style.color = "Gray";
}
}
</script>
</head>
<body >
<input οnblur="inputBlur(this)" οnfοcus="inputFocus(this)" id="keyword" value="输入搜索关键字" style="color:Gray" />
</body>
2247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
