|
有一个有背景颜色的div，我们要改变其透明度，要求不能用html和css来实现，只用js该如何实现呢？下面我用刚学的js中的面向对象跟大家交流一下
一，首先我们先看看用常规的html+css+js的代码
1.html代码：
<body>
??<div?id="box">
??</div>
</body>
2.css代码：
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background: deepskyblue;
position: absolute;
left: 200px;
top: 200px;
opacity: 0.3;
}
</style>
3.JavaScript代码：
<script type="text/javascript">
var obj = document.querySelector("div");
// 鼠标移入,颜色由浅到深
obj.onmouseover = function () {
start(100)；
}
// 鼠标移出 颜色由深到浅
obj.onmouseout = function () {
start(30)；
}
let alpha = 30; // 设置透明度临时值
let times = '';
function start(target) {
// 设置步进值
let speed = target - alpha > 0 ? 1 : -1;
times = setInterval(() => {
// 增加透明度临时值
alpha += speed;
// 临时值等于透明度,则清除定时器
if (alpha == target) clearInterval(times)；
obj.style.opacity = alpha / 100;
}, 30)
}
</script>
二，只用JavaScript实现的代码
<script>
//创建节点
function Box(ele, attr, style, father) {
this.newEle = document.createElement(ele);
this.attr = attr;
this.style = style;
this.father = father || document.body;
this.setAttr();
}
//设置属性
Box.prototype.setAttr = function () {
//Object.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。
Object.assign(this.newEle, this.attr);
// 传递样式才调用
this.style && this.setStyle();
this.append();
};
// 设置style样式
Box.prototype.setStyle = function () {
Object.assign(this.newEle.style, this.style);
}
Box.prototype.append = function () {
this.father.appendChild(this.newEle)
}
new Box('div',
{id: 'box'},
{
width: '200px',
height: '200px',
background: 'red',
opacity: '0.3'
});
//获取节点
var boxObj = document.getElementById('box');
let alpha = 30;// 设置透明度临时值
let times = '';
function changeAlpha(target) {
// 设置步进值
let speed = target - alpha > 0 ? 1 : -1;
//设置定时器
times = setInterval(() => {
// 增加透明度临时值
alpha += speed;
// 临时值等于透明度,则清除定时器
if (alpha == target) clearInterval(times);
boxObj.style.opacity = alpha / 100;
}, 30)
}
// 鼠标移入,颜色由浅到深
boxObj.onmouseover = function () {
changeAlpha(100);
}
// 鼠标移出 颜色由深到浅
boxObj.onmouseout = function () {
changeAlpha(30);
}
</script>
只用javascript的面向对象来做主要是想加深刚刚学的面向对象，熟悉一下节点的增删改查追加等操作，有错误欢迎指出，欢迎大家一起交流学习。
|