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

搜索
博主信息
博文 59
粉絲 0
評(píng)論 1
訪(fǎng)問(wèn)量 57371
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
選項(xiàng)卡與機(jī)器人客服功能實(shí)戰(zhàn)——2018年4月1日15時(shí)20分
白貓警長(zhǎng)的博客
原創(chuàng)
731人瀏覽過(guò)

         實(shí)戰(zhàn)中學(xué)習(xí)javascript的使用，第一個(gè)實(shí)戰(zhàn)是選項(xiàng)卡，這個(gè)項(xiàng)目在每個(gè)網(wǎng)站基本都會(huì)用的功能，很實(shí)用。第二個(gè)是機(jī)器 人客服，做起來(lái)還挺有趣的，缺點(diǎn)就是對(duì)代碼不是很熟練，多練咯。我分享下我自己的。

第一個(gè)：選項(xiàng)卡

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>選項(xiàng)卡</title>
	<style>
	.bos{
		width: 538px;
		height: 500px;
		margin: 20px auto;
		border: 1px solid #ccc;
		font-size: 13px;
	}
	.bos>ul{
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #eeeeee;
	}
	.bos>ul li{
		width: 90px;
		height: 35px;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		float: left;
		list-style: none;
		text-align: center;
		line-height: 35px;
	}
	.bos>ul .mo{
		background-color: #fff;
		border-bottom: none;
		border-top: 3px solid red;
	}
	.bos ul+span{
		width: 90px;
		height: 35px;
		line-height: 35px;
		float: right;
		margin-top: -35px;
	}
	.bos ul+span>a{
		text-decoration: none; 
	}
	.bos div{
		display: none;
	}
	.bos div ul{
		margin: 0;
		padding: 10px;
	}
	.bos div ul li{
		list-style: none;
		line-height: 28px;
	}
	.bos div ul li a{
		text-decoration: none;
	}
	.bos div ul li a:hover{
		color: red;
	}
	.bos div ul li span{
		float: right;
		color: red;
	}

	</style>
</head>
<body>
	<div class="bos">
		<!-- 選項(xiàng)卡 -->
		<ul>
			<li class="mo">PHP教程</li>
			<li>JS教程</li>
			<li>MySQL教程</li>
			<li>CSS教程</li>
		</ul>
		<span><a href="">更多下載>></a></span>
		<!-- 列表 -->
		<div class="list" style="display: block;">
			<ul>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>
				<li><a href="">PHP教程  |  PHP序列化和反序列化詳解</a><span>2018-3-30</span></li>	
			</ul>
		</div>
		<div class="list">
			<ul>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload實(shí)現(xiàn)多文件上傳</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload實(shí)現(xiàn)多文件上傳</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload實(shí)現(xiàn)多文件上傳</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload實(shí)現(xiàn)多文件上傳</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload實(shí)現(xiàn)多文件上傳</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload實(shí)現(xiàn)多文件上傳</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload實(shí)現(xiàn)多文件上傳</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload實(shí)現(xiàn)多文件上傳</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload實(shí)現(xiàn)多文件上傳</a><span>2018-3-30</span></li>
				<li><a href="">JS教程 | 怎么用AjaxFileUpload實(shí)現(xiàn)多文件上傳</a><span>2018-3-30</span></li>
			</ul>
		</div>
		<div class="list">
			<ul>
				<li><a href="">MySQL教程 | 數(shù)據(jù)庫(kù)與表顯示、創(chuàng)建、刪除-MySql參考手冊(cè)</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 數(shù)據(jù)庫(kù)與表顯示、創(chuàng)建、刪除-MySql參考手冊(cè)</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 數(shù)據(jù)庫(kù)與表顯示、創(chuàng)建、刪除-MySql參考手冊(cè)</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 數(shù)據(jù)庫(kù)與表顯示、創(chuàng)建、刪除-MySql參考手冊(cè)</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 數(shù)據(jù)庫(kù)與表顯示、創(chuàng)建、刪除-MySql參考手冊(cè)</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 數(shù)據(jù)庫(kù)與表顯示、創(chuàng)建、刪除-MySql參考手冊(cè)</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 數(shù)據(jù)庫(kù)與表顯示、創(chuàng)建、刪除-MySql參考手冊(cè)</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 數(shù)據(jù)庫(kù)與表顯示、創(chuàng)建、刪除-MySql參考手冊(cè)</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 數(shù)據(jù)庫(kù)與表顯示、創(chuàng)建、刪除-MySql參考手冊(cè)</a><span>2018-3-30</span></li>
				<li><a href="">MySQL教程 | 數(shù)據(jù)庫(kù)與表顯示、創(chuàng)建、刪除-MySql參考手冊(cè)</a><span>2018-3-30</span></li>
			</ul>
		</div>
		<div class="list">
			<ul>
				<li><a href="">CSS教程 | 如何使用CSS樣式來(lái)美化網(wǎng)頁(yè)技術(shù)</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS樣式來(lái)美化網(wǎng)頁(yè)技術(shù)</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS樣式來(lái)美化網(wǎng)頁(yè)技術(shù)</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS樣式來(lái)美化網(wǎng)頁(yè)技術(shù)</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS樣式來(lái)美化網(wǎng)頁(yè)技術(shù)</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS樣式來(lái)美化網(wǎng)頁(yè)技術(shù)</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS樣式來(lái)美化網(wǎng)頁(yè)技術(shù)</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS樣式來(lái)美化網(wǎng)頁(yè)技術(shù)</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS樣式來(lái)美化網(wǎng)頁(yè)技術(shù)</a><span>2018-3-30</span></li>
				<li><a href="">CSS教程 | 如何使用CSS樣式來(lái)美化網(wǎng)頁(yè)技術(shù)</a><span>2018-3-30</span></li>
		</div>

	</div>

	<script type="text/javascript" src="../0331/js.js"></script>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例


