亚洲午夜久久久影院伊人,天堂а√在线地址在线,国产99久久亚洲综合精品

首頁 > 博客列表 > javascript初體驗之圖片切換與計算機(jī)

博主信息

博文 65

粉絲 3

評論 4

訪問量 79618

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

圖片切換實例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>網(wǎng)站選擇</title>
	<style type="text/css">
		*{
			margin: 0;padding: 0;
			text-decoration: none;
			list-style: none;
		}
		.box{
			width: 400px;
			height: 325px;
			background-color: #ccc;
			border: 1px solid #ccc;
			margin: 20px auto;
			box-shadow: 2px 2px 3px #ccc;
			text-align: center;
		}
		.box1{
			width: 400px;
			height: 50px;
		}
		.box ul li{
			width: 198px;
			height: 48px;
			float: left;
			line-height: 50px;
			border: 1px solid #fff;
			font-size: 36px;
		}

		.box ul li:hover{
			cursor: pointer;
			background-color: #fff;
		}
		.box-2{
			margin-top: 51px;
			width: 400px;
			height: 225px;
			background-color: #fff;
			line-height: 400px;
			font-size: 36px;
		}
		.box-3{
			margin-top: 1px;
			width: 400px;
			height:48px;
			background-color: #fff;
			line-height: 48px;
			font-size: 26px;
		}
		img{
			width: 100%;
		}


	</style>
</head>
<body>
	<div class="box">
		<div class="box-1">
			<ul>
				<li><a href="https://img.php.cn/upload/course/000/000/003/5a5091db685e6482.jpg" title="獨(dú)孤九賤(1)_HTML5視頻教程" onclick="Dom(this);return false">HTML</a></li>
				<li><a href="https://img.php.cn/upload/course/000/000/003/5a5099080616f758.jpg" title="獨(dú)孤九賤(2)_CSS視頻教程" onclick="Dom(this);return false;">CSS</a></li>
			</ul>
		</div>
		<div class="box-2">
			<img src="" id="bg">
		</div>
		<div class="box-3" id="ta"></div>
	</div>
	<script type="text/javascript">
		function Dom(et){
			document.getElementById('bg').src=et.href
			document.getElementById('ta').innerHTML=et.title
 		}
	</script>
</body>
</html>

運(yùn)行實例 ?

點擊 "運(yùn)行實例" 按鈕查看在線實例

他長這樣

計算機(jī)實例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>數(shù)學(xué)計算</title>
	<style type="text/css">
		*{
			margin: 0;padding: 0;
		}
		#id1,#id2{
			width: 300px;
			height: 50px;
			font-size: 34px;
			border: 0;
		}
		#doc{			
			width: 100px;
			height: 55px;
			font-size: 34px;
			border: 0;
		}
		#ys{			
			width: 50px;
			height: 40px;

			border: 0;
		}
		.box{
			max-width: 800px;
			margin: 20px auto
		}
		p{
			text-align: center;line-height: 5em;font-size: 36px;
		}

	</style>
</head>
<body bgcolor="#ccc">
	<div class="box">
	<input type="text" name="" id="id1">
	<select id="ys">
		<option value="aa">加</option>
		<option value="bb">減</option>
		<option value="cc">乘</option>
		<option value="dd">除</option>
	</select>
	<input type="text" name="" id="id2">
	<input type="button" name="" value="=" id="doc">
	<p>結(jié)果在這里顯示</p>

	</div>

	<script type="text/javascript">
		var id1=document.getElementById('id1')
		var id2=document.getElementById('id2')
		var Doc=document.getElementById('doc')
		var opt=document.getElementById('ys')

		Doc.onclick=function(){
			var p=document.getElementsByTagName('p')[0]

			//可能出現(xiàn)的問題1：沒有輸入
			if(id1.value.length==0 || id2.value.length==0){
				
				p.innerHTML="你還能不能好好的輸入了？？？"
				return false
			}
			//可能出現(xiàn)的問題1：不是數(shù)字
			if(isNaN(id1.value) || isNaN(id2.value)){
				p.innerHTML="你還能不能好好的算數(shù)了？？？"
				return false
			}

			var id11 = parseInt(id1.value)

			var id22 = parseInt(id2.value)

			var option  = opt.value
			var num = 0
			var flag = ''
			switch (option){
				case 'aa':
					flag = '+'
					num = id11 + id22					
					break
				case 'bb':
					flag = '-'
					num = id11 - id22
					break
				case 'cc':
					flag = '*'
					num = id11 * id22
					break
				case 'dd':
					flag = '/'
					if (id22 == 0) {
						p.innerHTML='大吼：除數(shù)不能為0,請重新輸入'

						return false
					} else {
						num = id11 / id22	
					}					
					break
			}

			p.innerHTML = id11 +' '+ flag +' '+ id22 + ' = ' + num

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

運(yùn)行實例 ?

點擊 "運(yùn)行實例" 按鈕查看在線實例