<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .set_bg_con{ width: 440px; height: 40px; border: 1px solid #DDDDDD; margin: 40px auto; background-color: #fff; } .set_text{ line-height: 40px; float: left; margin: 0 20px 0 10px; color: #666; } .style01,.style02,.style03,.style04,.style05,.style06{ width: 30px; height: 26px; margin: 8px 5px; background: red; cursor: pointer; /*设置成横向的*/ float: right; } .style01{ background: #0181cc; } .style02{ background: #00b9f1; } .style03{ background: #ef8201; } .style04{ background: #8fc320; } .style05{ background: #e84191; } .style06{ background: #ee87b4; } </style> </head> <body id="body01"> <div class="set_bg_con"> <div class="set_text">请选择网页的背景色:</div> <div class="style01" id="c01"></div> <div class="style02" id="c02"></div> <div class="style03" id="c03"></div> <div class="style04" id="c04"></div> <div class="style05" id="c05"></div> <div class="style06" id="c06"></div> </div> </body> <script type="text/javascript"> //点击色块改变网页的背景色. var oBodybg = document.getElementById("body01") var oBtn01 = document.getElementById("c01") var oBtn02 = document.getElementById("c02") var oBtn03 = document.getElementById("c03") var oBtn04 = document.getElementById("c04") var oBtn05 = document.getElementById("c05") var oBtn06 = document.getElementById("c06") oBtn01.onclick = function(){ oBodybg.style.backgroundColor="#0181cc"; } oBtn02.onclick = function(){ oBodybg.style.backgroundColor="#00b9f1"; } oBtn03.onclick = function(){ oBodybg.style.backgroundColor="#ef8201"; } oBtn04.onclick = function(){ oBodybg.style.backgroundColor="#8fc320"; } oBtn05.onclick = function(){ oBodybg.style.backgroundColor="#e84191"; } oBtn06.onclick = function(){ oBodybg.style.backgroundColor="#ee87b4"; } </script> </html> <!-- 面试的时候写伪代码.可以写中文,如果不会写具体的代码 -->
演示效果:
