Heim > Artikel > Web-Frontend > JS implementiert einen nachgeahmten Sina Weibo-Eingabeaufforderungsfunktionscode, wenn der veröffentlichte Inhalt leer ist_Javascript-Kenntnisse

JS implementiert einen nachgeahmten Sina Weibo-Eingabeaufforderungsfunktionscode, wenn der veröffentlichte Inhalt leer ist_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 15:44:151352Durchsuche

Das Beispiel in diesem Artikel beschreibt die JS-Implementierung der Eingabeaufforderungsfunktion, wenn der auf Sina Weibo gepostete Inhalt leer ist. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

JavaScript wird hier verwendet, um eine Funktion von Sina Weibo zu simulieren. Wenn der auf Weibo gepostete Inhalt leer ist, erinnert das Textfeld den Benutzer daran, dass es keinen Eingabeinhalt gibt. Diese Funktion sorgt dafür, dass sich die Webseite intelligent anfühlt, als würde man mit Ihnen sprechen. und sehr menschliche Veränderung. Dieser Spezialeffekt bezieht sich auf eine externe JS-Paketklasse, die Sie herunterladen und lokal verwenden können.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt:

<!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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：text-align:justify realisiert die Textausrichtung an beiden Enden und ist mit IE_javascript-Kenntnissen kompatibelNächster Artikel：text-align:justify realisiert die Textausrichtung an beiden Enden und ist mit IE_javascript-Kenntnissen kompatibel

In Verbindung stehende Artikel

Mehr sehen