==雙等于是判斷是否等于
06.關于背景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
/*背景*/
/*background: url(../images/boy.jpg);
* 如果div過大默認背景圖片XY軸重復平鋪的*/
/*下面這行是復合樣式*/
background: url(../images/boy.jpg) no-repeat red ;
animation: blinks 0.1s infinite;
}
@keyframes blinks{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
</style>
</head>
<body>
<div id="box"></div>
<!--<img src="../images/boy.jpg">-->
</body>
</html>
07.關于背景2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 400px;
height: 400px;
background: red;
}
#div1{
width: 100%;
height: 100px;
background: yellow;
}
#div2{
width: 170px;
height: 100px;
background: black;
position: absolute;
left: 100px;
}
</style>
</head>
<body>
<div id="box">
<div id="div2"></div>
<div id="div1"></div>
</div>
</body>
</html>
08.并集選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*并集選擇器涕侈，不一定必須是id诬辈，標簽也可以*/
#box1,#box2,#box3,div{
width: 100px;
height: 100px;
}
#box1{
background: red;
}
#box2{
background: blue;
}
#box3{
background: yellow;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
09.顯示器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
/*display:
none從文檔流中消失
block塊元素（獨占一行，支持寬高）的默認值
*/
display: none;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
10.按鈕
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button type="button">
按鈕
</button>
</body>
</html>
11.JS熱身
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
}
</style>
<!--工廠-->
<script>
//函數(shù)（機器人）
function toggle(){//這個是定義函數(shù)
// alert('程研最帥');//這個是彈出窗口
//1.找到box代表的元素
document.getElementById('box').style.display = 'none'
//2.改變它的display=none
}
function toggle2(){
document.getElementById('box').style.display = 'block'
}
</script>
</head>
<body>
<button type="button" onclick="toggle()">
消失
</button>
<button type="button" onclick="toggle2()">
顯示
</button>
<div id="box"></div>
</body>
</html>
12.函數(shù)傳參
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function show(num){//形參:形式參數(shù)
//條件判斷
if(num == n){
alert('大于100')
}
}
</script>
</head>
<body>
<button type="button" onclick="show(1000)">按鈕</button>
</body>
</html>
13.定義變量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function show(){
var num=100;
alert(num);
}
</script>
</head>
<body>
<button type="button" onclick="show()" >按鈕</button>
</body>
</html>
14.單按鈕切換
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height:100px;
background: red;
}
</style>
<script type="text/javascript">
var num = 0;
function toggle(){
if(num==0){
//隱藏
document.getElementById("box").style.display="none";
num=1;
//停止函數(shù)
return;
}
if(num==1){
//顯示
document.getElementById("box").style.display="block";
num=0
}
}
</script>
</head>
<body>
<button type="button" onclick="toggle()">
切換
</button>
<div id="box"></div>
</body>
</html>
