js关于鼠标操作的小游戏

2018-08-20  本文已影响0人  人心难测唯真心不负

题目:

有一块空白区域, 当鼠标移动到区域内,显示"亲爱的, 我爱你", 当我鼠标移开的时候,显示"对不起, 开玩笑", 当我鼠标不停的在区域内移动的时候, 变换随机颜色(随机十六进制的颜色:#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.鼠标移出区域

鼠标移出区域
上一篇下一篇

猜你喜欢

热点阅读