JS实现仿新浪微博发布内容为空时提示功能代码


Posted in Javascript onAugust 19, 2015

本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能。分享给大家供大家参考。具体如下:

这里使用JavaScript模拟新浪微博的一个功能,在发布微博的内容为空时,文本框提醒用户这里没有输入内容,本功能让人感觉网页很智能,在和你对话一样,很人性化。本特效引用了一个外部了JS封装类,你可下载到本地使用。

运行效果截图如下:

JS实现仿新浪微博发布内容为空时提示功能代码

在线演示地址如下:

具体代码如下:

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

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 #Javascript
js实现文本框支持加减运算的方法
Aug 19 #Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 #Javascript
纯CSS3代码实现滑动开关效果
Aug 19 #Javascript
js实现input框文字动态变换显示效果
Aug 19 #Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 #Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 #Javascript
You might like
PHP中for循环语句的几种变型
2006/11/26 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
PHP创建XML接口示例
2019/07/04 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
javascript表单验证大全
2015/08/12 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
Python实现将文本生成二维码的方法示例
2017/07/18 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
护士毕业生自我鉴定
2014/02/08 职场文书
中学生运动会入场词
2014/02/12 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
民事答辩状范本
2015/05/21 职场文书
检举信的写法
2019/04/10 职场文书