search

Home >Web Front-end >JS Tutorial >JS implements imitation Sina Weibo prompt function code when the published content is empty_javascript skills

JS implements imitation Sina Weibo prompt function code when the published content is empty_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:44:151417browse

The example in this article describes the JS implementation of the prompt function when the posted content on Sina Weibo is empty. Share it with everyone for your reference. The details are as follows:

JavaScript is used here to simulate a function of Sina Weibo. When the content posted on Weibo is empty, the text box reminds the user that there is no input content. This function makes the webpage feel smart, like talking to you, and very human. change. This special effect refers to an external JS package class, which you can download and use locally.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-fsina-info-submit-empty-style-codes/

The specific code is as follows: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新浪微博发布功能</title>
<style type="text/css"> 
html,body{margin:0px;text-align:center;font-size:12px;background:#b2e2f9;}
.box{width:555px;height:auto;margin:30px auto;background:#fafafa;padding:30px;overflow:hidden;}
.boxf{width:555px;height:88px;float:left;position:relative;z-index:0;}
#textDisplay{width:555px;height:88px;position:absolute;left:0px;top:0px;word-wrap:break-word;word-break:normal;z-index:1;text-align:left;line-height:20px;font-family:Arial;font-size:12px;}
#list{width:164px;position:absolute;padding:1px;border:1px solid #cccccc;display:none;z-index:100;background:#fff;font-family:Arial;}
#list ul{margin:0px;padding:0px;float:left;list-style-type:none;}
#list li{width:164px;height:23px;float:left;text-indent:10px;line-height:23px;text-align:left;color:#333333;cursor:pointer;}
#list li.hove{background:#e6e6e6;}
textarea{width:555px;height:88px;border:1px solid #ccc;border-radius:5px;resize:none;position:absolute;top:0px;left:0px;z-index:2;font-family:Arial;font-size:12px;line-height:20px;overflow:hidden;}
textarea.hove{border:1px solid #ffb941;}
.title{width:555px;height:21px;text-align:left;padding-bottom:20px;}
.title span{float:right;color:#0a8cd2; padding-top:5px;}
.title span.color{color:#808080;padding:0px;margin-top:-3px;}
.title span em{font-style:normal;font-family:Constantia,Georgia;font-size:22px;font-weight:700;}
.btnf{width:555px;height:auto;overflow:hidden;padding-top:10px;}
.btn{width:82px;height:30px;background:url(images/201209/fb.jpg) no-repeat;cursor:pointer;float:right;}
.btnh{background:url(images/fb1.jpg) no-repeat;}
.back{background:#ffd4d4;}
.fbcg{width:110px;height:42px;background:url(images/fbcg.jpg) no-repeat;position:absolute;top:50%;left:50%;margin:-21px 0 0 -55px;z-index:10;display:none;}
.dis{display:block;}
.undis{display:none;}
#desc{border: 1px dashed #ccc;color:#333;background:#fff;line-height:2;padding:10px;width:533px;border-radius:5px; margin-top:20px;text-align:left;font-family:Arial;font-size:14px;}
</style>
<script type="text/javascript" src="js/at.js"></script>
<script type="text/javascript"> 
window.onload = function ()
{
 atRelease('', 'text', {box : 'box',list : 'list'});
}
</script>
</head> 
<body>
<div class="box">
 <div class="title">
  <span id="num140">前任现任人手一个，李晨泡妞神器石头心走红  24小时热博</span>
  <img src="images/title.jpg" />
 </div>
 <div class="boxf" id="box">
  <textarea id="text" rows="6" cols="60"></textarea>
  <div class="fbcg"></div>
 </div>
 <div class="btnf">
  <span class="btn"></span>
 </div>
 <dl id="desc">
  <dt>功能说明：</dt>
  <dd>① 限制输入140字符，超出字符提示数字变红；</dd>
  <dd>② @符关联好友微博列表；</dd>
  <dd>③ 键盘控制微博列表选中；</dd>
  <dd>④ 超出字符或空微博发送闪红；</dd>
  <dd>⑤ 发布成功提示。</dd>
  <dd class="ta-r"></dd>
 </dl>
</div>
<div id="list">
<ul>
 <li>选择最近@的人或直接输入</li>
  <li class="hove">wh乡下人</li>
  <li>幸福文盲作家</li>
  <li>我是张二蛋</li>
  <li>JD我行我酷</li>
  <li>色影无极</li>
  <li>朱心梦</li>
  <li>wh乡下人</li>
  <li>幸福文盲作家</li>
  <li>我是张二蛋</li>
 </ul>
</div>
</body>
</html>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：text-align:justify realizes text alignment at both ends and is compatible with IE_javascript skillsNext article：text-align:justify realizes text alignment at both ends and is compatible with IE_javascript skills

Related articles

See more