JS，事件试题，在实践中应用，非常详细！！

最新推荐文章于 2023-03-11 17:48:40 发布

数次拒绝刘亦菲

最新推荐文章于 2023-03-11 17:48:40 发布

阅读量290

点赞数

分类专栏： JS试题 JS 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_62951223/article/details/127953169

版权

JS 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JS试题

4 篇文章 0 订阅

订阅专栏

当前行变色

<!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>
        table {
            width: 600px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>年份</th>
                <th>最低分</th>
                <th>省控线</th>
                <th>录取批次</th>             
             </tr>
        </thead>
        <tbody>
            <tr>
                <td>2021</td>
                <td>477</td>
                <td>400</td>
                <td>本科二批</td>
               
            </tr>
            <tr>
                <td>2021</td>
                <td>457</td>
                <td>400</td>
                <td>本科二批-其他单列</td>
                
            </tr>
            <tr>
                <td>2021</td>
                <td>449</td>
                <td>400</td>
                <td>本科二批-高收费专业</td>
               
            </tr>
            <tr>
                <td>2020</td>
                <td>497</td>
                <td>418</td>
                <td>本科二批</td>
                
            </tr>
            <tr>
                <td>2020</td>
                <td>466</td>
                <td>418</td>
                <td>本科二批-高收费专业</td>
               
            </tr>
            <tr>
                <td>2020</td>
                <td>427</td>
                <td>180</td>
                <td>专科批</td>
                
               
            </tr>
        </tbody>
    </table>
    <script>
        var tr = document.querySelector('tbody').querySelectorAll('tr');
        for(var i=0;i<tr.length;i++){
            tr[i].onmouseover = function(){
                    this.className = 'bg';
                }
            tr[i].onmouseout = function(){    
                    this.className = 'null';
            }      
        }
    </script>
</body>

</html>

在 tr[i]的鼠标事件中用this，而不是tr[i]。
调用css样式，用className = ‘名称’;
鼠标经过用 onmouseover
鼠标移出用 onmouseout

表单提交

<!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>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        
        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }
        
        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        var inp = document.querySelector('input');
        var p = document.querySelector('p');
        inp.onblur = function(){
           // console.log(inp.value.length);  看一下是不是输入的长度
            if((inp.value.length <6&&inp.value.length>0) || inp.value.length>16){
                p.className = 'wrong';
                p.style.display = 'inline-block';
              
            }
            else if(inp.value.length >=6 && inp.value.length<=16){
                p.className = 'right';
                p.style.display = 'inline-block';
              
            }else {
                p.className = 'message';
                p.style.display = 'inline-block'; 
            }
        }
    </script>
</body>

</html>

光标移开用onblur
如果不知道length是否是自己想要的样子，可以输出一下
表格的长度是 .value.length
p.style.display = ‘inline-block’; 转换为块元素，显示到一行

分享功能

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>使用事件冒泡实现"分享"功能</title>
  <style>
    #div1 {
      width: 80px;
      height: 150px;
      border: black 1px solid;
      position: absolute;
      left: -82px;
      top: 100px;
    }

    #div2 {
      width: 30px;
      height: 70px;
      position: absolute;
      right: -30px;
      top: 45px;
      background: black;
      color: white;
      text-align: center;
    }

    ul {
      list-style: none;
      padding: 0 20px;
    }

    img {
      width: 36px;
      height: 39px;
    }
  </style>

</head>

<body>
  <div id="div1">
    <ul>
      <a href="#">
        <li><img src="images/qq.png" /></li>
      </a>
      <a href="#">
        <li><img src="images/sina.png" /></li>
      </a>
      <a href="#">
        <li><img src="images/renren.png" /></li>
      </a>
    </ul>
    <div id="div2">分享到</div>
  </div>
  <script>
    var div = document.getElementById('div1');
    
    div.addEventListener('mouseover',function(){
      div.style.top = '100px';
      div.style.left = '0';
    })
    div.addEventListener('mouseout',function(){
      div.style.left = '-80px';
      div.style.top = '100px';
    })
  </script>
</body>
</html>

由于三个图片的位置已经确定到 div2 处，所以不需要获取 ul 的鼠标事件，直接获得div1的鼠标事件即可
移出鼠标时，把分享界面给顶出去(left = -80px)，但是要保留 div2

