摘要:本篇教程介绍了HTML+CSS入门 利用div+CSS实现九宫格,然后用js实现点击每个格子可以随机更改格子(div)的背景颜色,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
本篇教程介绍了HTML+CSS入门 利用div+CSS实现九宫格,然后用js实现点击每个格子可以随机更改格子(div)的背景颜色,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div+css+js实现九宫格点击随机变色</title>
<script>
var inner = document.getElementsByClassName("inner");
function ChangeColor(num){
var a = parseInt(Math.random()*10);
var b = parseInt(Math.random()*10);
var c = parseInt(Math.random()*10);
var d = parseInt(Math.random()*10);
var e = parseInt(Math.random()*10);
var f = parseInt(Math.random()*10);
var g = "#"+a+b+c+d+e+f;
inner[num].style.backgroundColor=g;
// log.innerHTML=g;
// inner[num].style.backgroundColor="rgb("+parseInt(Math.random()*255)+","+parseInt
// (Math.random()*255)+","+parseInt(Math.random()*255)+")";
}
</script>
<style>
#outer{
width:306px;
}
#outer div{
height:100px;
width:100px;
background-color: #ff00ff;
float: left;
line-height:100px;
text-align: center;
margin-left:2px;
margin-top:2px;
}
</style>
</head>
<body>
<div id="outer">
<div class="inner" onclick="ChangeColor(‘0‘)">1</div>
<div class="inner" onclick="ChangeColor(‘1‘)">2</div>
<div class="inner" onclick="ChangeColor(‘2‘)">3</div>
<div class="inner" onclick="ChangeColor(‘3‘)">4</div>
<div class="inner" onclick="ChangeColor(‘4‘)">5</div>
<div class="inner" onclick="ChangeColor(‘5‘)">6</div>
<div class="inner" onclick="ChangeColor(‘6‘)">7</div>
<div class="inner" onclick="ChangeColor(‘7‘)">8</div>
<div class="inner" onclick="ChangeColor(‘8‘)">9</div>
</div>
<div id="log"></div>
</body>
</html>
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号