【Web】Web-API（No.63）DOM案例（二）随机抽奖_dom 随机抽奖抽到undefined-CSDN博客

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

随机抽奖

效果图

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机抽奖</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-image: url(img/big2.jpg);
            background-size: cover;
        }

        #span {
            margin:  250px auto;
            display: block;
            width: 200px;
            height: 70px;
            line-height: 70px;
            border: 2px solid #cccccc;
            border-radius: 7px;
            color: #aaaaaa;
            font-weight: 700;
            text-align: center;
            cursor: pointer;
            background-color: #abcdef;
        }
    </style>
</head>
<body>
<span id="span">点击抽奖</span>
<script src="common.js"></script>
<script>
    my$("span").onclick = function ()
    {
        var number = Math.floor(Math.random()*20);
        if (number == 0) {
            alert("恭喜获得特等奖！！！！");
        } else if (number>0 && number<=2) {
            alert("恭喜获得一等奖！！！");
        } else if (number>2 && number<=5) {
            alert("恭喜获得二等奖！！");
        }else if (number>5 && number<=10) {
            alert("恭喜获得三等奖！");
        }else {
            alert("谢谢惠顾~再接再厉！");
        }
        my$("span").style.backgroundColor = getRandomColor();
    }
</script>
</body>
</html>

common.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;
}