总结：
js这门课程比我想象的要难得多，零散的语法很多，相对而言要记得东西也变多了，但是对也晕困难的知识，通过自己的努力敲出来的话，成就感就会更多，学习js这门课程，光听老师讲课是不行的，要通过多敲 代码，从实践中感悟出来的知识点，这样这理解才会更深一程。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算机</title>
<style type="text/css">
.box{
width: 500px;
height: 300px;
background-color: #f6f6f6;
border: 1px solid black;
text-align: center;
color: #636363;
box-shadow: 2px 2px 2px;
margin: auto;}
.table{
margin: auto;
}
.td{
border: 1px solid red;
width: 100px;
height: 30px;
padding: 5px 10px;
}
.input,select{
width: 100%;
height: 100%;
text-align: center;
border: none;
}
.button{
width: 100%;
height: 100%;
border: none;
}
.button hover{
background-color: coral;
width: 105%;
height: 105%;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<h2>计算机</h2>
<form>
<table>
<tr>
<td><input type="text" name="opt1" placeholder="操作1"></td>
<td>
<select name="option">
<option value="null">请选择操作</option>
<option value="add">+</option>
<option value="sub">-</option>
<option value="mul">*</option>
<option value="div">/</option>
</select>
</td>
<td><input type="text" name="opt2" placeholder="操作2"></td>
<td><button type="button">计算</button></td>
</tr>
<tr>
<td colspan="2"><h3>结果</h3></td>
<td colspan="2"><h3 id="placeholder"></h3></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
//获取按钮，操作数，结果占位符
var opt1=document.getElementsByTagName('opt1')[0]
var opt2=document.getElementsByTagName('opt2')[0]
var opt=document.getElementsByTagName('option')[0]
var btn=document.getElementsByTagName('button')[0]
var placeholder=document.getElementByID('placeholder')
//给按钮添加事件，执行计算btn
btn.onclick=function(){
if (opt1.value.length==0) {
alert('第一个操作数不能为空')
opt1.focus()
}else if (isNaN(opt1.value)) {
alert('非法数据：第一个操作必须是数字')
}else if (opt2.value.length==0) {
alert('第二个操作数不能为空')
opt2.focus()
}else if (isNaN(opt2.value)) {
alert('非法数据：第二个操作必须是数字')
}else{
var data1=parseFloat(opt1.value)
var data2=parseFloat(opt2.value)
}
var option=opt.value
var temp=0
var flag=''
switch(option){
case 'null':
alert('请选择操作符')
opt.focus()
return false
case 'add':
flag='+'
temp=data1+data2
break
case 'sub':
flag='-'
temp=data1-data2
break
case 'mul':
flag='*'
temp=data1*data2
break
case 'div':
flag='/'
if (data2==0) {
alert('除数不能为0')
return false
}else{
temp=data1/data2
}
break
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 500px;
height: 800px;
background-color: #f6f6f6;
border: 1px solid black;
text-align: center;
color: #636363;
box-shadow: 2px 2px 2px;
margin: auto;
}
.box ul{
margin: 0;
padding: 0;
overflow: hidden;
}
.box ul li{
list-style-type: none;
float: left;
background-color: blue;
margin-left: 20px;
}
.box ul li a{
display: block;
width: 100px;
height: 40px;
line-height: 40px;
color: white;
text-decoration-line: none;
}
.box ul li a hover{
font-style: 1.5em;
background-color: coral;
}
.box .pic{
width: 450px;
height: 600px;
border: 1px solid red;
line-height: 1px;
margin: auto;
margin-top: 65px;
}
.box .pic img{
width: 100%
}
</style>
</head>
<body>
<div class="box">
<h2>相册表</h2>
<ul>
<li><a href="http://p0.so.qhimgs1.com/bdr/_240_/t010b7b8c4ae664c84c.jpg" title="能抗能打..."onclick="changePic(this);return false">成龙</a></li>
<li><a href="http://p3.so.qhmsg.com/bdr/_240_/t0188eb8465add9e4e8.jpg" title="帅气又型..."onclick="changePic(this);return false">欧豪</a></li>
<li><a href="http://p1.so.qhmsg.com/bdr/_240_/t010d366ab2f2c618b6.jpg" title="幽默搞笑..." onclick="changePic(this);return false">谢娜</a></li>
<li><a href="http://p2.so.qhimgs1.com/bdr/_240_/t018c509490a591eda2.jpg" title="能唱能跳..."onclick="changePic(this);return false">薛之谦</a></li>
<div class="pic"><img src="" alt="" di="footer"></div>
<p id="info"></p>
</ul>
</div>
<script type="text/javascript">
function changPic(pic){
//获取一个图片和简介
var picur1=tow.pic
var picinfo=pic.title
var picName=pic.innerHTML
//获取要被替换的对象
var img=document.getElementByID('img')
var p=document.getElementByID('img')
//将对于的占位符进行替换
img.src=picUr1
p.innerHTML='<span style="color:red">'+picName+':'+picinfo+</span>
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例