简单的小程序

作者: 相遇无眠 | 来源:发表于2018-08-20 21:52 被阅读0次

简单的小程序
微信小程序开发平台招商加盟
[小程序]简单上手小程序
微信小程序唤起其他微信小程序 / 移动应用App唤起小程序
如何找到微信小程序
微信出了个史上最简单粗暴的小程序，你还不知道？
小程序简易弹框
小程序介绍
关于小程序
小程序实操总结之设计篇

先创建一个盒子。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: 900;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id='box'>
            
        </div>
    </body>
</html>

里面盒子的属性（width：宽度；height：高度；text-align：文本的样式，可以让文字在水平方向靠左、靠右、居中；line-height：行高，可以设置文字在垂直方向的位置，通过调节像素实现）可以在上面的css里面进行更改。

下面的是JavaScript

以下的是鼠标事件
onmouseenter/onmouseover：鼠标移入
当鼠标移入区域时，网页会进行一些自动操作，下面的代码是当鼠标移入盒子时，盒子中会显示：亲爱的，我爱你。

box.onmouseenter = function(){
            box.innerHTML='亲爱的，我爱你'
    }

onmouseleave/onmouseout：鼠标移出
和鼠标移入意思刚好相反，这个事件是在鼠标移出区域时，网页才会做出反应。下面的是我的一个示例：

box.onmouseleave = function(){
        box.innerHTML = '对不起，开玩笑'
    }

onmousemove：鼠标移动
这个是在给定区域内鼠标移动时，网页会做出反应，
下面是我的一个示例：

box.onmousemove = function(){
                    var a = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
                    var color = '#'
                    for(var i=0;i<6;i++){
                        var j= parseInt(Math.random()*16)
                        color += a[j]
                    }
                    box.style.background = color
                }

请妥善使用！

好了以上的就是我今天想要分享的！
最后我给出一个完整的代码，可以实现以上的功能。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: 900;
                border: 1px solid black;
            }
        </style>
        
        
        
        
        
        <script>
            onload = function(){
                box.onmouseenter = function(){
                    box.innerHTML='亲爱的，我爱你'
                }
                box.onmouseleave = function(){
                    box.innerHTML = '对不起，开玩笑'
                }
                box.onmousemove = function(){
                    var a = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
                    var color = '#'
                    for(var i=0;i<6;i++){
                        var j= parseInt(Math.random()*16)
                        color += a[j]
                    }
                    box.style.background = color
                }
            }
        </script>
        
    </head>
    <body>
        <div id='box'>
            
        </div>
    </body>
</html>