js的内容博大精深，短短一晚上的时间写出来的东西只能说是一个皮毛，但是通过这两个案例还是掌握了js的功能，他是干什么的，能处理那些东西
下面将两个案例的代码分享如下：
一、明星相册
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0329作业</title>
<style>
.box {
width: 500px;
height: 700px;
background-color: #efefef;
border: 1px solid lightgray;
margin: 20px auto;
text-align: center;
color: #636363;
box-shadow: 2px 2px 2px #999;
}
.box ul {
margin:0;
padding:0;
overflow: hidden;
}
.box ul li{
list-style: none;
float: left;
background-color: sandybrown;
margin-left: 20px;
}
.box ul li a{
text-decoration: none;
display: block;
width: 100px;
height: 45px;
line-height: 45px;
}
.box ul li:hover{
background-color: #FD6FCF;
font-size: 1.1em;
}
.box ul li a:hover{
color: white;
}
.box .pic {
width: 450px;
height:450px;
/*border: 1px solid lightgray;*/
/*消除img标签底部的空间区*/
line-height: 1px;
margin: auto;
margin-top: 50px;
}
.pic img{
width: 100%;
height: 100%;
box-shadow: 2px 2px 2px #999;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">
<h2>明星相册</h2>
<ul>
<li>
<a href="../0329源码/images/zly.jpg" title="《楚乔传》,《花千骨》,《陆贞传奇》..." onclick="changePic(this);return false">赵丽颖</a>
</li>
<li>
<a href="../0329源码/images/gyy.jpg" title="《倚天屠龙记》,《咱们经婚吧》,《爱无悔》..." onclick="changePic(this);return false">高圆圆</a>
</li>
<li>
<a href="../0329源码/images/sl.jpg" title="《那年花开月正圆》,《甑环传》,《玉观音》..." onclick="changePic(this);return false">孙俪</a>
</li>
<li>
<a href="../0329源码/images/fbb.jpg" title="《还珠格格》,《武媚娘传奇》,《我不是潘金莲》..." onclick="changePic(this);return false">范冰冰</a>
</li>
</ul>
<div class="pic">
<img src="../0329源码/images/zwt.png" alt="" id="img">
</div>
<p id='info'></p>
</div>
<script type="text/javascript">
function changePic(pic) {
//获取元素的图片链接
var picurl1 = pic.href
//
var picInfo1 = pic.title
//
var picName1 = pic.innerHTML
var img1 = document.getElementById('img')
var pinfo1 = document.getElementById('info')
img1.src = picurl1
pinfo1.innerHTML = '<span style="color:darkorange">'+picName1+':'+picInfo1+'</span>'
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
二，简单的计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>迷你计算器</title>
<style>
.box{
width: 500px;
height: 200px;
margin: 20px auto;
background-color: #ededed;
text-align: center;
color: #363636;
box-shadow: 2px 2px 2px #999999;
}
table{
margin: auto;
/*border: 1px solid rebeccapurple;*/
}
td{
/*border: 1px solid #000;*/
width: 100px;
height: 30px;
padding: 5px 10px;
/*box-sizing: border-box;*/
}
input,select{
width: 100%;
height: 100%;
border: none;
text-align: center;
}
button{
width: 100%;
height: 100%;
border: none;
background-color: skyblue;
color: white;
}
button:hover{
background-color: gold;
width: 105%;
height: 105%;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<h2>迷你计算器</h2>
<form action="">
<table>
<tr>
<td>
<input type="text" name="opt1" 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="opt2" placeholder="操作数2">
</td>
<td>
<button type="button">计算</button>
</td>
</tr>
<tr>
<td colspan="2"><h3>结果:</h3></td>
<td colspan="2">
<h3 id="placehold"></h3>
</td>
</tr>
</table>
</form>
</div>
<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 plocehold = document.getElementById('placehold')
// 给按钮添加事件 执行计算
btn.onclick = function () {
if (opt1.value.length == 0){
alert("第一个操作数不能为空")
opt1.focus()
return false
}else if (isNaN(opt1.value)==true){
alert("非法数据")
return false
}else if(opt2.value.length == 0){
alert("第2个操作数不能为空")
opt2.focus()
return false
}else if (isNaN(opt2.value)==true){
alert("非法数据2")
return false
}else{
var data1 = parseFloat(opt1.value)
var data2 = parseFloat(opt2.value)
}
var option = opt.value
var temp = 0
var flag = ''
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('bunneg wei 0')
return false
} else{
temp =data1/data2
}
break
}
plocehold.innerHTML = '<span style="color: coral">'+data1+''+flag+''+data2+'='+temp+'<span>'
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
