相册案例:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS入门相册案例</title> <style> .box{ width: 500px; height: 700px; background-color: white; border: 1px solid red; box-shadow: 2px 2px 2px #999; text-align: center; margin: auto; overflow: hidden; } .box ul{ margin: 0; padding: 0; list-style-type: none; } .box ul li{ float: left; background-color: lightpink; margin-left: 20px; } .box ul li a{ text-decoration-line: none; display: block;/*把内联元素a变为块级元素*/ width: 100px; height: 40px; line-height: 40px;/*a标签里的文本在a块中居中*/ } .box ul li a:hover{ font-size: 1.2em; cursor: pointer; background-color: skyblue; } .box1{ width: 450px; height: 380px; border: 1px solid #505050; /*line-height: 1px;*/ margin: auto; margin-top: 100px; } .box1 img{ width: 100%; height: 100%; } .box2 { width: 450px; height: 100px; float: left; margin-top: 30px; margin-left: 20px; text-align: center; line-height: 100px; } </style> </head> <body> <div class="box"> <h2>我的私人相册</h2> <ul> <li><a href="imgs/img1.jpg" title="《三渣树之恋》,《七世桃花》,《梦回大唐》" onclick="change(this);return false;" >上原</a></li> <li><a href="imgs/img2.png" title="《三渣树之恋》,《七世桃花》,《梦回大唐》" onclick="change(this);return false;">结衣</a></li> <li><a href="imgs/img3.jpg" title="《三渣树之恋》,《七世桃花》,《梦回大唐》" onclick="change(this);return false;">吉川</a></li> <li><a href="imgs/img4.jpg" title="《三渣树之恋》,《七世桃花》,《梦回大唐》" onclick="change(this);return false;">北海</a></li> </ul> <div class="box1"> <img src="imgs/img9.jpg" id="img"> </div> <div class="box2"> <p id="info"></p> </div> </div> <script> function change(pv) { // 1.获取盒子里的图片资源,标题,文本 var a=pv.href var b=pv.title var c=pv.innerHTML // 2.获取被替换的图片和下面的文本对象 var d=document.getElementById('img') var e=document.getElementById('info') // 3.获取到的图片资源覆盖文档中的图片和下面的文本 d.src=a e.innerHTML='<span style=color:green>'+c+':'+b; } </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
计算器案例:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS计算器案例</title> <style> .box{ width: 500px; height: 200px; background-color:#efefef; border: 1px solid black; text-align: center; margin:20px auto; color: lightskyblue; box-shadow: 2px 2px 2px #999; } table{ margin: auto; } input,select{ width:100%; height:100%; border: none; text-align: center; } td{ width: 100px; height: 30px; padding: 5px 10px; } button{ width: 100%; height: 100%; border: none; background-color: #222222; color: white; } button:hover{ cursor: pointer; background-color: sandybrown; } </style> </head> <body> <div class="box"> <h2>迷你计算机</h2> <form> <table> <tr> <td><input type="text" name="frist" 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="two" placeholder="操作数2"></td> <td><button type="button">计算</button></td> </tr> <tr> <td colspan="2" align="right"><h3>结果:</h3></td> <td colspan="2" align="left"><h3 id="placeholder"></h3></td> </tr> </table> </form> </div> <script> // 1.获取操作数,按钮,结果占位符 var frist=document.getElementsByName('frist')[0]; var two=document.getElementsByName('two')[0]; var opt=document.getElementsByName('option')[0]; var placeholder=document.getElementById('placeholder') var btn=document.getElementsByTagName('button')[0]; // 2.给按键添加点击事件 btn.onclick=function(){ if(frist.value.length==0){ alert('第一个操作数不能为空') frist.focus() return false }else if(isNaN(frist.value)){ alert('请输入数字,第一个操作数据必须是数字') }else if(two.value.length==0){ alert('第二个操作数不能为空') frist.focus() return false }else if(isNaN(two.value)){ alert('请输入数字,第二个操作数据必须是数字') }else{ var data1=parseFloat(frist.value) var data2=parseFloat(two.value) } var option=opt.value var tem=0 var flag='' switch (option){ case 'null': alert('请选择操作符') opt.focus(); return false case 'add': flag='+' tem=data1+data2 break case 'sub': flag='-' tem=data1-data2 break case 'mul': flag='*' tem=data1*data2 break case 'div': flag='/' if(data2 ==0){ alert('除数不能为0') return false }else { tem=data1/data2 } break } placeholder.innerHTML=data1+''+flag+''+data2+'='+tem } </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:
相册:
获取盒子里的图片资源,标题,文本
获取被替换的图片和下面的文本对象
获取到的图片资源覆盖文档中的图片和下面的文本
计算器:
获取操作数,按钮,结果占位符
给按键添加点击事件
判断操作数据一,二是否为空,必须是数字,运算符必须选择
手抄:
运行效果图: