收藏
批改状态：未批改
老师批语：
通过以下2个案例，来了解最新的知识点就是JavaScript。
第一个案例：明星相册
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../0330/css/xiangce.css"> <script type="text/javascript" src="../0330/js/xiangce.js"></script> <title>Document</title> </head> <body> <div class="case"> <h1>美人相册</h1> <ul> <li><a href="../0330/images/jingtian.jpg" title="《警察故事2013》，《特殊身份》，《大唐荣耀》" onclick="shijian(this);return false">景甜</a></li> <li><a href="../0330/images/zly.jpg" title="《仙剑奇侠传》，《杉杉来了》，《楚乔传》" onclick="shijian(this);return false">赵丽颖</a></li> <li><a href="../0330/images/fbb.jpg" title="《二次曝光》，《苹果》，《我不是潘金莲》" onclick="shijian(this);return false">范冰冰</a></li> <li><a href="../0330/images/jsy.jpg" title="《一仆二主》，《好先生》，《最佳前男友》" onclick="shijian(this);return false">江疏影</a></li> <li><a href="../0330/images/jsy.jpg" title="《一仆二主》，《好先生》，《最佳前男友》" onclick="shijian(this);return false">江疏影</a></li> </ul> <div class="bg_pic"> <img src="../0330/images/zwt.png" id="tupian" alt=""> </div> <p id='info'></p> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
CSS样式调用：
.case{
width: 800px;
text-align: center;
margin: auto;
}
.case ul{
margin: 0;
padding: 0;
overflow: hidden;
}
.case ul li{
float: left;
list-style: none;
background-color: red;
margin-left: 20px;
}
.case ul li a{
width: 120px;
height: 50px;
display: block;
line-height: 50px;
color: #fff;
text-decoration: none;
}
.case ul li a:hover{
background-color: coral;
}
.case .bg_pic{
width: 500px;
height: 500px;
border: solid;
margin:20px auto;
line-height: 1px;
}
.case .bg_pic img{
width: 100%;
height: 100%;
}点击 "运行实例" 按钮查看在线实例
JavaScript样式调用：
function shijian(pic) {
// 1.先获取到要替换明星的图片与简介信息
var picUrl = pic.href
var picInfo = pic.title
var picName = pic.innerHTML
// 2.获取到页面中，要被替换掉的图像元素对象
var img = document.getElementById('tupian')
var p = document.getElementById('info')
// 3.将对应的图像与信息点位符进行替换
img.src = picUrl
p.innerHTML = picName+':'+picInfo
p.innerHTML = '<span style="color:coral">'+picName+':'+picInfo+'</span>'
}点击 "运行实例" 按钮查看在线实例
最终运行效果图如下：
第二个案例：迷你计算器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../0330_2/css/jisuanqi.css"> <title>迷你计算器</title> </head> <body> <div class="case"> <h1>迷你计算器</h1> <form action=""> <table> <tr> <td><input type="text" name="opt1" placeholder="输入数字"></td> <td> <select name="option" id=""> <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="输入数字"> <button type="button">计算</button> </td> </tr> <tr> <td colspan="2" align="right"><h2>结果：</h2></td> <td colspan="2" align="left"><h2 id="placeholder"></h2></td> </tr> </table> </form> </div> <script src="../0330_2/js/jisuanqi.js"></script> </body> </html>
点击 "运行实例" 按钮查看在线实例
CSS外部样式表：
.case{
width: 600px;
height: 300px;
border: solid 1px #808080;
margin: auto;
border-radius: 20px;
margin: 20px auto;
background-color: #dcdcdc;
box-shadow: 4px 4px 4px 3px #888;
}
.case h1{
text-align: center;
}
.case table{
margin: auto;
}
.case table input{
width: 120px;
height: 36px;
border: none;
text-align: center;
}
.case table select{
width: 100%;
height: 38px;
border: none;
}
.case table button{
width: 120px;
height: 100%;
padding: 9px 0;
background-color: #00bfff;
border: none;
color: #fff;
font-size: 18px;
}
.case table button:hover{
background-color: coral;
cursor: pointer;
}点击 "运行实例" 按钮查看在线实例
JavaScript外部样式表：
//1.获取操作数,按钮与结果占位符
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 placeholder = document.getElementById('placeholder')
//2.给按钮添加事件,执行计算操作
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 temp = 0
var flag = ''
var result = ''
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,请重新输入')
opt2.focus()
return false
} else {
temp = data1 / data2
}
break
}
var str = '<span style="color:coral">'
str += data1+' '+flag+' '+data2 + ' = ' + temp
str += '</span>'
placeholder.innerHTML = str
}点击 "运行实例" 按钮查看在线实例
运行后案例预览图：
手抄迷你计算器代码作业：
总结：第一次接触JS，写的时候完全不知道如何下手，就按老师的代码重复的敲，给不理解的地方也做了注释，笔记。慢慢的可以用回忆来写了。继续努力吧，希望能跟得上老师的脚步，从真实的案例中学到更多的东西，能吸收就好。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
