为了写页面硬着头皮上HTML，一切从0开始，但愿我能OK!
html5.jpg
【前言】
HTML是框架，CSS是样式，JS是行为，JS越牛逼，工资越高！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS属性操作，if条件</title>
</head>
<body>
<input type="text" value="" id="text1" style="width: 250px">
<input type="button" value="弹出" id="but1">
<br>
<img src="" alt="" id="img1" width="400px" height="300px">
</body>
<script>
var oText=document.getElementById('text1');
var oBut=document.getElementById('but1');
var oImg=document.getElementById('img1');
var num=1;
oBut.onclick=function(){
// alert(oText.value);
// oImg.src=oText.value;
if (num>2)
{
alert('没图片了！');
}
else
{
oImg.src='image/'+num+'.jpg';
oText.value=oImg.src;
num=num+1;
}
}
</script>
</html>
单击图片切换
最后判断提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS中的innerHTML</title>
<!-- innerHTML用于获取指定关键字的所有html数据 -->
</head>
<body>
<div id="div1">
<span>这是一个innerHTML</span>
</div>
<input type="button" id="but1" value="点击">
</body>
<script>
var oDiv1=document.getElementById('div1')
var oBut1=document.getElementById('but1')
oBut1.onclick=function(){
alert(oDiv1.innerHTML)
oDiv1.innerHTML='TEST';
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html中添加class属性及其值</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
border: 1px solid yellow;
float: left;
margin-left: 100px;
text-align: center;
font: 30px/100px "simhei";
color: #fff;
transition: 0.3s;
}
.a{
border: 4px solid #26FF08;
background: #2e00ef;
color: #ccc;
border-radius: 50%;
}
.b{
border: 4px solid #26FF08;
background: #7B8113;
color: #220077;
border-radius: 50%;
}
.c{
border: 4px solid #26FF08;
background: url('image/1.jpg');
color: #ccc;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="div1">第一个</div>
<div id="div2">第二个</div>
<div id="div3">第三个</div>
</body>
<script>
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oDiv3=document.getElementById('div3');
oDiv1.onclick=function(){
oDiv1.className='a';
}
oDiv2.onclick=function(){
oDiv2.className='b';
}
oDiv3.onclick=function(){
oDiv3.className='c';
}
</script>
</html>
原始图片
逐个点击，赋予class属性及其值
