js實現(xiàn)點擊按鈕隨機生成背景顏色
更新時間：2020年09月05日 09:26:39 作者：horizon12
這篇文章主要為大家詳細介紹了js實現(xiàn)點擊按鈕隨機生成背景顏色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)點擊按鈕隨機生成背景顏色的具體代碼，供大家參考，具體內(nèi)容如下
通過點擊按鈕更換整個頁面的背景顏色
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
width: 150px;
height: 50px;
background-color:yellow;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<input type="button" value="點擊更換背景顏色" id="btn">
<!-- 設(shè)置按鈕 -->
<script>
function suiJi(m,n){
return m+parseInt(Math.random()*(n-m+1))
}
//隨機生成m-n之間的整數(shù)，包含m，n
function yanSe(){
var result = "#"
for(var i = 0; i<6; i++){
result +=suiJi(0,15).toString(16)
}
return result;
//生成一個隨機顏色編碼#000000-#ffffff
}
var btn = document.getElementById("btn")
//獲取節(jié)點
btn.onclick = function(){
document.body.style.background = yanSe();
}
</script>
</body>
</html>
實現(xiàn)效果，點擊按鈕可更換顏色
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解JWT token心得與使用實例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
關(guān)于JavaScript 數(shù)組你應(yīng)該知道的事情（推薦）
這篇文章主要介紹了JavaScript 數(shù)組，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js for循環(huán)，為什么一定要加var定義i變量
我知道，有些人（譬如之前的我）寫js的for循環(huán)時，都不習(xí)慣加上var，這當(dāng)然是語法允許的。2010-06-06
這篇文章主要介紹了用POSTMAN發(fā)送JSON格式的POST請求示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
javascript基礎(chǔ)語法學(xué)習(xí)筆記
這篇文章主要為大家分享了javascript基礎(chǔ)語法學(xué)習(xí)筆記，幫助大家夯實javascript基礎(chǔ)知識，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要為大家詳細介紹了用js編寫留言板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
JavaScript實現(xiàn)點擊出現(xiàn)子菜單效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)點擊出現(xiàn)子菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要介紹了js 二進制流轉(zhuǎn)圖片的操作方法,接收數(shù)據(jù)大家需要注意,如果后端的接口是get方法,可以直接使用img標(biāo)簽,本文通過示例代碼講解的非常詳細,需要的朋友參考下吧2023-12-12
JS?TypeScript的Map對象及聯(lián)合類型實戰(zhàn)
這篇文章主要介紹了JS?TypeScript的Map對象及聯(lián)合類型實戰(zhàn)，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要為大家介紹了GoJs圖形繪圖模板Shape示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04