Html开发之：个人小工具

最新推荐文章于 2024-04-14 15:40:49 发布

52o。

最新推荐文章于 2024-04-14 15:40:49 发布

阅读量312

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_43633797/article/details/112132860

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Html开发之：个人小工具

1、Html实现聊天会话窗口
- 展示
- 注意
2、JavaScript之Date数据类型格式化
- 展示

(声明：本教程仅供本人学习使用,如有人使用该技术触犯法律与本人无关)
(如果有错误，还希望指出。共同进步)

1、Html实现聊天会话窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<!-- overflow-y: auto; 垂直滚动条 --> 
		<ul style="width: 450px;height: 500px;overflow-y: auto;">
			<!-- 判断左边 -->
			<li class="left" style="margin-bottom: 20px;">
				<div style="width: 400px;display: flex;align-items: center;">
					<div>头像</div>
					<div style="max-width: 200px;padding: 10px;border-radius: 5px;background: paleturquoise;margin-left: 20px;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
				</div>
			</li>
			<!-- 判断右边 -->
			<li class="right" style="margin-bottom: 20px;">
				<div style="width: 400px;display: flex;flex-direction: row-reverse;align-items: center;">
					<div>头像</div>
					<div style="max-width: 200px;padding: 10px;border-radius: 5px;background: pink;margin-right: 20px;">内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
				</div>
			</li>
			<!-- 判断左边 -->
			<li class="left" style="margin-bottom: 20px;">
				<div style="width: 400px;display: flex;align-items: center;">
					<div>头像</div>
					<div style="max-width: 200px;padding: 10px;border-radius: 5px;background: paleturquoise;margin-left: 20px;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
				</div>
			</li>
			<!-- 判断右边 -->
			<li class="right" style="margin-bottom: 20px;">
				<div style="width: 400px;display: flex;flex-direction: row-reverse;align-items: center;">
					<div>头像</div>
					<div style="max-width: 200px;padding: 10px;border-radius: 5px;background: pink;margin-right: 20px;">内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
				</div>
			</li>
			<!-- 判断左边 -->
			<li class="left" style="margin-bottom: 20px;">
				<div style="width: 400px;display: flex;align-items: center;">
					<div>头像</div>
					<div style="max-width: 200px;padding: 10px;border-radius: 5px;background: paleturquoise;margin-left: 20px;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
				</div>
			</li>
			<!-- 判断右边 -->
			<li class="right" style="margin-bottom: 20px;">
				<div style="width: 400px;display: flex;flex-direction: row-reverse;align-items: center;">
					<div>头像</div>
					<div style="max-width: 200px;padding: 10px;border-radius: 5px;background: pink;margin-right: 20px;">内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
				</div>
			</li>
			<!-- 判断左边 -->
			<li class="left" style="margin-bottom: 20px;">
				<div style="width: 400px;display: flex;align-items: center;">
					<div>头像</div>
					<div style="max-width: 200px;padding: 10px;border-radius: 5px;background: paleturquoise;margin-left: 20px;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
				</div>
			</li>
			<!-- 判断右边 -->
			<li class="right" style="margin-bottom: 20px;">
				<div style="width: 400px;display: flex;flex-direction: row-reverse;align-items: center;">
					<div>头像</div>
					<div style="max-width: 200px;padding: 10px;border-radius: 5px;background: pink;margin-right: 20px;">内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
				</div>
			</li>
		</ul>
	</body>
</html>

展示

在这里插入图片描述

注意

【链接类地址会话内容会打乱页面格式】：在内容的style中添加“word-break: break-all;”

2、JavaScript之Date数据类型格式化

	<script type="text/javascript">
		var start_time
		function Date_Format(_date, fmt) {
			var o = {
				"M+": _date.getMonth() + 1, //月份
            	"d+": _date.getDate(), //日
            	"h+": _date.getHours(), //小时
            	"m+": _date.getMinutes(), //分
            	"s+": _date.getSeconds(), //秒
            	"q+": Math.floor((_date.getMonth() + 3) / 3), //季度
            	"S": _date.getMilliseconds() //毫秒
        	};
        	if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (_date.getFullYear() + "").substr(4 - RegExp.$1.length));
        	for (var k in o)
            	if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        		return fmt;
        };
        datenow = new Date(new Date().getTime() - 0.1 * 3600 * 1000);
     	start_time = Date_Format(datenow, "yyyy-MM-dd hh:mm:ss"),
     	console.log(start_time)
		
	</script>

展示

在这里插入图片描述

留坑：后期更新

52o。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html开发之：个人小工具

Html开发之：个人小工具1、Html实现聊天会话窗口展示注意2、JavaScript之Date数据类型格式化展示(声明：本教程仅供本人学习使用,如有人使用该技术触犯法律与本人无关)(如果有错误，还希望指出。共同进步)1、Html实现聊天会话窗口<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style typ
复制链接

扫一扫