网页更换主题以及绘制图形js代码实现

汪凡

发布于 2019-03-01 02:21:46

1.7K00

代码可运行

文章被收录于专栏：python成长之路python成长之路

运行总次数：0

代码可运行

HTML代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>换肤主题</title>
    <link rel="stylesheet" href="wupifu.css" id="link1">
    <link rel="stylesheet" href="zuotu.css" id="link2">
    <script>
        window.onload = function () {
            var obnt1 = document.getElementById('btn1');
            var obnt2 = document.getElementById('btn2');
            var obnt3 = document.getElementById('btn3');
            var obnt4 = document.getElementById('btn4');
            var obnt5 = document.getElementById('btn5');
            var obnt6 = document.getElementById('btn6');
            var obnt7 = document.getElementById('btn7');
            var obody = document.getElementById('body');
            
            
            setInterval(function(){
                setTimeout(function () { 
                    obody.style.backgroundColor = 'aqua';
                }, 50)
                setTimeout(function () {
                    obody.style.backgroundColor = 'blueviolet';
                }, 100)
                setTimeout(function () {
                    obody.style.backgroundColor = 'gold';
                }, 150)
                setTimeout(function () {
                    obody.style.backgroundColor = 'deeppink';
                }, 200)
                setTimeout(function () {
                    obody.style.backgroundColor = 'green';
                }, 250)
                setTimeout(function () {
                    obody.style.backgroundColor = 'blue';
                }, 300)
                setTimeout(function () {
                    obody.style.backgroundColor = 'blue';
                }, 350)
                obody.style.backgroundColor = 'darksalmon';
            },400)


            obnt1.onclick = function () {
                obody.style.backgroundColor = 'aqua';
            }
            obnt2.onclick = function () {
                obody.style.backgroundColor = 'blueviolet';
            }
            obnt3.onclick = function () {
                obody.style.backgroundColor = 'gold';
            }
            obnt4.onclick = function () {
                obody.style.backgroundColor = 'deeppink';
            }
            obnt5.onclick = function () {
                obody.style.backgroundColor = 'green';
            }
            obnt6.onclick = function () {
                obody.style.backgroundColor = 'blue';
            }
            obnt7.onclick = function () {
                obody.style.backgroundColor = 'darksalmon';
            }

            var osetbtn = document.getElementById('setbtn');
            var obox = document.getElementById('box');

            osetbtn.onclick = function () {
                obox.style.width = document.getElementById('width').value;
                obox.style.height = document.getElementById('height').value;
                obox.style.backgroundColor = document.getElementById('backgroud').value;
                obox.style.border = document.getElementById('border').value;
                obox.style.borderRadius = document.getElementById('borderR').value;
            }
        }
    </script>

    <style>
        #titl {
            width: 840px;
            height: 148px;
            font-family: 'KaiTi';
            background-color: bisque;
            border: 1px solid gray;
            position: relative;
            margin: 0px auto;
        }

        h1 {
            text-align: center;
        }

        #box {
            margin: 0 auto;
        }
    </style>
</head>

<body id="body">
    <div id="titl">
        <h1 style="color: brown">换背景颜色</h1>
        <div id="btnin">
            <button id="btn1"></button>
            <button id="btn2"></button>
            <button id="btn3"></button>
            <button id="btn4"></button>
            <button id="btn5"></button>
            <button id="btn6"></button>
            <button id="btn7"></button>
        </div>
    </div>


    <table id="tb">
        <tr>
            <td>

                <label>宽度：</label>
                <input type="text" value="100px" id="width">
                <br>
                <br>
                <br>
                <label>高度：</label>
                <input type="text" value="100px" id="height">
                <br>
                <br>
                <br>
                <label>图形颜色：</label>
                <!-- <input type="text" value="gold" id="backgroud"> -->
                <select name="" id="backgroud">
                    <option value="red">红色</option>
                    <option value="blue">蓝色</option>
                    <option value="black">黑色</option>
                    <option value="pink">粉色</option>
                    <option value="deeppink">深粉色</option>
                    <option value="hotpink">小粉色</option>
                    <option value="black">黑色</option>
                    <option value="pink">粉色</option>
                    <option value="darkorchid">黑兰花色</option>
                    <option value="darkorange">屎黄色</option>
                    <option value="orangered">橘黄色</option>
                    <option value="gold">金色</option>
                    <option value="yellow">黄色</option>
                    <option value="olive">橄榄色</option>
                    <option value="yellowgreen">黄绿色</option>
                    <option value="greenyellow">绿黄色</option>
                    <option value="lightgreen">轻绿色</option>
                    <option value="deepskyblue">天空蓝</option>
                    <option value="gray">灰色</option>
                    <option value="lightgray">亮灰色</option>
                    <option value="dodgerblue">闪蓝色</option>
                    <option value="chartreuse">黄绿色</option>
                    <option value="palegreen">淡绿色</option>
                </select>
                </select>
                <br>
                <br>
                <br>
                <label>边框：</label>
                <input type="text" value="5px solid #000" id="border">
                <br>
                <br>
                <br>
                <label>圆角：</label>
                <input type="text" value="0px" id="borderR">
                <br>
                <br>
                <input type="button" value="设 置" id="setbtn">
            </td>
            <td>
                <div id="box"></div>
            </td>
        </tr>
    </table>
</body>

</html>

CSS代码实现：

wupifu.css

#btn1{
    width: 100px;
    height: 50px;
    background-color: aqua;
    border-radius: 25px;
    position: absolute;
    left: 37px; 
}

#btn2{
    width: 100px;
    height: 50px;
    background-color: blueviolet;
    border-radius: 25px;
    position: absolute;
    left: 150px; 
}

#btn3{
    width: 100px;
    height: 50px;
    background-color: gold;
    border-radius: 25px;
    position: absolute;
    left: 260px; 
}

#btn4{
    width: 100px;
    height: 50px;
    background-color: deeppink;
    border-radius: 25px;
    position: absolute;
    left: 369px; 
}
#btn5{
    width: 100px;
    height: 50px;
    background-color: green ;
    border-radius: 25px;
    position: absolute;
    left: 477px; 
}
#btn6{
    width: 100px;
    height: 50px;
    background-color: blue ;
    border-radius: 25px;
    position: absolute;
    left: 585px; 
}
#btn7{
    width: 100px;
    height: 50px;
    background-color: darksalmon ;
    border-radius: 25px;
    position: absolute;
    left: 693px; 
}

zuotu.css

#tb {
    background-color: antiquewhite;
    border: 1px solid black;
    border-collapse: collapse;
    margin: 100px auto;
}

#tb td {
    width: 500px;
    height: 400px;
    border: 1px solid black;
    vertical-align: center;
    text-align: center;
}

#setbtn {
    width: 100px;
    height: 40px;
    color: white;
    background-color: #0181cc;
}

label {
    font-size: 20px;
    font-family: 'kaiti';
}

input {
    height: 20px;
    font-family: 'kaiti';
}

select {
    font-size: 20px;
    font-family: 'kaiti';
}