网页更换主题以及绘制图形js代码实现
Posted __S k y L a r k
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页更换主题以及绘制图形js代码实现相关的知识,希望对你有一定的参考价值。
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代码实现的主要内容,如果未能解决你的问题,请参考以下文章