實現效果需要自行導入jquery.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/JavaScript" src="js/jquery.js"></script> </head> <style> div section{ width: 30px; height: 30px; margin: 10px; display: inline-block; } div section{ background-color: black; border-radius: 50%; } div section:hover{ cursor:pointer; } div input, div button{ position: absolute; margin-top: 10px; height: 30px; width: 230px; } div button{ width: 50px; margin-left: 240px; cursor:pointer; } </style> <body> <div> <section onclick="instantClick()" id="insC"></section> <input type="text" id="insInput" oninput="instantChange()" onpropertychange="instantChange()" placeholder="請您輸入十六進制顏色碼，如#123123。" maxlength="7"> <button onclick="instantClick()">確認</button> </div> <center> <h2 style="display:inline-block;">顏色主題jquery變換</h2> <form action="" id="simpleCalc"> <span>input：</span><input type="text" required><br><br> <button id="calc">開始計算</button> </form> <span id="result"></span> </center> <script> //即時換色 // 設置需要換色的元素及其樣式（與上一篇相同） function change(colo){ $("#calc").css("background-color", colo); $("h2, small, span").css("color", colo); $("input").css("color", colo); $("input[type=text]").focus(function(){$(this).css("outline", "none")}); $("input[type=text]").focus(function(){$(this).css("border", "2px solid " + colo)}); $("input[type=text]").blur(function(){$(this).css("border", "1px solid gray")}); } // 設置input輸入的顏色值 var colorC; function instantChange(){ colorC = $("#insInput").val(); // 改變section的背景色 $("#insC").css("background-color", colorC); } // 調用頁面換色方法 function instantClick(){ change(colorC); } </script> </body> </html>
如有錯誤，請您指正！