利用开关与for实现的小例子

见面时的呼吸都曾反复练习

于 2015-04-05 21:08:23 发布

阅读量451

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript积跬步至千里文章标签： javascript

本文链接：https://blog.youkuaiyun.com/wstpa/article/details/44891225

JavaScript积跬步至千里专栏收录该内容

39 篇文章

订阅专栏

本文通过简单的HTML和JavaScript代码实现了一个动态变化背景颜色的列表效果。列表项会在鼠标悬停及点击时改变背景颜色，并且通过布尔值控制状态切换。此示例展示了基本的DOM操作、事件监听器的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>以最简单的代码实现需求</title>

</head>
<body>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script type="text/javascript">
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var str="";
for (var i = 0; i < aLi.length; i++) {
    aLi[i].bBtn=true;
    if(i%3==0){
        aLi[i].color="red";
        aLi[i].style.background="red";
    }else if(i%3==1){
        aLi[i].color="yellow";
        aLi[i].style.background="yellow";
    }else{
        aLi[i].color="blue";
        aLi[i].style.background="blue";
    }
    aLi[i].onmouseover=function(){
        if (this.bBtn) {
            this.style.background="green";
        };

    }
    aLi[i].onmouseout=function(){
        if (this.bBtn) {
            this.style.background=this.color;
        };

    }
    aLi[i].onclick=function(){
        if(this.bBtn){
            this.style.background="#000";
            this.bBtn=false;
        }else{
            this.style.background=this.color;
            this.bBtn=true;
        }
    }
};
</script>   
</body>
</html>