星座运势

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 320px;
            height: 260px;
            padding-left: 30px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }
        
        .box-top {
            height: 35px;
            font: 400 18px/35px "microsoft yahei";
            color: #62b4cc;
        }
        
        .box-middle {
            height: 50px;
            padding-left: 60px;
            margin: 10px 0;
            background: url(images/xingzuo.png) no-repeat;
        }
        
        select {
            float: left;
        }
        
        .box-star {
            float: left;
            margin-top: 5px;
            width: 180px;
        }
        
        .box-bottom {
            padding-right: 30px;
        }
        
        .icon1 {
            display: inline-block;
            width: 80px;
            height: 13px;
            background: url(images/star.png) no-repeat;
        }
        
        .icon2 {
            display: inline-block;
            width: 80px;
            height: 13px;
            background: url(images/star.png) no-repeat 0 -31px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-top">
            星座运势
        </div>
        <div class="box-middle" id="xingZuo">
            <select name="" id="sel">
                <option value="0">白羊座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
                <option value="1">水瓶座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
                <option value="2">双子座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
            </select>
            <div class="box-star">今日运势:
                <span class="icon1">
                    <span class="icon2" id="star"></span>
                </span>
            </div>
        </div>
        <div class="box-bottom" id="content">
            今天工作运势相当的好，但要小心破财，要注意危言耸听的宗教信仰而花费了不理智的钱财，或是身边...[详细]
        </div>
    </div>
    <script>
        var div = document.querySelector('.box-middle');
        var span = document.querySelector('.icon2');
        var content = document.querySelector('.box-bottom');
        sel.addEventListener('change',function(){
            if(this.value == 0){
                div.style.backgroundPositionY = 0+'px';
                span.style.backgroundPositionY = -31+'px';
                div
            }else if(this.value == 1){
                div.style.backgroundPositionY = -50+'px';
                span.style.backgroundPositionY = 0+'px';
                content.innerHTML = '小心倒霉';
            }else if(this.value == 2){
                div.style.backgroundPositionY = -100+'px';
                span.style.backgroundPositionY = -31+'px';
                content.innerHTML = '走运了';
            }
        })
    </script>
</body>
</html>

该题给了星座图片和运势后面的星图，所以只需要通过点击改变星座来改变星座图片和运势星图片，同时下方的字也要改变

因为图片在CSS样式中设置，所以获取下拉菜单元素，获取星图的元素，获取底部字句的元素，获取星座图。(星座图：box-middle，星图通过 icon1和icon2进行移动)
下拉菜单通过onchange来进行操作，同时下拉菜单的值是this.value
在三个星座的option标签中value值为0，1，2，所以this.value 的取值为0、1、2
然后通过 div.style.backgroundPositionY 移动图片(因为图片是竖图)改变星座图，通过span.style.backgroundPositionY 改变星图，通过content.innerHTML改变底部文字。

更改换肤

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <select id="sel">
            <option value="1">祝融</option>
            <option value="2">羲和</option>
            <option value="3">天和</option>
        </select>
        <script>
            var sel = document.getElementById('sel');
            var bd = document.body;
            // 方法1
            /*sel.onchange = function(){
                switch(sel.value){
                    case "1":
                        bd.style.backgroundImage = "url(1.jpg)";
                        break;
                    case "2":
                        bd.style.backgroundImage = "url(2.jpg)";
                        break;
                    case "3":
                        bd.style.backgroundImage = "url(3.jpg)";
                        break;
                }
            }*/
            // 方法2
            bd.style.backgroundImage = "url(1.jpg)";
            sel.addEventListener('change',function(){
                if(sel.value == 1){
                    bd.style.backgroundImage = "url(1.jpg)";
                }else if(sel.value == 2){
                    bd.style.backgroundImage = "url(2.jpg)";
                }else if(sel.value == 3){
                    bd.style.backgroundImage = "url(3.jpg)";
                }
            })
        </script>
    </body>
    </html>

因为是下拉菜单，所以用 onchange，option标签中value值为1，2，3，所以this.value 值有1，2，3

通过 元素名.style.backgroundImage = "url(图片地址)"; 来改变图片