JavaScript實現(xiàn)點擊按鈕切換網(wǎng)頁背景色的方法
更新時間：2015年10月17日 15:13:20 作者：秋雨
這篇文章主要介紹了JavaScript實現(xiàn)點擊按鈕切換網(wǎng)頁背景色的方法,涉及JavaScript基于鼠標(biāo)事件動態(tài)操作頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JavaScript實現(xiàn)點擊按鈕切換網(wǎng)頁背景色的方法。分享給大家供大家參考，具體如下：
這里演示JavaScript用按鈕隨意變換背景顏色，每點擊一下按鈕，就可以隨機(jī)改變一種網(wǎng)頁背景顏色。顏色值事先是保存在JS的數(shù)組里，你在代碼里會發(fā)現(xiàn)他們，若不想要某個顏色，就替換掉即可。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-btn-click-rand-bgcolor-codes/
具體代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>通過按鈕變換背景顏色</title>
</head>
<body>
<script language="javascript">
var Arraycolor=new Array("olive","teal","red","blue","maroon","navy","lime","fuschia","green","purple","gray","yellow","aqua","white","silver");
var n=0;
function turncolors(){
if (n==(Arraycolor.length-1)) n=0;
n++;
document.bgColor = Arraycolor[n];
}
</script>
<form name="form1" method="post" action="">
<p>
<input type="button" name="Submit" value="變換背景" onclick="turncolors()">
</p>
<p>用按鈕變換背景顏色.</p>
</form>
</body>
</html>
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
sort() 方法用于對數(shù)組的元素進(jìn)行排序。接下來通過本文給大家介紹Sort()函數(shù)的多種用法，對sort函數(shù)的用法相關(guān)知識感興趣的朋友一起學(xué)習(xí)2016-03-03
這篇文章主要介紹了第六篇Bootstrap表格樣式介紹的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
在js中，我們時常用到用iframe做系統(tǒng)框架，在子頁面也，父頁面之間的值傳遞是一個問題，下面是js獲取父窗體和子窗體的對象js：2013-03-03
this指觸發(fā)事件的對象，接下來為大家分享下javascript中onclick(this)的用法，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04
這篇文章主要介紹了JS三級聯(lián)動代碼格式實例詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面方法詳解
Uniapp是一款基于Vue.js框架的跨平臺開發(fā)工具,支持在一套代碼中開發(fā)出運行于各大平臺的應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面的相關(guān)資料,需要的朋友可以參考下2023-09-09
基于JavaScript實現(xiàn)繼承機(jī)制之構(gòu)造函數(shù)+原型鏈混合方式的使用詳解
本篇文章是對構(gòu)造函數(shù)與原型鏈混合方式的使用進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05
這篇文章主要給大家介紹了關(guān)于一次微信小程序內(nèi)地圖使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Javascript中Microtask和Macrotask鮮為人知的知識點
這篇文章主要為大家介紹了Javascript中Microtask和Macrotask鮮為人知的知識點講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
流式輸出技術(shù)允許服務(wù)器逐步將數(shù)據(jù)傳送給客戶端,而不是一次性地加載全部數(shù)據(jù),這篇文章主要介紹了前端流式輸出從原理到實踐實現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04