博客列表 >Javascript基础入门实战: 相册与计算器-3月29日作业

Javascript基础入门实战: 相册与计算器-3月29日作业

潮涌学习php的博客
潮涌学习php的博客原创
2018年04月06日 14:35:45819浏览

这一节课学习了JavaScript的基础入门知识。

1、获取变量:var = 

2、获取要被替换的对象:

var 元素 = document.getElementById('元素id值')

3、替换对象:

替换的对象 = 获取到的变量

innerHTML表示在元素中的东西

3.29-1.jpg

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2.实战明星相册</title>

	<style type="text/css">
		.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: skyblue;
			margin-left:20px;
		}
		.box ul li a {
			display:block;
			width:100px;
			height:40px;
			line-height:40px;
			color:white;
			text-decoration-line: none;
		}
		.box ul li a:hover {
			font-size: 1.2em;
			background-color:coral;
		}
		.box .pic {
			width:450px;
			height:470px;
			border:1px solid lightgray;
			line-height:1px;
			margin:auto;
			margin-top:50px;
		}
		.box .pic img {
			width:100%;
			height:100%;
		}
	</style>
</head>
<body>
<!-- 	知识点:
	1、js代码写在哪
	2、如何调用?
	3、函数的用法 -->

	<div class="box">
		<h2>明星相册</h2>
		<ul>
			<li>
				<a href="../images/zly.jpg" title="《楚乔传》,《花千骨》,《陆贞传奇》..." onclick="changePic(this); return false">赵丽颖</a>
			</li>

			<li>
				<a href="../images/gyy.jpg" title="《倚天屠龙记》,《咱们结婚吧》,《爱无悔》..." onclick="changePic(this); return false">高圆圆</a>
			</li>

			<li>
				<a href="../images/sl.jpg" title="《那年花开月正圆》,《甄嬛传》,《玉观音》..." onclick="changePic(this); return false">孙俪</a>
			</li>

			<li>
				<a href="../images/fbb.jpg" title="《还珠格格》,《武媚娘传奇》,《我不是潘金莲》..." onclick="changePic(this); return false">范冰冰</a>
			</li>
		</ul>

		<div class="pic">
			<img src="../images/zwt.png" alt="" id="img">
		</div>
		<p id="info"></p>
	</div>
	
	<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>
</body>
</html>

运行实例 »

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


迷你计算器:

3.29-2.png

实例

<!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;
			margin:20px auto;
			text-align:center;
			color:#636363;
			box-shadow:2px 2px 2px #999;
		}
		table {
			margin: auto;
			/*border: 1px solid red;*/
		}
		td{
			/*border:1px solid blue;*/
			width: 100px;
			height: 30px;
			padding: 5px 10px;
		}
		input, select {
			width: 100%;
			height: 30px;
			border: none;
			text-align: center;
		}
		button {
			width: 100%;
			height: 100%;
			border:none;
			background-color:skyblue;
			color:white;
		}
		button:hover{
			background-color:coral;
			width: 105%;
			height:105%;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<!-- 知识点:1、获取页面元素的方法;2、条件判断语句;3、条件函数的用法 -->
	<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 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() {
			if (opt1.value.length == 0) {
				alert('第一个操作数不能为空')
				opt1.focus()
				return false
			} else if (isNaN(opt2.value)) {
				alert('非法数据:第二个操作数必须为数字')
			} else if (opt2.value.length == 0) {
				alert('第二个操作数不能为空')
				opt2.focus()
				return false
			} else if (isNaN(opt2.value)) {
				alert('非法数据:第二个操作数必须为数字')
			} 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('除数不能为0')
						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>

运行实例 »

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


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