JavaScript

来源：互联网发布：mac出现ds store文件编辑：程序博客网时间：2024/06/08 15:34

自定义开关 (onOff)

点击事件的俩个样式

<!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>    <style media="screen">        li {            float: left;            width: 100px;            height: 100px;            margin: 10px;            background-color: blue;        }        .active {            background-color: red;        }    </style></head><body>    <ul>        <li></li>        <li></li>        <li></li>    </ul>    <script type="text/javascript">        var aLi = document.getElementsByTagName('li');        for (var i = 0; i < aLi.length; i++) {            aLi[i].onOff = true;            aLi[i].onclick = function () {                if (this.onOff) {                    this.className = 'active';                }else {                    this.className = '';                }                this.onOff = !this.onOff;            }        }    </script></body></html>

自定义数组（arr、num）

求数组用num
我觉得有点类似于轮播图的按钮功能

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <input type="button" value="0">    <input type="button" value="0">    <input type="button" value="0">    <script type="text/javascript">        var aBtn = document.getElementsByTagName('input');        var arr = ['A','B','C','D']        for (var i = 0; i < aBtn.length; i++) {            aBtn[i].num = 0;            aBtn[i].onclick = function () {                this.value = arr[this.num];                this.num ++;                if (this.num == arr.length) {                    this.num = 0;                }            }        }    </script></body></html>

自定义索引值（index）

类似于选项卡

<!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>    <input type="button" name="" value="btn1">    <input type="button" name="" value="btn2">    <input type="button" name="" value="btn3">    <p>a</p>    <p>aa</p>    <p>a</p>    <script type="text/javascript">        var aBtn = document.getElementsByTagName('input');        var aP = document.getElementsByTagName('p');        var arr = ['莫涛',' 张森','杜鹏']        for (var i = 0; i < aBtn.length; i++) {            aBtn[i].index = i;  //自定义属性（索引值）            aBtn[i].onclick = function () {                this.value = arr[this.index];                aP[this.index].innerHTML = arr[this.index];            }        }    </script></body></html>

数组 + 取余の小练习

鼠标进入显示灰色
鼠标移开显示原本颜色

<!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>    <style media="screen">        li {            width: 500px;            height: 30px;            margin-bottom: 3px;        }    </style></head><body>    <ul>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul>    <script type="text/javascript">        var aLi = document.getElementsByTagName('li');        var arr = ['red','yellow','blue']        var str = '';        for (var i = 0; i < aLi.length; i++) {            aLi[i].style.background = arr[i%arr.length];            aLi[i].onmouseover = function () {                str = this.style.background;   //储存颜色                this.style.background = 'gray';  //加双引号            }            aLi[i].onmouseout = function () {                this.style.background = str;            }        }    </script></body></html>

阅读全文

0 0