1.倒计时
<html>
<head></head>
<body>
请等待<span id="dd">3</span>秒
<script type="text/javascript">
function run(){
var s = document.getElementById("dd");
if(s.innerHTML == 1){
window.location.href='2.html';
return false;
}
s.innerHTML = s.innerHTML * 1 - 1;
}
window.setInterval("run();", 1000);
</script>
</body>
</html>
2.拖拽div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖拽div</title>
<style type="text/css">
div{
position:absolute;
width:150px;
height:150px;
background-color:#C8FFFF;
}
</style>
<script type="text/javascript">
function drag(obj)
{
if (typeof obj == "string") {
var obj = document.getElementById(obj);
obj.orig_index=obj.style.zIndex;//设置当前对象永远显示在最上层
}
obj.οnmοusedοwn=function (a){//鼠标按下
this.style.cursor="move";//设置鼠标样式
this.style.zIndex=1000;
var d=document;
if(!a) a=window.event;//按下时创建一个事件
var x=a.clientX-document.body.scrollLeft-obj.offsetLeft;//x=鼠标相对于网页的x坐标-网页被卷去的宽-待移动对象的左外边距
var y=a.clientY-document.body.scrollTop-obj.offsetTop;//y=鼠标相对于网页的y左边-网页被卷去的高-待移动对象的左上边距
d.οnmοusemοve=function(a){//鼠标移动
if(!a) a=window.event;//移动时创建一个事件
obj.style.left=a.clientX+document.body.scrollLeft-x;
obj.style.top=a.clientY+document.body.scrollTop-y;
}
d.οnmοuseup=function (){//鼠标放开
document.οnmοusemοve=null;
document.onmouseup = null;
obj.style.cursor="normal";//设置放开的样式
obj.style.zIndex=obj.orig_index;
}
}
}
</script>
</head>
<body>
<div id="div1"> </div>
<div id="div2" style="left:170px; background-color:#408080"></div>
<div id="div3" style="left:335px; background-color:#408224"></div>
<script type="text/javascript">
drag("div1");
drag("div2");
drag("div3");
</script>
</body>
</html>
3.滚动条固定在低端
<!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=utf-8" />
<title>滚动条固定在低端</title>
</head>
<script type="text/javascript">
function add() {
var now = new Date();
var div = document.getElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';
div.scrollTop = div.scrollHeight;
}
function scrollWindow() {
scroll(0, 100000);
setTimeout('scrollWindow()', 200);
}
window.onload = function() { scrollWindow(); }
</script>
</script>
<body>
<div id="scrolldIV" style="overflow:scroll; height: 100px; width: 400px; border: 1px solid #999;">
</div>
<input type="button" value="插入一行" οnclick="add();">
</body>
</html>
4.div自动换行
<html>
<head>div自动换行</head>
<body>
<div style="width:130px; height:200px; background:#22eefe; word-break:break-all;"> afdsfsdgfsdgfdhgdhfgjghkdgdrgtdgrhgfffffffffffffffffffffffffffffffffdddddddddddddddddhhhhhhhhhhhhhh</div>
</body>
</html>
5.输入框不可写入
<html>
<head>输入框不可写入</head>
<body>
<form><input type="text" name="oInput" readonly>
<select οnchange="oInput.readOnly=this.value=='true'?true:false">
<option value="true">不可写</option>
<option value="false">可写</option>
</select></form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
