聊天器案例

最新推荐文章于 2025-12-28 01:00:43 发布

原创最新推荐文章于 2025-12-28 01:00:43 发布 · 805 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

这次我们学习的是聊天器案例，我们平时在用电子设备聊天的时候就会看到已下这种页面，

以下的页面是用JavaScript 获取id写成的。

1.HTML：写好盒子在盒子里面设置好聊天器要用到的标签并设置好标签。

<body>

<span>サイヤ人 : きみ君はこっけー滑稽だ</span></div>

<div class="btalk"><span>You're very funny : Joker</span>

</div>

<option value="1">Joker</option>

</select>

</div>

</body>

2.CSS：设置好类名的属性便于我们使用。

<style>

.talk_con{

width:600px;

height:500px;

border:1px solid #666;

margin:50px auto 0;

background:#f9f9f9;

}

.talk_show{

width:580px;

height:420px;

border:1px solid #666;

background:#fff;

margin:10px auto 0;

overflow:auto;

}

.talk_input{

width:580px;

margin:10px auto 0;

}

.whotalk{

width:80px;

height:30px;

float:left;

outline:none;

font-size: 14px;

}

.talk_word{

width:420px;

height:26px;

padding:0px;

float:left;

margin-left:10px;

outline:none;

text-indent:10px;

}

.talk_sub{

width:56px;

height:30px;

float:left;

margin-left:10px;

}

.atalk{

margin:10px;

}

.atalk span{

display:inline-block;

background:#0181cc;

border-radius:10px;

color:#fff;

padding:5px 10px;

}

.btalk{

margin:10px;

text-align:right;

}

.btalk span{

display:inline-block;

background:#ef8201;

border-radius:10px;

color:#fff;

padding:5px 10px;

}

.img{

height: 40px;

width: 60px;

}

.img1{

height: 45px;

width: 30px;

}

</style>

3.JavaScript：最重要的还是JavaScript，不知道要怎么写的话就先吧加载事件写上，然后就获取id名，然后把获取到的id名放入点击事件中，然后用if…else…调整人物语话的顺序，最后用innerHTML把代码运用到HTML中。

window.onload = function(){

//获取聊天框内容

var words = document.getElementById("words");

//获取多选框

var who = document.getElementById("who");

//获取输入框

var talkwords = document.getElementById("talkwords");

//获取发送按钮

var talksub = document.getElementById("talksub");

talksub.onclick = function () {

//选项框属性

var text1 = who.value;

//获取输入框属性

var text2 = talkwords.value;

/* 内容 */

var con = '';

if (text1 == 0) {

con = '<div class="atalk"><img src="./悟饭.jpg" alt="" class="img1"><span> サイヤ人 : '+ text2 + '</span></div>';

} else {

con = '<div class="btalk"><span>'+ text2 + ' : Joker</span> <img src="./2.jpg" alt="" class="img"></div>';

}

words.innerHTML = words.innerHTML + con;

}

</script>

小结：

聊天器案例是属于点击事件中的案例之一，关键的部分是JavaScript，注意if…else是为了做判断的，if 条件:满足条件时的操作else:不满足条件时的操作。

这是我所学到的JavaScript案例，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！