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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了使用js繪制幾何圖形教程，本文主要是教大家繪制圓、弧、扇形,需要的朋友可以參考下2015-01-01
json數(shù)據(jù)處理及數(shù)據(jù)綁定
本文主要介紹了json數(shù)據(jù)處理及數(shù)據(jù)綁定的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了詳解es6超好用的語法糖Decorator，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
javascript Three.js創(chuàng)建文字初體驗
這篇文章主要為大家介紹了Three.js創(chuàng)建文字初體驗，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
我們都知道車牌是有一定規(guī)律的，本文實現(xiàn)了微信小程序中實現(xiàn)車牌輸入功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了js根據(jù)后綴判斷文件文件類型的代碼，原來是獲取文件的擴展名然后再判斷屬于什么類型，對于圖片多個后綴的判斷的實現(xiàn)也不是不錯的思路，大家可以參考一下2020-05-05
ECMAScript?的?6?種簡單數(shù)據(jù)類型
這篇文章主要介紹了ECMAScript的?6?種簡單數(shù)據(jù)類型，ECMAScript的數(shù)據(jù)類型很靈活，一種數(shù)據(jù)類型可以當作多種數(shù)據(jù)類型來使用，具體使用詳情文章詳細介紹需要的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了JS中如何比較兩個Json對象是否相等實例代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了JavaScript隨機生成顏色的方法的相關(guān)資料,非常不錯，代碼簡單易懂，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
一個字符串中出現(xiàn)次數(shù)最多的字符 統(tǒng)計這個次數(shù)【實現(xiàn)代碼】
下面小編就為大家?guī)硪黄粋€字符串中出現(xiàn)次數(shù)最多的字符 統(tǒng)計這個次數(shù)【實現(xiàn)代碼】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-04-04