2021-05-01

最新推荐文章于 2025-03-12 14:29:45 发布

山有木兮木有枝_雅俗共赏

最新推荐文章于 2025-03-12 14:29:45 发布

阅读量186

点赞数

本文链接：https://blog.csdn.net/weixin_57727027/article/details/116327682

版权

简单实现微信聊天框。

1.首先使用Visual Studio 2015创建一个HTML文档：

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>自定义名称</title>
</head>
<body>
<div>
</div>
</body>
</html>

2.在<body>内设置微信聊天框的基本框架：

设置一个自定义名称为wrap的div,里面放置两个div，一个名为messagebox,另一个名为box。

第一个div里面放置一组无序列表（<ul><li>…</li></ul>）标签，在li标签内放置行内元素span标签。

第二个div里面放置一组下拉列表<select><option >…</option></select>标签。下拉列表中可以进行选择。设置一个文本框 <input type="text">，一个按钮button。

3.设置微信聊天框的样式：

在head标签里面添加内嵌样式（内联样式）style标签。

*通配符选择到所有元素，设置外边距和内边距为0，把元素默认样式取消掉。*{margin: 0; padding: 0;}

选择到li标签，把无序列表默认的小圆点取消掉。ul,li{list-style:none; }

列表属性：(List-style)

类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

图像list-style-image: url(..);

依次设置元素的样式：

背景属性：(background)

色彩：background-color: #666;

图片：background-image: url();

重复：background-repeat: no-repeat; 不重复

滚动：background-attachment: fixed;(固定) scroll;(滚动)

位置：background-position: left(水平) top(垂直);

简写：background:#333 url(..)

border-radius：该属性用于指定圆角边框的圆角半径。

border-top-left-radius:该属性用于指定左上角的圆角半径。

border-top-right-radius:该属性用于指定右上角的圆角半径。

border-bottom-left-radius:该属性用于指定左下角的圆角半径。

border-bottom-right-radius:该属性用于指定右下角的圆角半径。

4.body内部引入jquery-3.2.1.min.js。

在body内部使用内嵌js，

优点：1.使结构分离更清晰(较行内JS)。2.当前页面可以复用 3.利于后期维护和修改

缺点：1.只能当前页面使用，不能多页面复用。2.多页面之间的维护比较麻烦。花费的时间和精力更多。

使用jquery里面的一些方法，更换javascript里面的一些方法，就是可以少写一些代码，简单实用。简单理解jquery就是把javascript里的方法进行封装，可以直接使用。

<script>

//直接获取按钮的ID,给与单击事件(点击事件),声明一个匿名函数

$("#button").click(function () {

// 声明一个变量自定义名称通过ID获取元素

var word = $("#word");

//声明一个变量自定义名称通过ID获取元素设置获得匹配元素的当前值。

var who = $("#who").val();

var world = $("#talkworld").val();

// if条件判断语句判断条件为空时，执行{}里的代码-弹出一个警告框

if (world == "") {

alert("输入不能为空.");

//当if条件不成立时，执行else里的代码 else里面内嵌一个if-if else语句

} else {

if (who == "talkA") {

// 在文档中创建元素-li 声明变量,变量的名称 createElement创建元素

var li = document.createElement("li");

//设置li的类名为talkA

li.className = "talkA";

//使用jq方法->把js对象转换成jq对象$(li)

$(li).html("同学A<span>" + world + "</span>");

word.append($(li));//append()向每个匹配的元素内部追加内容在li标签内部追加内容(li)}

else if (who == "talkB") {

//在文档中创建元素-li 声明变量,变量的名称 createElement创建元素

var li = document.createElement("li");

//设置li的类名为talkB

li.className = "talkB";

//html() 可以用于设定HTML内容的值

$(li).html("<span>" + world + "</span>同学B");

//append() 给li标签元素内部追加内容

word.append($(li));

}

})

</script>

5.谷歌浏览器显示为：