大概要实现以下效果
其实是对象说,睡觉前要写一100行代码;
无奈我也不知道些什么,就胡诌了以下的代码;
没有考虑封装,只是单纯敲出来;
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>oop</title>
<style>
#div{
width:100px;
height:100px;
background:yellow;
}
</style>
</head>
<body>
<div id="div">
</div>
<div id="div2">
<label for="op">透明度</label><input type="text" id="op">
<label for="w">宽度</label><input type="text" id="w">
</div>
<button id="tb">点我设置透明度</button>
<button id="tb2">点我设置宽度</button>
<button id="setAll">一键设置</button>
<script>
//获取id
function getById(id) {
return document.getElementById(id)
}
//变化opacity的,不考虑兼容性
var move=function (id,op) {
var tar=getById(id);
setopacity(id,op);
}
//设置opacity的方法;
function setopacity(id,op){
return id.style.opacity=op;
}
//设置id的宽度
function setWidth(id,w){
return getById(id).style.width=w+"px";
}
//获取id的输入值
function getVal(id){
return getById(id).value;
}
//设置按钮点击事件
getById("tb").onclick=function(){
move(getById("div"),getVal("op"))
}
getById("tb2").onclick=function(){
setWidth("div",getVal("w"))
}
getById("setAll").onclick=function(){
if(getVal("op")){
move(getById("div"),getVal("op"));
}
if(getVal("w")){
setWidth("div",getVal("w"))
}
}
</script>
</body>
</html>
总结:
对象说:你写了一些没用的。。。。可以睡觉了