快捷導(dǎo)航

JavaScript實(shí)現(xiàn)鼠標(biāo)移入隨機(jī)變換顏色

更新時(shí)間：2020年11月24日 09:42:27 作者：學(xué)不明白！

這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)鼠標(biāo)移入隨機(jī)變換顏色的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

大家好！

今天分享一個(gè)在 JavaScript中，實(shí)現(xiàn)一個(gè)鼠標(biāo)移入可以隨機(jī)變換顏色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 這里定義一下div（塊元素）已下span 標(biāo)簽的寬.高.邊框線以及邊框線的顏色*/
			span{
				display: block;
				width: 80px;
				height: 80px;
				border: 1px solid #000000;
				float: left;
			}
		</style>
	</head>
	<body>
		<div>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
			<span></span><span></span><span></span><span></span><span></span><span></span>
		</div>
		<script type="text/javascript">
			var a=document.getElementsByTagName("span");
			/* 獲取一下span標(biāo)簽 */
				for(var i=0;i<=a.length;i++){
					a[i].onmouseover=function(){
						/* 循環(huán)出每一個(gè)方塊，加入鼠標(biāo)移入 */
						this.style.backgroundColor="#"+Math.floor(Math.random()*16777215).toString(16);
						/* 顏色隨機(jī)顏色 */
					}
				}
		</script>
	</body>
</html>

如下是代碼運(yùn)行后在這里插入圖片描述

總結(jié)

到此這篇關(guān)于JavaScript實(shí)現(xiàn)鼠標(biāo)移入隨機(jī)變換顏色的文章就介紹到這了,更多相關(guān)JS鼠標(biāo)移入隨機(jī)變換顏色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: