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‘;}
网页更换主题以及绘制图形js代码实现
原文地址：https://www.cnblogs.com/wf-skylark/p/9157250.html