简单的小程序
2018-08-20 本文已影响0人
相遇无眠
先创建一个盒子。
<!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>
