核心内容摘要
提示工程架构师亲授：智能交通中的5个关键Prompt设计
架构如下weibo.css* {margin: 0;padding: 0;}ul {list-style: none;}.w {width: 900px;margin: 0 auto;}.controls textarea {width: 878px;height: 100px;resize: none;border-radius: 10px;outline: none;padding-left: 20px;padding-top: 10px;font-size: 18px;}.controls {overflow: hidden;}.controls div {float: right;}.controls div span {color: #666;}.controls div .useCount {color: red;}.controls div button {width: 100px;outline: none;border: none;background: rgb(252, 251,
;height: 30px;cursor: pointer;color: #fff;font: bold 14px 宋体;transition: all
5s;}.controls div button:hover {background: rgb(0, 225,
;}.controls div button:disabled {background: rgba(0, 225, 255,
0.
;}.contentList {margin-top: 50px;}.contentList li {padding: 20px 0;border-bottom: 1px dashed #ccc;position: relative;}.contentList li .info {position: relative;}.contentList li .info span {position: absolute;top: 15px;left: 100px;font: bold 16px 宋体;}.contentList li .info p {position: absolute;top: 40px;left: 100px;color: #aaa;font-size: 12px;}.contentList img {width: 80px;border-radius: 50%;}.contentList li .content {padding-left: 100px;color: #666;word-break: break-all;}.contentList li .the_del {position: absolute;right: 0;top: 0;font-size: 28px;cursor: pointer;}media (max-width: 920px) {.w {width: 95%;padding: 0 15px;}.controls textarea {width: calc(100% - 40px);}}/* 微博项悬停效果 */.contentList li:hover {background-color: #f9f9f9;transform: translateY(-2px);transition: all
3s ease;}/* 发布按钮悬停效果增强 */.controls div button:hover {background: rgb(0, 195,
;transform: scale(
1.
;}/* 删除按钮样式增强 */.contentList li .the_del:hover {color: #ff3333;transform: scale(
1.
;}/* 微博内容换行 */.contentList li .content {line-height:
6;font-size: 16px;margin-top: 10px;}/* 用户信息样式优化 */.contentList li .info span {color: #333;font-weight: bold;}.contentList li .info p {color: #666;}body {background-color: #f5f8fa;font-family: Microsoft YaHei, Arial, sans-serif;line-height:
5;}.w {background: white;border-radius: 10px;padding: 25px;box-shadow: 0 2px 10px rgba(0,0,0,
0.
;}.contentList li {border: 1px solid #e6ecf0;border-radius: 10px;padding: 18px;margin-bottom: 15px;background: #fafafa;}.contentList img {border-radius: 50%;border: 2px solid #1da1f2;}.contentList li .info span {color: #333;font-size: 16px;font-weight: bold;}.controls div button {border-radius: 18px;font-weight: bold;}.controls textarea {border: 2px solid #ccd6dd;border-radius: 8px;padding: 12px;}.controls textarea:focus {border-color: #1da1f2;outline: none;}weibo.js// 日期格式化函数 - 保留原有function getTime() {var date new Date();var year date.getFullYear();var month date.getMonth() 1;month month 10 ? 0 month : month;var day date.getDate();day day 10 ? 0 day : day;var hours date.getHours();hours hours 10 ? 0 hours : hours;var minutes date.getMinutes();minutes minutes 10 ? 0 minutes : minutes;var seconds date.getSeconds();seconds seconds 10 ? 0 seconds : seconds;var str year - month - day hours : minutes : seconds;return str;}//
获取元素var area document.querySelector(#area);var send document.querySelector(#send);var useCount document.querySelector(.useCount);var ul document.querySelector(ul);// 用户数据数组 - 确保这个存在var dataArr [{ uname: 司马懿, imgSrc: ./images/
5/
jpg },{ uname: 女娲, imgSrc: ./images/
5/
jpg },{ uname: 百里守约, imgSrc: ./images/
5/
jpg },{ uname: 亚瑟, imgSrc: ./images/
5/
jpg },{ uname: 虞姬, imgSrc: ./images/
5/
jpg },{ uname: 张良, imgSrc: ./images/
5/
jpg },{ uname: 安其拉, imgSrc: ./images/
5/
jpg },{ uname: 李白, imgSrc: ./images/
5/
jpg },{ uname: 阿珂, imgSrc: ./images/
5/
jpg },{ uname: 墨子, imgSrc: ./images/
5/
jpg },{ uname: 鲁班, imgSrc: ./images/
5/
jpg },{ uname: 嬴政, imgSrc: ./images/
5/
jpg },{ uname: 孙膑, imgSrc: ./images/
5/
jpg },{ uname: 周瑜, imgSrc: ./images/
5/
jpg },{ uname: 老夫子, imgSrc: ./images/
5/
jpg },{ uname: 狄仁杰, imgSrc: ./images/
5/
jpg },{ uname: 扁鹊, imgSrc: ./images/
5/
jpg },{ uname: 马可波罗, imgSrc: ./images/
5/
jpg },{ uname: 露娜, imgSrc: ./images/
5/
jpg },{ uname: 孙悟空, imgSrc: ./images/
5/
jpg },{ uname: 黄忠, imgSrc: ./images/
5/
jpg },{ uname: 百里玄策, imgSrc: ./images/
5/
jpg }];//
功能1文本域输入的过程中统计内容的个数给spanarea.oninput function () {var count this.value.length;useCount.innerText count;// 添加字数限制提示if (count
{useCount.style.color red;send.disabled true;} else {useCount.style.color #666;send.disabled false;}};//
功能2点击发布按钮创建li追加到ul中send.onclick function () {var v area.value.trim();//
3 检测内容的长度是否等于0若等于0提示不能为空if (v.length
{alert(内容不能为空);return;}// 检查字数是否超过限制if (v.length
{alert(内容不能超过200字);return;}// 随机选择一个用户var randomIndex Math.floor(Math.random() * dataArr.length);var randomUser dataArr[randomIndex];//
4 创建li插入到ul中最前面var newLi document.createElement(li);ul.insertBefore(newLi, ul.children[0]);//
5 创建一个类名为info的div追加到li中var info document.createElement(div);info.className info;newLi.appendChild(info);//
3.
1 创建一个img元素追加到类名为info的div中var img document.createElement(img);info.appendChild(img);//
3.
2 设置img的src - 使用随机用户头像img.src randomUser.imgSrc;img.alt randomUser.uname;//
3.
3 创建一个span元素追加到类名为info的div中var span document.createElement(span);info.appendChild(span);//
3.
4 设置span的内容 - 使用随机用户名span.innerText randomUser.uname;//
3.
5 创建一个p元素追加到类名为info的div中var p document.createElement(p);info.appendChild(p);//
3.