事件
预先定义好的标准行为。 比如鼠标单击,鼠标双击。。等等
事件三要素
- 事件源
- 事件名称
- 事件处理程序
js处理事件
- 事件源.事件 = 事件处理程序
- 事件源.事件 = function(){ //事件处理函数。事件处理函数 必须等事件发生后才执行。 }
onclick事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">点我一下试试</button>
<script>
var oBtn = document.getElementById("btn");
oBtn.onclick = function() {
// 事件发生后会执行的操作
alert("你好啊");
}
</script>
</body>
</html>
返回上层目录
onload事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
</head>
<body>
<script>
// 窗口加载事件 window.onload 简写onload
// onload = function () {
// var btn = document.getElementById("btn");
// btn.onclick = function () {
// alert("出来吧,皮卡丘!");
// }
// }
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("出来吧,皮卡丘!");
}
</script>
<button id="btn">白给!点击我也不会有效果的!除非你释放了注释的代码</button>
</body>
</html>
返回上层目录
onmouseover事件
<div id="over">把鼠标移到我身上看看会发生什么</div>
——————————————————
<script>
var oPage = document.getElementById("over");
oPage.onmouseover = function() {
alert("Good!");
}
</script>
返回上层目录
onmouseout事件
<div id="over">把鼠标移到我身上,在移开看看会发生什么</div>
____________________________________________________________
<script>
var oPage = document.getElementById("over");
oPage.onmouseout = function() {
this.style.backgroundColor = "red";
}
</script>
返回上层目录
onchange事件
-
onchange 事件会在域的内容改变时发生。
-
onchange 事件也可用于单选框与复选框改变后触发的事件。
小案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select name="" id="sel">
<option value="">请选择字体颜色</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
<p>书上有路勤为径,学海无涯乐作舟</p>
<script type="text/javascript">
// 事件源 ------ 下拉列表 事件名称 onchange 事件处理程序 p的字体颜色样式发生改变
var oSel = document.getElementById("sel");
var oP = document.getElementsByTagName("p")[0];
// 绑定事件
oSel.onchange = function() {
// 事件处理程序
// p的字体颜色样式即你选择的颜色
//alert(this.value);
oP.style.color = this.value;
}
</script>
</body>
</html>
返回上层目录
onfocus获取焦点事件
<input type="text" id="txt" />
——————————————————————————————————————————————————————
<script>
var txt = document.getElementById("txt");
txt.onfocus = function() {
alert("获取了焦点,执行获取焦点事件函数");
}
</script>
返回上层目录
onblur失去焦点事件
<input type="text" id="txt" />
——————————————————————————————————————————————
<script>
var txt = document.getElementById("txt");
txt.onblur = function() {
alert("失去了焦点,执行失去焦点事件函数");
}
</script>
返回上层目录
事件对象
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
- 当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息。
- 包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 事件对象 与事件相关的对象 事件发生后 浏览器会传一个对象给事件处理函数,该对象封装了与该事件相关的信息
// 在非IE浏览器下,事件对象作为事件的参数,在IE下是window.event
//实现跨浏览器兼容获取event对象
document.onclick = function(e) {
/*console.log(e);
console.log(event);*/
var event = e || window.event; // 兼容处理 先处理高级
console.log(event);
}
</script>
</body>
</html>
返回上层目录
键盘事件
- keydown() 事件
- 当用户按下键盘上任意键触发,而如果按住不放的话,会反复的触发此事件。
- keypress( )事件
- 当用户按下键盘上的字符键触发,而如果按下不放的话,会反复的触发此事件。
- keyup() 事件
- 当用户释放键盘上的按键时触发。
示例
返回上层目录
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event</title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
document.onkeydown = function onKeyDownDemo(e) {
var event = e || window.event;
switch (event.keyCode) {
case 8: keyName = event.keyCode + "[退格]"; break;
case 9: keyName = event.keyCode + "[Tab]"; break;
case 12: keyName = event.keyCode + "[Clear]"; break;
case 13: keyName = event.keyCode + "[Enter]"; break;
case 16: keyName = event.keyCode + "[Shift]"; break;
case 17: keyName = event.keyCode + "[Ctrl]"; break;
case 18: keyName = event.keyCode + "[Alt]"; break;
case 19: keyName = event.keyCode + "[PauseBreak]"; break;
case 20: keyName = event.keyCode + "[Caps Lock]"; break;
case 27: keyName = event.keyCode + "[Esc]"; break;
case 32: keyName = event.keyCode + "[空格]"; break;
case 33: keyName = event.keyCode + "[PageUp]"; break;
case 34: keyName = event.keyCode + "[PageDown]"; break;
case 35: keyName = event.keyCode + "[End]"; break;
case 36: keyName = event.keyCode + "[Home]"; break;
case 37: keyName = event.keyCode + "[方向键左]"; break;
case 38: keyName = event.keyCode + "[方向键上]"; break;
case 39: keyName = event.keyCode + "[方向键右]"; break;
case 40: keyName = event.keyCode + "[方向键下]"; break;
case 41: keyName = event.keyCode + "[Select]"; break;
case 42: keyName = event.keyCode + "[Print]"; break;
case 43: keyName = event.keyCode + "[Execute]"; break;
case 45: keyName = event.keyCode + "[Insert]"; break;
case 46: keyName = event.keyCode + "[Delete]"; break;
case 47: keyName = event.keyCode + "[Help]"; break;
case 48: keyName = event.keyCode + "[0 equal braceright]"; break;
case 49: keyName = event.keyCode + "[1 exclam onesuperior]"; break;
case 50: keyName = event.keyCode + "[2 quotedbl twosuperior]"; break;
case 51: keyName = event.keyCode + "[3 section threesuperior]"; break;
case 52: keyName = event.keyCode + "[4 dollar]"; break;
case 53: keyName = event.keyCode + "[5 percent]"; break;
case 54: keyName = event.keyCode + "[6 ampersand]"; break;
case 55: keyName = event.keyCode + "[7 slash braceleft]"; break;
case 56: keyName = event.keyCode + "[8 parenleft bracketleft]"; break;
case 57: keyName = event.keyCode + "[9 parenright bracketright]"; break;
case 65: keyName = event.keyCode + "[a A]"; break;
case 66: keyName = event.keyCode + "[b B]"; break;
case 67: keyName = event.keyCode + "[c C]"; break;
case 68: keyName = event.keyCode + "[d D]"; break;
case 69: keyName = event.keyCode + "[e E EuroSign]"; break;
case 70: keyName = event.keyCode + "[f F]"; break;
case 71: keyName = event.keyCode + "[g G]"; break;
case 72: keyName = event.keyCode + "[h H]"; break;
case 73: keyName = event.keyCode + "[i I]"; break;
case 74: keyName = event.keyCode + "[j J]"; break;
case 75: keyName = event.keyCode + "[k K]"; break;
case 76: keyName = event.keyCode + "[l L]"; break;
case 77: keyName = event.keyCode + "[m M mu]"; break;
case 78: keyName = event.keyCode + "[n N]"; break;
case 79: keyName = event.keyCode + "[o O]"; break;
case 80: keyName = event.keyCode + "[p P]"; break;
case 81: keyName = event.keyCode + "[q Q at]"; break;
case 82: keyName = event.keyCode + "[r R]"; break;
case 83: keyName = event.keyCode + "[s S]"; break;
case 84: keyName = event.keyCode + "[t T]"; break;
case 85: keyName = event.keyCode + "[u U]"; break;
case 86: keyName = event.keyCode + "[v V]"; break;
case 87: keyName = event.keyCode + "[w W]"; break;
case 88: keyName = event.keyCode + "[x X]"; break;
case 89: keyName = event.keyCode + "[y Y]"; break;
case 90: keyName = event.keyCode + "[z Z]"; break;
case 91: keyName = event.keyCode + "[左Win]"; break;
case 92: keyName = event.keyCode + "[右Win]"; break;
case 93: keyName = event.keyCode + "[快捷菜单键]"; break;
case 95: keyName = event.keyCode + "[Sleep]"; break;
case 96: keyName = event.keyCode + "[小键盘区0]"; break;
case 97: keyName = event.keyCode + "[小键盘区1]"; break;
case 98: keyName = event.keyCode + "[小键盘区2]"; break;
case 99: keyName = event.keyCode + "[小键盘区3]"; break;
case 100: keyName = event.keyCode + "[小键盘区4]"; break;
case 101: keyName = event.keyCode + "[小键盘区5]"; break;
case 102: keyName = event.keyCode + "[小键盘区6]"; break;
case 103: keyName = event.keyCode + "[小键盘区7]"; break;
case 104: keyName = event.keyCode + "[小键盘区8]"; break;
case 105: keyName = event.keyCode + "[小键盘区9]"; break;
case 106: keyName = event.keyCode + "[*]"; break;
case 107: keyName = event.keyCode + "[+]"; break;
case 109: keyName = event.keyCode + "[-]"; break;
case 110: keyName = event.keyCode + "[.]"; break;
case 111: keyName = event.keyCode + "[/]"; break;
case 112: keyName = event.keyCode + "[F1]"; break;
case 113: keyName = event.keyCode + "[F2]"; break;
case 114: keyName = event.keyCode + "[F3]"; break;
case 115: keyName = event.keyCode + "[F4]"; break;
case 116: keyName = event.keyCode + "[F5]"; break;
case 117: keyName = event.keyCode + "[F6]"; break;
case 118: keyName = event.keyCode + "[F7]"; break;
case 119: keyName = event.keyCode + "[F8]"; break;
case 120: keyName = event.keyCode + "[F9]"; break;
case 121: keyName = event.keyCode + "[F10]"; break;
case 122: keyName = event.keyCode + "[F11]"; break;
case 123: keyName = event.keyCode + "[F12]"; break;
case 124: keyName = event.keyCode + "[F13]"; break;
case 125: keyName = event.keyCode + "[F14]"; break;
case 126: keyName = event.keyCode + "[F15]"; break;
case 127: keyName = event.keyCode + "[F16]"; break;
case 128: keyName = event.keyCode + "[F17]"; break;
case 129: keyName = event.keyCode + "[F18]"; break;
case 130: keyName = event.keyCode + "[F19]"; break;
case 131: keyName = event.keyCode + "[F20]"; break;
case 132: keyName = event.keyCode + "[F21]"; break;
case 133: keyName = event.keyCode + "[F22]"; break;
case 134: keyName = event.keyCode + "[F23]"; break;
case 135: keyName = event.keyCode + "[F24]"; break;
case 136: keyName = event.keyCode + "[Num_Lock]"; break;
case 137: keyName = event.keyCode + "[Scroll_Lock]"; break;
case 144: keyName = event.keyCode + "[NumLock]"; break;
case 145: keyName = event.keyCode + "[ScrollLock]"; break;
case 186: keyName = event.keyCode + "[;]"; break;
case 187: keyName = event.keyCode + "[=]"; break;
case 188: keyName = event.keyCode + "[,]"; break;
case 189: keyName = event.keyCode + "[-]"; break;
case 190: keyName = event.keyCode + "[.]"; break;
case 191: keyName = event.keyCode + "[/]"; break;
case 192: keyName = event.keyCode + "[`]"; break;
case 210: keyName = event.keyCode + "[plusminus hyphen macron]"; break;
case 211: keyName = event.keyCode + "[]"; break;
case 212: keyName = event.keyCode + "[copyright registered]"; break;
case 213: keyName = event.keyCode + "[guillemotleft guillemotright]"; break;
case 214: keyName = event.keyCode + "[masculine ordfeminine]"; break;
case 215: keyName = event.keyCode + "[ae AE]"; break;
case 216: keyName = event.keyCode + "[cent yen]"; break;
case 217: keyName = event.keyCode + "[questiondown exclamdown]"; break;
case 218: keyName = event.keyCode + "[onequarter onehalf threequarters]"; break;
case 219: keyName = event.keyCode + "[[]"; break;
case 220: keyName = event.keyCode + "[//]"; break;
case 221: keyName = event.keyCode + "[]]"; break;
case 222: keyName = event.keyCode + "[']"; break;
case 227: keyName = event.keyCode + "[multiply division]"; break;
case 228: keyName = event.keyCode + "[acircumflex Acircumflex]"; break;
case 229: keyName = event.keyCode + "[ecircumflex Ecircumflex]"; break;
case 230: keyName = event.keyCode + "[icircumflex Icircumflex]"; break;
case 231: keyName = event.keyCode + "[ocircumflex Ocircumflex]"; break;
case 232: keyName = event.keyCode + "[ucircumflex Ucircumflex]"; break;
case 233: keyName = event.keyCode + "[ntilde Ntilde]"; break;
case 234: keyName = event.keyCode + "[yacute Yacute]"; break;
case 235: keyName = event.keyCode + "[oslash Ooblique]"; break;
case 236: keyName = event.keyCode + "[aring Aring]"; break;
case 237: keyName = event.keyCode + "[ccedilla Ccedilla]"; break;
case 238: keyName = event.keyCode + "[thorn THORN]"; break;
case 239: keyName = event.keyCode + "[eth ETH]"; break;
case 240: keyName = event.keyCode + "[diaeresis cedilla currency]"; break;
case 241: keyName = event.keyCode + "[agrave Agrave atilde Atilde]"; break;
case 242: keyName = event.keyCode + "[egrave Egrave]"; break;
case 243: keyName = event.keyCode + "[igrave Igrave]"; break;
case 244: keyName = event.keyCode + "[ograve Ograve otilde Otilde]"; break;
case 245: keyName = event.keyCode + "[ugrave Ugrave]"; break;
case 246: keyName = event.keyCode + "[adiaeresis Adiaeresis]"; break;
case 247: keyName = event.keyCode + "[ediaeresis Ediaeresis]"; break;
case 248: keyName = event.keyCode + "[idiaeresis Idiaeresis]"; break;
case 249: keyName = event.keyCode + "[odiaeresis Odiaeresis]"; break;
case 250: keyName = event.keyCode + "[udiaeresis Udiaeresis]"; break;
case 251: keyName = event.keyCode + "[ssharp question backslash]"; break;
case 252: keyName = event.keyCode + "[asciicircum degree]"; break;
case 253: keyName = event.keyCode + "[3 sterling]"; break;
case 254: keyName = event.keyCode + "[Mode_switch]"; break;
//case 255:keyName = event.keyCode+"[Power]";break;
case 255: keyName = event.keyCode + "[Wake]"; break;
default: keyName = event.keyCode + "[" + String.fromCharCode(event.keyCode) + "]"; break;
}
if ((event.shiftKey) && (event.keyCode != 16)) { keyName = event.keyCode + "[Shift] + " + keyName; }
if ((event.altKey) && (event.keyCode != 18)) { keyName = event.keyCode + "[Alt] + " + keyName; }
if ((event.ctrlKey) && (event.keyCode != 17)) { keyName = event.keyCode + "[Ctrl] + " + keyName; }
alert(keyName);
}
}
</script>
</body>
</html>
返回上层目录
事件对象常用坐标属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
height: 2000px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
document.onclick = function(e) {
var e = e || event;
/* client 可视区域的坐标*/
console.log("client" + e.clientX + ":" + e.clientY);
/* page 以文档页面左上角为参考*/
console.log("page" + e.pageX + ":" + (e.pageY - document.documentElement.scrollTop));
/* 鼠标离电脑屏幕的坐标*/
console.log(e.screenX + ":" + e.screenY);
}
var oDiv = document.querySelector("div");
oDiv.onmouseover = function(e) {
var e = e || event;
console.log(e.offsetX + ":" + e.offsetY);
}
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/ac870e45c6091a4f1f48c388f5a75d94.png)
返回上层目录
- 网页可见区域宽: document.body.clientWidth;
- 网页可见区域高: document.body.clientHeight;
- 网页可见区域宽: document.body.offsetWidth (包括边线的宽);
- 网页可见区域高: document.body.offsetHeight (包括边线的宽);
- 网页正文全文宽: document.body.scrollWidth;
- 网页正文全文高: document.body.scrollHeight;
- 网页被卷去的高: document.body.scrollTop;
- 网页被卷去的左: document.body.scrollLeft;
- 网页正文部分上: window.screenTop;
- 网页正文部分左: window.screenLeft;
- 屏幕分辨率的高: window.screen.height;
- 屏幕分辨率的宽: window.screen.width;
- 屏幕可用工作区高度: window.screen.availHeight;
- 屏幕可用工作区宽度:window.screen.availWidth;
返回上层目录
图片跟随
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img {
position: absolute;
}
</style>
</head>
<body>
<img src="love.jpg" width="120" alt="">
<script type="text/javascript">
var oImg = document.querySelector("img");
document.onmousemove = function(e) {
var e = e || event;
var x = e.pageX;
var y = e.pageY;
oImg.style.left = x - oImg.width/2 + "px";
oImg.style.top = y -oImg.height/2 + "px";
}
</script>
</body>
</html>
返回上层目录
全选与取消
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js-2</title>
<script>
function checkIds() {
var box = document.getElementsByName("ids");
if (box[0].checked) {
for (var i = 0; i < box.length; i++) {
box[i].checked = true;
}
document.getElementById("btn").disabled = "";
} else {
for (var i = 0; i < box.length; i++) {
box[i].checked = false;
}
document.getElementById("btn").disabled = "disabled";
}
}
//监听数据的checkbox的单击事件
function checkOne() {
//第一个判断上面的全选按钮是否需要打勾勾
//第二个判断下面的删除的按钮是否要开启
var result = false;//默认全部选择
var box = document.getElementsByName("ids");
for (var i = 1; i < box.length; i++) {
if (box[i].checked == false) {
result = true;//至少有一个没有选中我的目的达到了,全选的按钮不能打勾勾
break;
}
}
//全选的按钮不能打勾勾
if (result) {
box[0].checked = false;
} else {
box[0].checked = true;
}
//接着判断在整个数据中是否至少有一个数据选中
var flag = false;
for (var i = 1; i < box.length; i++) {
if (box[i].checked) {
flag = true;
break;
}
}
if (flag) {
document.getElementById("btn").disabled = "";
} else {
document.getElementById("btn").disabled = "disabled";
}
}
</script>
</head>
<body>
<table border="1" width="300" height="300" align="center">
<tr>
<td width="100">
<input type="checkbox" name="ids" onclick="checkIds();">选中/取消
</td>
<td>账号</td>
<td>姓名</td>
</tr>
<tr>
<td><input type="checkbox" name="ids" value="1" onclick="checkOne();"></td>
<td>admin</td>
<td>张三</td>
</tr>
<tr>
<td><input type="checkbox" name="ids" value="2" onclick="checkOne();"></td>
<td>admin1</td>
<td>李四</td>
</tr>
<tr>
<td><input type="checkbox" name="ids" value="3" onclick="checkOne();"></td>
<td>admin2</td>
<td>王五</td>
</tr>
<tr>
<td colspan="3" align="center"><input type="button" value="删除" disabled="disabled" id="btn"></td>
</tr>
</table>
</body>
</html>
返回上层目录
全选与取消(带反选框)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js-2</title>
<script>
function checkIds() {
var box = document.getElementsByName("ids");
if (box[0].checked) {
for (var i = 0; i < box.length; i++) {
box[i].checked = true;
}
box[1].checked = false;
document.getElementById("btn").disabled = "";
} else {
for (var i = 0; i < box.length; i++) {
box[i].checked = false;
}
document.getElementById("btn").disabled = "disabled";
}
}
//监听数据的checkbox的单击事件
function checkOne() {
var box = document.getElementsByName("ids");
box[1].checked = false;
selectCheckOne();
}
function selectCheckOne() {
//第一个判断上面的全选按钮是否需要打勾勾
//第二个判断下面的删除的按钮是否要开启
var result = false;//默认全部选择
var box = document.getElementsByName("ids");
for (var i = 2; i < box.length; i++) {
if (box[i].checked == false) {
result = true;//至少有一个没有选中我的目的达到了,全选的按钮不能打勾勾
break;
}
}
//全选的按钮不能打勾勾
if (result) {
box[0].checked = false;
} else {
box[0].checked = true;
}
//接着判断在整个数据中是否至少有一个数据选中
var flag = false;
for (var i = 2; i < box.length; i++) {
if (box[i].checked) {
flag = true;
break;
}
}
if (flag) {
document.getElementById("btn").disabled = "";
} else {
document.getElementById("btn").disabled = "disabled";
}
}
//反选框操作
function selectInvert() {
var box = document.getElementsByName("ids");
for (var i = 2; i < box.length; i++) {
box[i].checked = !box[i].checked;
}
selectCheckOne();
}
</script>
</head>
<body>
<table border="1" width="300" height="300" align="center">
<tr>
<td width="100">
<input type="checkbox" name="ids" onclick="checkIds();">选中/取消
<input type="checkbox" name="ids" onclick="selectInvert();">反选
</td>
<td>账号</td>
<td>姓名</td>
</tr>
<tr>
<td><input type="checkbox" name="ids" value="1" onclick="checkOne();"></td>
<td>admin</td>
<td>张三</td>
</tr>
<tr>
<td><input type="checkbox" name="ids" value="2" onclick="checkOne();"></td>
<td>admin1</td>
<td>李四</td>
</tr>
<tr>
<td><input type="checkbox" name="ids" value="3" onclick="checkOne();"></td>
<td>admin2</td>
<td>王五</td>
</tr>
<tr>
<td colspan="3" align="center"><input type="button" value="删除" disabled="disabled" id="btn"></td>
</tr>
</table>
</body>
</html>
返回上层目录
鼠标跟随一串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css">
<style type="text/css">
div {
color: green;
font-size: 18px;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="fa fa-leaf" style="left:340px;top:172px"></div>
<div class="fa fa-leaf" style="left:172px;top:340px"></div>
<div class="fa fa-leaf" style="left:69px;top:272px"></div>
<div class="fa fa-leaf" style="left:69px;top:272px"></div>
<div class="fa fa-leaf" style="left:75px;top:275px"></div>
<div class="fa fa-leaf" style="left:77px;top:275px"></div>
<div class="fa fa-leaf" style="left:81px;top:290px"></div>
<div class="fa fa-leaf" style="left:83px;top:290px"></div>
<div class="fa fa-leaf" style="left:85px;top:335px"></div>
<div class="fa fa-leaf" style="left:85px;top:428px"></div>
<div class="fa fa-leaf" style="left:75px;top:508px"></div>
<div class="fa fa-leaf" style="left:78px;top:172px"></div>
<script type="text/javascript">
// 找到所有叶子
var divs = document.querySelectorAll("div");
document.onmousemove = function(e) {
var e = e || event;
// 设置第一个叶子位置为鼠标位置
divs[0].style.left = e.pageX + "px";
divs[0].style.top = e.pageY + "px";
for (var i = divs.length - 1; i > 0; i--) {
divs[i].style.left = divs[i - 1].style.left;
divs[i].style.top = divs[i - 1].style.top;
}
}
</script>
</body>
</html>
返回上层目录
验证码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<form action="">
<table width="449" height="530" border="1" align='center'>
<tr>
<td colspan="2" align="center">用户名注册</td>
</tr>
<tr>
<td width="116" align="right">姓名:</td>
<td width="323"><label>
<input type="text" name="" id="name" />
</label></td>
</tr>
<tr>
<td width="116" align="right">性别:</td>
<td width="323"><label>
<input type="radio" name="sex" id="" />男
<input type="radio" name="sex" id="" />女
</label></td>
</tr>
<tr>
<td align="right">年龄:</td>
<td><label>
<input type="text" name="" id="age" />
</label></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><label>
<input type="password" name="" id="pwd" />
</label></td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td><label>
<input type="password" name="" id="qpwd" />
</label></td>
</tr>
<tr>
<td align="right">手机:</td>
<td><label>
<input type="text" name="" id="tel" />
</label></td>
</tr>
<tr>
<td align="right">QQ:</td>
<td><label>
<input type="text" name="" id="qq" />
</label></td>
</tr>
<tr>
<td align="right">邮箱:</td>
<td><label>
<input type="text" name="" id="email" />
</label></td>
</tr>
<tr>
<td align="right">邮编:</td>
<td><label>
<input type="text" name="" id="eml" />
</label></td>
</tr>
<tr>
<td align="right">身份证:</td>
<td><label>
<input type="text" name="" id="sname" />
</label></td>
</tr>
<tr>
<td align="right">验证码:</td>
<td><label>
<input type="text" />
<span id="yz"
style=" background:url(1.png) -10px -15px;width:80px;font-style: italic; height: 20px;border: 1px solid black;display: inline-block;"></span>
<a href="javascript:;" id='btn'>看不清</a>
</label></td>
</tr>
<tr>
<td align="right">爱好:</td>
<td><label>
<input type="checkbox" name="a" id="c1">
足球
<input type="checkbox" name="a" id="c2">
篮球
<input type="checkbox" name="a" id="c3">
排球
<input type="checkbox" name="a" id="c4">
网球
</label></td>
</tr>
<tr>
<td height="36" colspan="2" align="center"><label>
<input type="submit" value="注册" />
</label></td>
</tr>
</table>
</form>
</body>
</html>
<script>
function rand(min, max) {
return Math.round(Math.random() * (max - min)) + min;
}
function $(id) {
return document.getElementById(id);
}
// 验证码 数字和字母组成6位 0-9 a-zA-Z
/*
"0" ------ 48 "9"------ 57 48-57
"a"-------97 "z"------122 97-122
"A"-------65 "Z"------90 65-90
48-122
*/
function yzm() {
// 循环六次 每次产生一个随机的数字或字母
var str = "";
for (var i = 0; i < 6; i++) {
var code = rand(48, 122);
if (code >= 48 && code <= 57 || code >= 65 && code <= 90 || code >= 97 && code <= 122) {
str += String.fromCharCode(code);
} else {
i--;
}
}
return str;
}
$("yz").innerHTML = yzm();
$("btn").onclick = function() {
$("yz").innerHTML = yzm();
}
</script>