JS事件详解

最新推荐文章于 2022-04-14 11:31:32 发布

端脑

最新推荐文章于 2022-04-14 11:31:32 发布

阅读量285

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43776742/article/details/106436684

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

事件

预先定义好的标准行为。比如鼠标单击，鼠标双击。。等等

事件三要素

事件源
事件名称
事件处理程序

js处理事件

事件源.事件 = 事件处理程序
事件源.事件 = function(){ //事件处理函数。事件处理函数必须等事件发生后才执行。 }

onclick事件
onload事件
onmouseover事件
onmouseout事件
onchange事件
onfocus
onblur
键盘事件

事件对象
事件对象常用坐标属性
图片跟随小案例
图标跟随一串
全选与取消
全选与取消（带反选框）
验证码

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>

返回上层目录

网页可见区域宽： 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>

返回上层目录

返回目录

端脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件详解

事件预先定义好的标准行为。比如鼠标单击，鼠标双击。。等等事件三要素事件源事件名称事件处理程序js处理事件事件源.事件 = 事件处理程序事件源.事件 = function(){ //事件处理函数。事件处理函数必须等事件发生后才执行。 }onclick事件onload事件onmouseover事件onmouseout事件onchange事件onfocusonblur键盘事件事件对象事件对象常用坐标属性图片
复制链接

扫一扫

专栏目录