随机更改盒子透明度
需要素材点击图片联系我或私信、评论
效果图
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随即更改盒子透明度</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#box{
width: 700px;
height: 500px;
border: 7px solid #cccccc;
margin: 70px auto;
text-align: center;
color: #cccccc;
padding-top: 130px;
font-size: 169px;
font-family: 方正舒体;
}
body {
background-image: url(img/big2.jpg);
background-size: cover;
}
</style>
</head>
<body>
<div id="box">Hello!</div>
<script src="common.js"></script>
<script>
my$("box").onclick = function ()
{
my$("box").style.backgroundColor = getRandomColor();
}
</script>
</body>
</html>
commom.js
function my$(id) {
return document.getElementById(id);
}
function ele$(element) {
return document.getElementsByTagName(element);
}
function setInnerText(element, text) {
if(typeof element.textContent == "undefined"){
console.log(element.textContent+"====");
element.innerText = text;
}else{
console.log(element.textContent);
element.textContent = text;
}
}
function getInnerText(element){
if(element.textContent == undefined){
return element.innerText;
}else{
return element.textContent;
}
}
function getFirstElementChild(parentElement) {
if(parentElement.firstElementChild){
return parentElement.firstElementChild;
}else{
return parentElement.firstChild;
}
}
function addEventListener(element,type,fn){
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on" + type,fn);
}else{
element["on" + type] = fn;
}
}
function getRGB()
{
var opacity = "";
opacity = Math.floor(Math.random()*10)/10;
return opacity;
}
function getRandomColor()
{
var str = "rgba(";
var opacity = "";
for (var i =0;i<3;i++)
{
str+=Math.floor(Math.random() * 255)+",";
}
opacity = Math.floor(Math.random()*10)/10;
str=str+opacity+")";
console.log(str);
return str;
}