HTML代码实现：<!DOCTYPE html><html lang="en"...
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';}
------- 知识无价，汗水有情，如需搬运请注明出处，谢谢！
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
