计算器实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
</head>
<body>
<div class="box">
<form>
<table>
<tr>
<th colspan="4">简单计算器</th>
</tr>
<tr>
<td><input type="text" name="op1" placeholder="操作数1"></td>
<td><select name='op3'><option value='null'>请选择</option>
<option value='jia'>加法</option>
<option value='jian'>减法</option>
<option value='cheng'>乘法</option>
<option value="chu">除法</option>
</select></td>
<td><input type="text" name="op2" placeholder="操作数2"></td>
<!-- <td><input type="submit" name="submit" value='计算'></td> -->
<td><button type="button">计算</button></td>
</tr>
<tr>
<td colspan="2" align="right">结果：</td>
<td colspan="2" align="left"><h2 id=data></h2></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
var op1=document.getElementsByName('op1')[0]
var op2=document.getElementsByName('op2')[0]
var op3=document.getElementsByName('op3')[0]
// var submit=document.getElementsByName('submit')[0]
var butt=document.getElementsByTagName('button')[0]
butt.onclick=function(){
if (op1.value.length==0)
{
alert("操作数1不能为空")
op1.focus()
return false
} else if (isNaN(op1.value)) {
alert("操作数1请输入0-10")
op1.focus()
return false
} else if (isNaN(op2.value)) {
alert("操作数2请输入0-10")
op2.focus()
return false
} else if (op2.value.length==0)
{
alert("操作数2不能为空")
op2.focus()
return false
} else
{ var data1=parseFloat(op1.value) /*转换成浮点数*/
var data2=parseFloat(op2.value)
}
option3=op3.value
switch(option3){
case 'null' :
alert("请选择加减乘除！")
break
case 'jia' :
data.innerHTML=data1+data2
break
case 'jian' :
data.innerHTML=data1-data2
break
case 'cheng' :
data.innerHTML=data1*data2
break
case 'chu' :
if (data2==0)
{
alert('被除数不能为0')
return false
}
data.innerHTML=data1/data2
break
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
点击图片跳转实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片点击</title>
<style type="text/css">
table {
margin:auto;
}
</style>
</head>
<body>
<table>
<tr>
<td><a href="01.png" onclick="chang(this);return false">技术文章</a></td>
<td><a href='02.png' onclick='chang(this);return false'>网站源码</a></td>
<td><a href='03.png' onclick='chang(this);return false'>原生手册</a></td>
<td><a href='04.png' onclick='chang(this);return false'>推荐博文</a></td>
</tr>
<tr>
<td colspan="4" id='images4'><image src='00.png' id='img'></td>
</tr>
<tr>
<td colspan="4" ><h2 id='text5'>2222222222222</h2></td>
</tr>
</table>
<script type="text/javascript">
function chang(love){
var images1=love.href
var info1=love.innerHTML
var images2=document.getElementById('img')
var info2=document.getElementById('text5')
images2.src=images1
info2.innerHTML="<span style='color:red'>"+info1 + "在线教程</span>"
}
</script>
</body>
</html>
运行实例 »点击 "运行实例" 按钮查看在线实例
手写图
