博客列表 >【3.29】PHP作业-script的应用1

【3.29】PHP作业-script的应用1

51靓号网-专注QQ靓号十年精品
51靓号网-专注QQ靓号十年精品原创
2018年03月30日 16:49:36510浏览

1.gif

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>壁纸预览</title>
	<style type="text/css">
	.box {
		width: 960px;
		height: 600px;
		border: 1px solid #696969;
		background-color: #FFE4B5;
		margin: 50px auto;
		box-shadow: 8px 8px 8px #696969;
	}
	.box .box1 {
		width: 200px;
		height: 580px;
		border: 1px solid #696969;
		margin-top: 10px; 
		margin-left: 10px;
		text-align: center;
		float: left;
	}
	.box .box1 ul {
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	.box .box1 ul li {
		list-style-type: none;
		margin-top: 40px;
		margin-left: 48px;
		width: 100px;
		height: 40px;
		background-color:skyblue;
		border-radius:8px;
		
		

	}
	.box .box1 ul li a {
		display: block;
		text-decoration:none;
		color: white;
		line-height: 40px;
	}

	.box .box2 {
		width: 730px;
		height: 580px;
		border: 1px solid #696969;
		float: left;
		margin-top: 10px;
		margin-left: 10px;
		text-align: center;
	}

	.box .box2 .pic {
		width: 680px;
		height: 425px;
		margin: 25px auto;
		border: 1px solid #696969; 
		/*line-height: 1px;*/
	}

	.box .box2 .pic img {
		width: 100%;
		height: 100%;
	}

	</style>
</head>
<body>
	<div class="box">
		<div class="box1">
		<h2>壁纸预览</h2>
		<ul>
			<li><a href="images/2.jpg" title="小清新壁纸" onclick="changePic(this); return false">壁纸1</a></li>
			<li><a href="images/3.jpg" title="小清新壁纸" onclick="changePic(this); return false">壁纸2</a></li>
			<li><a href="images/4.jpg" title="小清新壁纸" onclick="changePic(this); return false">壁纸3</a></li>
		</ul>
		</div>
		
		<div class="box2">
		<div class="pic"><img src="images/1.jpg" alt="" id="img"></div>
		<p id="jieshao"></p>
		</div>
	</div>
	<!-- 1.获取函数 -->
	<!-- 2.绑定事件 -->
	<!-- 3.书写逻辑 -->
<!-- 	<script type="text/javascript">
		function changePic(pic) {
			//1.获取到要替换的明星图片与简介信息
			var picUrl = pic.href
			var picInfo = pic.title
			var picName = pic.innerHTML

			//2.获取到页面中,要被替换掉的图像元素对象
			var img = document.getElementById('img')
			var p = document.getElementById('info')

			//3. 将对应的图像与信息占位符进行替换
			img.src = picUrl
			p.innerHTML = picName+':'+picInfo
			p.innerHTML = '<span style="color:coral">'+picName+':'+picInfo+'</span>'

		}
	</script> -->

	<script type="text/javascript">
		function changePic(pic) {
			var picurl = pic.href
			var picaaa = pic.title
			var picname = pic.innerHTML

			var img = document.getElementById('img')
			var p = document.getElementById('jieshao')

			img.src = picurl
			p.innerHTML = picname+':'+picaaa
			p.innerHTML = '<span style="color:coral">'+picname+':'+picaaa+'</span>'

		}
	</script>

</body>
</html>

运行实例 »

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

QQ截图20180330174917.png

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算机</title>
	<style type="text/css">

	.box {
		width: 500px;
		height: 200px;
		background-color: #FFE4E1;
		border:1px solid lightskyblue;
		text-align: center;
		box-shadow: 8px 8px 8px #FF6A6A;
		border-radius: 10px;
		margin: auto;
		margin: 100px auto;
		
	}
table {
			margin: auto;
			/*border: 1px solid red;*/
		}

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

		input, select {
			width: 100%;
			height:100%;
			border:none;
			text-align: center;
			/*background-color: cyan;*/
		}

		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>super计算器</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 type="text/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(){
			// var data1 = parseFloat(opt1.value)
			// var data2 = parseFloat(opt2.value)


			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
			}

			// placeholder.innerHTML = '<span style="color:coral">'+data1+' '+ flag+' '+ data2+' = '+temp +'</span>'

			var str = '<span style="color:coral">'
			str += data1+' '+flag+' '+data2 + ' = ' + temp 
			str += '</span>'
			placeholder.innerHTML = str
		}


	</script>
</body>
</html>

运行实例 »

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


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