亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 59
粉絲 0
評論 1
訪問量 57381
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
明星相冊與迷你計算器實戰(zhàn)案例——2018年3月30日22時35分
白貓警長的博客
原創(chuàng)
833人瀏覽過

通過以下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="《仙劍奇?zhèn)b傳》，《杉杉來了》，《楚喬傳》" 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樣式調(diào)用：

實例

.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樣式調(diào)用：

實例

		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.將對應(yīng)的圖像與信息點位符進(jìn)行替換
	img.src = picUrl
	p.innerHTML = picName+':'+picInfo
	p.innerHTML = '<span style="color:coral">'+picName+':'+picInfo+'</span>'
}

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例


最終運行效果圖如下：

2.png


第二個案例：迷你計算器


實例

<!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="輸入數(shù)字"></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="輸入數(shù)字">
						<button type="button">計算</button>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="right"><h2>結(jié)果：</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.獲取操作數(shù),按鈕與結(jié)果占位符
		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.給按鈕添加事件,執(zhí)行計算操作
		btn.onclick = function(){
			if (opt1.value.length == 0 ) {
				alert('第一個操作數(shù)不能為空')
				opt1.focus()
				return false
			} else if (isNaN(opt1.value)) {
				alert('第一個操作數(shù)必須為數(shù)字')
				opt1.focus()
				return false
			} else if (opt2.value.length == 0) {
				alert('第二個操作數(shù)不能為空')
				opt2.focus()
				return false
			} else if (isNaN(opt2.value)) {
				alert('第二個操作數(shù)必須為數(shù)字')
				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('除數(shù)不能為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
		}

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例


運行后案例預(yù)覽圖：

jisuanqi.png


手抄迷你計算器代碼作業(yè)：

1.jpg2.jpg3.jpg4.jpg5.png


總結(jié)：第一次接觸JS，寫的時候完全不知道如何下手，就按老師的代碼重復(fù)的敲，給不理解的地方也做了注釋，筆記。慢慢的可以用回憶來寫了。繼續(xù)努力吧，希望能跟得上老師的腳步，從真實的案例中學(xué)到更多的東西，能吸收就好。

批改狀態(tài)：未批改

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)