欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實現(xiàn)顏色查看器

 更新時間：2021年04月13日 08:34:00   作者：火星飛鳥  
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)顏色查看器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)顏色查看器的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)效果

  • 方框中初始為白色
  • 輸入框中輸入顏色代碼，點擊查看顏色，在上方即可出現(xiàn)對應(yīng)顏色
  • 點擊復(fù)原，復(fù)原到初始的白色，同時清空輸入框的內(nèi)容

實現(xiàn)代碼

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>顏色查看器</title>
        <style>
            #color {
                width: 150px;
                height: 150px;
                background-color: #fff;
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <div id="color"></div>
        <input id="inp" type="text" placeholder="請輸入顏色代碼..." />
        <button id="trans">查看顏色</button>
        <button id="rst">復(fù)原</button>
    </body>
    <script>
        let trans = document.getElementById('trans');
        let color = document.getElementById('color');
        let inp = document.getElementById('inp');
        let rst = document.getElementById('rst');
        trans.addEventListener('click', () => {
            color.style.backgroundColor = inp.value;
        });
        rst.addEventListener('click', () => {
            color.style.backgroundColor = '#fff';
            inp.value = '';
        });
    </script>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論