本次初次接触学习了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必要要仔细和严谨,一旦出现错误,真是很难找出来啊!今天上午编完,下午废了将近一个多小时纠错,惨痛!