簡單的js代碼實作一些功能
第一天學習js可以制作的東西 <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
float: left;
}
.btn {
float: left;
/* z-index: 2; */
}
.ms {
/* position: relative; */
float: left;
z-index: 2;
}
.cang {
display: none;
position: absolute;
top: 0px;
left: 350px;
float: left;
border: 1px solid #ccc;
width: 160px;
z-index: 5;
background: pink;
}
.wh,
.color {
border: 3px solid #ccc;
margin-top: 5px;
display: inline-block;
}
.yin {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<div class="ms">
<input type="button" value="設定大小" id="btn" class="btn">
<!-- 陰影盒子 -->
<div class="yin" id="yin">
<!-- 要隐藏的部分 -->
<div class="cang" id="cang">
<h3>大小</h3>
<span class="wh" id="w3h3">300*300</span>
<span class="wh" id="w2h3">200*300</span><br>
<span class="wh" id="w3h2">300*200</span>
<span class="wh" id="w1h3">100*300</span>
<h3>顔色</h3>
<span class="color" id="red">#ff0000</span>
<span class="color" id="green">#00ff00</span><br>
<span class="color" id="blue">#0000ff</span>
<span class="color" id="gb">#00ffff</span>
<br><br>
<input type="button" value="确定" id="ok">
<input type="button" value="取消" id="back"><br><br>
</div>
</div>
</div>
<script>
// 擷取對象
var yin = document.getElementById("yin")
var box = document.getElementById("box");
var btn = document.getElementById("btn");
var cang = document.getElementById("cang");
var w3h3 = document.getElementById("w3h3");
var w2h3 = document.getElementById("w2h3");
var w3h2 = document.getElementById("w3h2");
var w1h3 = document.getElementById("w1h3");
var red = document.getElementById("red");
var green = document.getElementById("green");
var blue = document.getElementById("blue");
var gb = document.getElementById("gb");
var ok = document.getElementById("ok");
var back = document.getElementById("back");
// 給各個對象添加點選事件
btn.onclick = function () {
cang.style.cssText += "display:block;";
yin.style.cssText += "display:block;"
}
w3h3.onclick = function () {
box.style.cssText += "width:300px;height:300px;"
}
w2h3.onclick = function () {
box.style.cssText += "width:200px;height:300px;"
}
w3h2.onclick = function () {
box.style.cssText += "width:200px;height:200px;"
}
w1h3.onclick = function () {
box.style.cssText += "width:100px;height:300px;"
}
red.onclick = function () {
box.style.cssText += "background:red;"
}
green.onclick = function () {
box.style.cssText += "background:#00ff00;"
}
blue.onclick = function () {
box.style.cssText += "background:#0000ff;"
}
gb.onclick = function () {
box.style.cssText += "background:#00ffff;"
}
back.onclick = function () {
box.style.cssText += "width: 200px;height: 100px;border: 1px solid #ccc;float: left; background:white;"
}
ok.onclick = function () {
cang.style.cssText += "display:none;";
yin.style.cssText += "display:none;"
}
</script>
</body>
</html>
![js寫九九乘法表[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)