快捷導(dǎo)航

JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕切換網(wǎng)頁(yè)背景色的方法

更新時(shí)間：2015年10月17日 15:13:20 作者：秋雨

這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕切換網(wǎng)頁(yè)背景色的方法,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕切換網(wǎng)頁(yè)背景色的方法。分享給大家供大家參考，具體如下：

這里演示JavaScript用按鈕隨意變換背景顏色，每點(diǎn)擊一下按鈕，就可以隨機(jī)改變一種網(wǎng)頁(yè)背景顏色。顏色值事先是保存在JS的數(shù)組里，你在代碼里會(huì)發(fā)現(xiàn)他們，若不想要某個(gè)顏色，就替換掉即可。

運(yù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>通過(guò)按鈕變換背景顏色</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>

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Sort()函數(shù)的多種用法
sort() 方法用于對(duì)數(shù)組的元素進(jìn)行排序。接下來(lái)通過(guò)本文給大家介紹Sort()函數(shù)的多種用法，對(duì)sort函數(shù)的用法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)
2016-03-03
第六篇Bootstrap表格樣式介紹
這篇文章主要介紹了第六篇Bootstrap表格樣式介紹的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
JS中Iframe之間傳值的方法
在js中，我們時(shí)常用到用iframe做系統(tǒng)框架，在子頁(yè)面也，父頁(yè)面之間的值傳遞是一個(gè)問(wèn)題，下面是js獲取父窗體和子窗體的對(duì)象js：
2013-03-03
javascript中onclick(this)用法介紹
this指觸發(fā)事件的對(duì)象，接下來(lái)為大家分享下javascript中onclick(this)的用法，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助
2013-04-04
JS三級(jí)聯(lián)動(dòng)代碼格式實(shí)例詳解
這篇文章主要介紹了JS三級(jí)聯(lián)動(dòng)代碼格式實(shí)例詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁(yè)面方法詳解
Uniapp是一款基于Vue.js框架的跨平臺(tái)開(kāi)發(fā)工具,支持在一套代碼中開(kāi)發(fā)出運(yùn)行于各大平臺(tái)的應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁(yè)面的相關(guān)資料,需要的朋友可以參考下
2023-09-09
基于JavaScript實(shí)現(xiàn)繼承機(jī)制之構(gòu)造函數(shù)+原型鏈混合方式的使用詳解
本篇文章是對(duì)構(gòu)造函數(shù)與原型鏈混合方式的使用進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下
2013-05-05
一次微信小程序內(nèi)地圖的使用實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于一次微信小程序內(nèi)地圖使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
Javascript中Microtask和Macrotask鮮為人知的知識(shí)點(diǎn)
這篇文章主要為大家介紹了Javascript中Microtask和Macrotask鮮為人知的知識(shí)點(diǎn)講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪
2022-04-04
前端流式輸出從原理到實(shí)踐實(shí)現(xiàn)詳解
流式輸出技術(shù)允許服務(wù)器逐步將數(shù)據(jù)傳送給客戶端,而不是一次性地加載全部數(shù)據(jù),這篇文章主要介紹了前端流式輸出從原理到實(shí)踐實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-04-04