JavaScript--微博发布效果

最新推荐文章于 2024-04-30 16:57:21 发布

weixin_30642029

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量381

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mrszhou/p/7695168.html

版权

效果图：

实现思路：

当发布按钮被点击时，又会分为三种情况
1.如果输入的内容为空，弹出提示：不能发布空微博
2.如果输入的文字超过120，弹出提示，微博内容不能超过120
3.正常发布微博到列表里，并清空文本域。

4.消除 '< ' 对于文本域的影响.

代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             margin:0;
 9             padding:0;
10             list-style:none;
11         }
12         .weibo{width: 600px;border: 1px solid #ccc;margin: 100px auto;padding:10px;}
13         .weibo textarea{ width: 598px;height:140px;border: 1px solid #ccc;outline: none;resize: none; }
14         .weibo textarea:focus{border-color: #f40; }
15         .weibo button{ width: 80px;height: 30px;background: orange;color:#fff;border: 0 none;margin-top: 5px;border-radius: 3px;
16             cursor: pointer; }
17         .weibo button:hover{background-color: #f40; }
18         .weibo ul{margin-bottom: 10px;}
19         .weibo li{border-bottom: 1px dotted #ccc;overflow: hidden;font-size: 14px;line-height: 30px;}
20         .weibo li p{float: left;}
21         .weibo li span{float: right;color:#333;text-decoration: none;cursor: pointer;}
22         .weibo li span:hover{ color:#f40; }
23     </style>
24     <script>
25         window.onload = function () {
26 
27             var weibobox = document.getElementById("weibo");
28             var ul = weibobox.children[0];
29             var text = weibobox.children[1];
30             var btn = weibobox.children[2];
31 
32             btn.onclick = function () {
33                 // 获取输入内容(去掉前后空格)
34                 var value = text.value.trim();
35                 // 排除 < 字符对于文本域的影响
36                 if(value.indexOf("<") != -1) {
37                   value =  value.replace("<", "&lt;");
38                 }
39                 // 判断输入内容是否合法
40                 if(!value) {
41                     alert("输入内容不能为空！")
42                 }else if(value.length > 120) {
43                     alert("发出的微博字数不能超过120个！")
44                 }else {
45                     // 创建li元素
46                     var newli = document.createElement("li");
47                     // 设置li内容
48                     newli.innerHTML = "<p>"+value+"</p>";
49                     // 插入li到原来li节点前面
50                     ul.insertBefore(newli,ul.children[0]);
51                     // 清空文本域
52                     text.value = "";
53                 }
54 
55             }
56 
57         }
58     </script>
59 </head>
60 <body>
61 <div class="weibo" id="weibo">
62     <ul>
63         <li><p>快来收了这九款用上就停不下来的应用吧！！</p></li>
64         <li><p>超级详细的云南大理自助游攻略</p></li>
65         <li><p>外国最近很火的舞蹈，舒服简单自然，太棒了！</p></li>
66     </ul>
67     <textarea id="text"></textarea>
68     <button id="btn">发布</button>
69 </div>
70 </body>
71 </html>

转载于:https://www.cnblogs.com/mrszhou/p/7695168.html

weixin_30642029

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--微博发布效果

效果图：实现思路：当发布按钮被点击时，又会分为三种情况1.如果输入的内容为空，弹出提示：不能发布空微博2.如果输入的文字超过120，弹出提示，微博内容不能超过1203.正常发布微博到列表里，并清空文本域。4.消除 '< ' 对于文本域的影响.代码: 1 <!DOCTYPE html> 2 <html> 3 <head...
复制链接

扫一扫