收藏
批改状态：合格
老师批语：
本次初次接触学习了JS相关知识，有了一些感性的认识，现将代码奉上：
第一个：涉及与图片的互动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>经典人物名言</title>
<style type="text/css">
.container {
width: 600px;
height: 400px;
background-color: #CDE5F0;
border: 1px solid #F5306C;
margin: 0 auto;
padding: 0;
border-radius: 10px;
}
ul {
margin-top: 30px;
padding: 0;
overflow: hidden;
}
ul li {
float: left;
list-style: none;
margin-left: 50px;
}
ul li a {
display: block;
width: 50px;
height: 40px;
line-height: 40px;
padding: 0 20px;
text-align: center;
text-decoration: none;
color: white;
background-color: #F0CE41;
}
ul li a:hover {
background-color: #5C6BF1;
font-size: 1.02em;
}
.pic {
width: 300px;
height: 200px;
margin: auto;
margin-top: 30px;
line-height: 1px;
}
.pic img {
width: 100%;
height: 100%;
}
.pic img:hover {
width: 310px;
height: 207px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="images/xiaochou.jpg" title="不是你蝙蝠侠赢了，而是我小丑不想玩了！" onclick="show(this);return false">小丑</a></li>
<li><a href="images/jinganglang.jpg" title="成为你自己想成为的，别成为他们所希望的。" onclick="show(this);return false">金刚狼</a></li>
<li><a href="images/deadpool.jpg" title="能力越大，越没责任（右边=SB）。" onclick="show(this);return false">死侍</a></li>
<li><a href="images/web.jpg" title="能力越大,责任越大。" onclick="show(this);return false">蜘蛛侠</a></li>
</ul>
<div class="pic"><img src="images/xiaochou1.jpg" alt="图片" id="img"></div>
<p class="inf" id="inf" align="center">我们为自己代言！</p>
</div>
<script type="text/javascript">
function show(jpg) {
var picurl = jpg.href
var picsay = jpg.title
var picname = jpg.innerHTML
var img = document.getElementById('img')
var inf = document.getElementById('inf')
img.src = picurl
inf.innerHTML = '<span style="color:#7A5407">' + picname + ':' + picsay + '</span>'
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
第二个：四则运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<title>四则运算</title>
<!-- 构建样式表 -->
<style type="text/css">
.container {
width: 500px;
height: 300px;
background-color: #CDE5F0;
border: 1px solid #F5306C;
margin: 40px auto;
padding: 0;
border-radius: 10px;
}
.container caption{
font-size:2em;
}
table {
margin: 20px auto;
}
td {
width: 100px;
height: 30px;
padding: 15px;
}
input, select, button {
width: 100%;
height: 100%;
border: none;
}
button {
background-color: orange;
color:white;
}
button:hover{
color:red;
}
</style>
</head>
<!-- 主体部分 -->
<body>
<div class="container">
<form>
<table>
<caption>四则运算</caption>
<tr>
<td>
<input type="text" name="opt1" placeholder="请输入一个数">
</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="请输入一个数">
</td>
<td>
<button type="button">计算</button>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<h2>计算结果：</h2></td>
<td colspan="2" align="left">
<h3 id="result"></h3></td>
</tr>
</table>
</form>
</div>
<!-- Js代码 -->
<script type="text/javascript">
var opt1=document.getElementsByName('opt1')[0]
var opt2=document.getElementsByName('opt2')[0]
var opt=document.getElementsByName('option')[0]
var btn=document.getElementsByTagName('button')[0]
var result=document.getElementById('result')
btn.onclick=function(){
if (opt1.value.length==0) {
alert('第一个数字不能为空')
opt1.focus()
return false
}
else if(isNaN(opt1.value))
{
alert('第一个应为数字')
opt1.focus()
return false
}
else if(opt2.value.length==0) {
alert('第二个数字不能为空')
opt2.focus()
return false
}
else if(isNaN(opt2.value)) {
alert('第二个应为数字')
opt2.focus()
return false
}
else {
var data1=parseFloat(opt1.value)
var data2=parseFloat(opt2.value)
}
var option=opt.value
var flag=''
var temp=0
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('除数不能为零')
opt2.focus()
return false
}else{
temp=data1/data2
}
break
}
var str='<span style="color:green">'
str+=data1+flag+data2+'='+temp
str+='</span>'
result.innerHTML=str
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结如下：
相比html比较容易犯错误
1、容易忘掉在case后添加冒号
2、return false与break容易混用
3、容易丢失大括号
4、自定义的单词容易打错。
学习JS必要要仔细和严谨，一旦出现错误，真是很难找出来啊！今天上午编完，下午废了将近一个多小时纠错，惨痛！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
