JavaScript习题（鼠标滑过的区域改变颜色，颜色可以叠加））

于 2020-05-25 21:03:54 发布
阅读量279 收藏 2
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46611729/article/details/106342105
版权

每滑过一次，叠加一次颜色

以下是JavaScript页面的代码

var ul = document.getElementsByTagName('ul')[0];
ul.onmouseover = function (e) {
  var event = e || window.event;//防止在不同浏览器运行有混乱
  var target = event.target || event.srcElement;//防止在不同浏览器运行有混乱
  target.style.backgroundColor = 'rgb(0,255,'+ target.getAttribute("img-data")+')';
  target.setAttribute('img-data',parseInt(target.getAttribute('img-data')) + 6);
}

以下是HTML页面的代码

<html>
  <head>
      <meta charst="utf-8"> 
      <title>中国的流浪猫</title>
      <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      li{
        box-sizing:border-box;
        float: right;
        width: 10px;
        height: 10px;
        border: 1px solid black;
      }
      ul{
        list-style: none;
        width: 200px;
        height: 200px;
      }
      </style>     
  </head>
    <body>
     <ul>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
       <li img-data='0'></li>
     </ul>
     <script type="text/javascript" src="lesson.js">
     </script> 
    </body>
</html>
中国的流浪猫
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值