【Web】Web-API（No.62）DOM案例（一）随机更改盒子透明度

最新推荐文章于 2021-12-13 21:17:48 发布

Sherry Lupus

最新推荐文章于 2021-12-13 21:17:48 发布

阅读量278

点赞数

分类专栏： Web-API 文章标签： Web API

本文链接：https://blog.csdn.net/qq_43251850/article/details/99410318

版权

Web-API 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

随机更改盒子透明度

在这里插入图片描述
需要素材点击图片联系我或私信、评论

效果图

在这里插入图片描述

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

// 通过id名获取的元素
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){
        //隐式布尔类型转换 --->true
        //如果支持
        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;
}