博客列表 >20180329作业

20180329作业

朱佳楠的博客
朱佳楠的博客原创
2018年04月08日 14:32:02696浏览

相册实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</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;			
		}
		ul {
			margin:0;
			padding:0;
			list-style-type: none;
			overflow: hidden;
		}	
		li{
			float:left;
			background-color: skyblue;
			margin-left: 20px;
		}	
		li a{
			display: block;
			width: 100px;
			height: 40px;
			line-height: 40px;
			color: white;
			text-decoration: none;
		}
		li a:hover{
			font-size:1.2em;
			background-color: red;
		}
		.pic{
			width:450px;
			height:450px;
			border: 1px solid lightgray;
			margin:auto;
			margin-top: 50px;
		}
		.pic img{
			width: 100%;
			height:100%;
		}
	</style>
</head>
<body>
	<div class="box">
		<h2>明星相册</h2>
		<ul>
			<li><a href="img/zly.jpg" title="《楚乔传》,《花千骨》,《陆贞传奇》..." onclick="changePic(this);return false">赵丽颖</a></li>
			<li><a href="img/gyy.jpg" title="《倚天屠龙记》,《咱们经婚吧》,《爱无悔》..." onclick="changePic(this);return false">高圆圆</a></li>
			<li><a href="img/sl.jpg" title="《那年花开月正圆》,《甑环传》,《玉观音》..." onclick="changePic(this);return false">孙俪</a></li>
			<li><a href="img/fbb.jpg" title="《还珠格格》,《武媚娘传奇》,《我不是潘金莲》..." onclick="changePic(this);return false">范冰冰</a></li>
		</ul>
		<div class="pic">
			<img src="img/zwt.png" alt="" id="img">
		</div>
		<p id="info"></p>
	</div>
<script type="text/javascript">
	function changePic(pic){
		var img = document.getElementById('img');
		var info = document.getElementById('info');
		var href = pic.href;
		var title = pic.title;
		var name = pic.innerHTML;
		img.src = href;
		img.alt = title;
		info.innerHTML = '<span style="color:coral">'+name+':'+title+'</span>';
	}
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

迷你计算器实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3.迷你计算器</title>
	<style type="text/css">
		.box {
			width: 500px;
			height: 200px;
			background-color: #efefef;
			border: 1px solid lightgray;
			text-align: center;
			margin: auto;
			margin: 20px auto;
			color: #636363;
			border-radius: 15px;
			box-shadow: 2px 2px 2px #999;
		}

		table {
			margin: auto;
		}

		td {
			width: 100px;
			height: 30px;
			padding: 5px 10px;
		}

		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 {
			cursor: pointer;
			background-color: coral;
			width: 105%;
			height: 105%;
		}

	</style>
</head>
<body>
	<div class="box">
		<h2>迷你计算器</h2>
		<form>
			<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" align="right"><h3>结果:</h3></td>
					<td colspan="2" align="left"><h3 id="placeholder"></h3></td>
				</tr>
			</table>
		</form>
	</div>
	<script>
		var opt1 = document.getElementsByName('opt1')[0];
		var opt2 = document.getElementsByName('opt2')[0];
		var opt = document.getElementsByName('option')[0];
		var button = document.getElementsByTagName('button')[0];
		var placeholder = document.getElementById('placeholder');
		button.onclick = function(){
			if (opt1.value.length == 0) {
				alert('操作数1不可为空');
				return false;
			}else if (isNaN(opt1.value)) {
				alert('操作数1必须为数字');
				return false;
			}else if (opt2.value.length == 0) {
				alert('操作数2不可为空');
				return false;
			}else if (isNaN(opt2.value)) {
				alert('操作数2必须为数字');
				return false;
			}else{
				var data1 = parseFloat(opt1.value);
				var data2 = parseFloat(opt2.value);
			}
			var temp = 0;
			var option  = opt.value;
			switch(option){
				case 'numm':
					alert('请选择操作类型');
					return false;
				case 'add':
					temp = data1 + data2;
					break;
				case 'sub':
					temp = data1 - data2;
					break;
				case 'mul':
					temp = data1 * data2;
					break;
				case 'div':
					temp = data1 / data2;
					break;
			}
			placeholder.innerHTML = temp;
		}
	</script>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手写代码:

QN~O1BQI8`U{KOFKPB`C(GJ.png

ps:页面的样式基本都是对着老师的课件写的,js是自己写的。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议