js关于鼠标操作的小游戏

题目:

有一块空白区域, 当鼠标移动到区域内,显示"亲爱的, 我爱你", 当我鼠标移开的时候,显示"对不起, 开玩笑", 当我鼠标不停的在区域内移动的时候, 变换随机颜色(随机十六进制的颜色:#FFFFFF)




1.<body>内内容

创建一个区域

<div id="box"></box>



2.格式设置

#box{

width: 300px;  //设置区域宽度

height: 300px;  //设置区域高度

line-height: 300px;  //设置区域内字体高度——为了让显示的字在区域内居中

border: 1px solid black;  //设置边框

font-size: 30px;   //设置字体大小

text-align: center;  //字体居中

}


3.js设置

<script>

onload = function(){       //因为<script>写在<head>内部,因此需要调用onload,表示在加载完成后调用

       box.onmouseover = function(){  //鼠标移入操作函数,当鼠标移入后,在区域内显示“亲爱的,我爱你”

                box.innerHTML='亲爱的,我爱你'

       }

     box.onmouseleave = function(){  //鼠标移出操作,当鼠标离开区域,在区域内显示“对不起,开玩笑”

           box.innerHTML = '对不起,开玩笑'

     }

    box.onmousemove = function(){  //区域内,鼠标移动操作,随机改变颜色

        var ye=[0,,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']     //定义数组,保存十六进制

         var str = '#';     //定义字符串str,用来设置颜色,此处定义颜色开头的‘#’

         var j = 0

         for(var i = 0;i<6;i++){     // 循环6次,将字符串str补充完整

             j = parseInt(Math.random()*16)    // j为[0,15]之间的随机一个整数

            str += ye[j]  //根据获取的j来往str中追加

         }

         box.style.background = str console.log(str)   //改变区域颜色

    }

}

</script>



4.运行效果

a.鼠标在区域内


鼠标在区域内

b.鼠标移出区域


鼠标移出区域
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容