收藏
批改狀態(tài)：合格
老師批語：
本來是0401就寫好的但是周日身體不舒服，就沒手寫，今天感覺不管好不好，不寫都不好了?。?！
這次寫的是一個(gè)智能的隨機(jī)聊天的機(jī)器人，娛樂成分大，關(guān)于老板之類的大家一笑而過?。?！
說下幾個(gè)關(guān)鍵點(diǎn)或者說是注意事項(xiàng)吧
創(chuàng)建一個(gè)隨機(jī)的數(shù)組，提前錄好你要回復(fù)的信息
將輸入框的內(nèi)容或隨機(jī)的內(nèi)容展示出來
展示隨機(jī)的內(nèi)容需要加個(gè)setTimeout 定時(shí)器 延遲展示
當(dāng)內(nèi)容數(shù)量過多是清空
現(xiàn)在來看看實(shí)例吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兩個(gè)手機(jī)</title>
<style type="text/css">
#box{
width: 250px;
height: 450px;
border-radius: 20px;
border: 1px solid #ccc;
background-color: #00bcd4;
margin:50px auto;
}
h5{
text-align: center;
margin: 6px auto;
}
#box1{
width: 230px;
height: 360px;
background-color: #fff;
margin: auto;
padding: 3px;
}
#box2{
width: 230px;
height: 20px;
margin:9px auto;
}
#txt{
height: 24px;
border-radius: 9px;
}
#btn{
height: 30px;
width: 50px;
border-radius: 9px;
}
p{
margin: 0;
padding: 2px;
line-height: 1.2em;
}
.left{
clear: both;
float: left;
color: #00bcd4;
}
.right{
clear: both;
float: right;
color: #ffc107;
}
</style>
</head>
<body>
<div id="box">
<h5>傻逼老板</h5>
<div id="box1">
</div>
<div id="box2">
<input type="text" name="" id="txt">
<button id="btn">發(fā)送</button>
</div>
</div>
<script type="text/javascript">
var txt=document.getElementById('txt')
var oBtn=document.getElementById('btn')
var oBox=document.getElementById('box1')
//用來計(jì)數(shù)當(dāng)p的數(shù)目達(dá)到14時(shí)清空。
var sum=0
oBtn.onclick=function(){
if(txt.value==''){
txt.value="老板你是傻逼！"
}
//創(chuàng)建一個(gè)p標(biāo)簽
var p=document.createElement('p')
//加個(gè)class
p.className='left'
//p標(biāo)簽里內(nèi)容
p.innerHTML='我：' + txt.value
//放到oBox里
oBox.appendChild(p)
//清空輸入框
txt.value=''
sum +=2
setTimeout(function(){
info=['是的我是','我是傻逼','是我不對(duì)','我是...','我不是人','我對(duì)不起你們大家','你打死我吧','我該死','今天我就解散公司','我去裸奔']
tamp=info[Math.floor(Math.random()*10)]
var pp=document.createElement('p')
pp.className='right'
pp.innerHTML= tamp + ' :老板'
oBox.appendChild(pp)
},1000)
//用來計(jì)數(shù)當(dāng)p的數(shù)目達(dá)到14時(shí)清空。同時(shí)sum歸零
if(sum==14){
oBox.innerHTML=' '
sum=0
}
}
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
手寫加強(qiáng)記憶
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)