Javascript代碼實(shí)例：

var bos = document.getElementsByClassName('bos')[0]
var ul = bos.getElementsByTagName('ul')[0]
var tab = ul.getElementsByTagName('li')

var list = bos.getElementsByTagName('div')
for (var i = 0; i<tab.length; i++) {
	tab[i].index = i
	tab[i].onmouseover = function(){

		for (var i=0; i<tab.length; i++) {
			tab[i].className = ' '
			list[i].style.display = 'none'
		} 

		this.className = 'mo'

		list[this.index].style.display = 'block'
	}
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例


運(yùn)行后結(jié)果圖：

xuan.png

第二個(gè)實(shí)戰(zhàn)：機(jī)器人客服

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>智能在線(xiàn)客服</title>
	<style>
		div:nth-child(1){
			width: 450px;
			height: 650px;
			background-color: #1e90ff;
			margin: 30px auto;
			border-radius: 5px;
			box-shadow: 3px 3px 3px #808080;
		}
		div:nth-child(2){
			width: 400px; 
			height: 500px;
			background-color: #fff;
			margin: auto;
			border: 4px double #1e90ff;
			border-radius: 5px;

		}
		h2{
			text-align: center;
			padding-top: 10px;
			color: #fff;
		}
		ul{
			margin:0;
			padding: 10px;
			overflow: hidden;
			list-style: none;
		}
		ul li{
			margin:5px 0;
		}
		ul li img{
			margin-right: 5px;
		}
		table{
			margin: 15px auto;

		}
		table textarea{
			border: none;
			resize: none;
			border-radius: 5px;
		}
		table button{
			padding: 15px;
			border: none;
			background-color: green;
			color: #fff;
			border-radius: 5px;
		}
		table button:hover{
			background-color: coral;
		}
	</style>
</head>
<body>
	<div>
		<h2>智能在線(xiàn)客服</h2>
		<div contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td align="right"><textarea name="text" id="" cols="50" rows="3"></textarea></td>
				<td align="left"><button type="button">發(fā)送</button></td>
			</tr>
		</table>
	</div>
	<script type="text/javascript">
		// 1.先獲取頁(yè)面中的元素，如文本域，按鈕，對(duì)話(huà)框
		var ann = document.getElementsByTagName('button')[0]
		var text = document.getElementsByName('text')[0]
		var dia = document.getElementsByTagName('ul')[0]
		var sum = 0

		// 2.給獲取的元素添加事件
		ann.onclick = function(){
			if(text.value.length == 0){
			alert('客官，您是否忘記輸入東西了')
			return false
			}

			var comeer = text.value

			//立即清空用戶(hù)信息區(qū)
			text.value = ''

			//創(chuàng)建一個(gè)新節(jié)點(diǎn)li
			var li = document.createElement('li')

			li.innerHTML = comeer

			var userPic = '<img src="../0330/images/fbb.jpg" width="30" style="border-radius:50%">'
			li.innerHTML = userPic+comeer

			// 將新節(jié)點(diǎn)插入到對(duì)話(huà)列表中
			dia.appendChild(li)
			sum += 1

			setTimeout(function(){
				var info = ['您有什么想對(duì)我說(shuō)的嗎','明天一起去吃飯好嗎','后天去約會(huì)了','好累啊','呼叫我做啥呢']
				var temp = info[Math.floor(Math.random()*4)]
				//取1-5之間的一個(gè)整數(shù):Math.floor(Math.random()*6 + 1)
				var reply = document.createElement('li')
				var kefuPic = '<img src="../0330/images/jingtian.jpg" width="30" style="border-radius:50%;">'
				// reply.innerHTML = '你有啥事呀,我的帥哥哥' +kefuPic
				reply.innerHTML = kefuPic + '<span style="color:red">'+temp+'</span>'
				// reply.style.float = 'right'

				dia.appendChild(reply)
				sum += 1

			},2000)

			if (sum > 10) {
				dia.innerHTML = ''
				sum = 0
			}

		}

	</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例


運(yùn)行后效果圖：

kefu.png


手抄作業(yè)：

1.jpg2.jpg3.jpg4.jpg



總結(jié)： 用到的新代碼還是有很多，努力記吧。

批改狀態(tài)：合格

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

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

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