==双等于是判断是否等于
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>
//函数（机器人）
function toggle(){//这个是定义函数
// 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.函数传参
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function show(num){//形参:形式参数
//条件判断
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;
//停止函数
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>
