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 相关文章推荐
jquery监控数据是否变化(修正版)
Apr 12 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
Javascript创建类和对象详解
May 31 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
JS实现li标签的删除
Apr 12 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 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中PDO的错误处理
2011/09/04 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
浅谈PHP中的
2016/04/23 PHP
session 加入redis的实现代码
2016/07/15 PHP
简单的自定义php模板引擎
2016/08/26 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
python操作ie登陆土豆网的方法
2015/05/09 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
Python实现的简单计算器功能详解
2018/08/25 Python
python3.x实现base64加密和解密
2019/03/28 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
django框架两个使用模板实例
2019/12/11 Python
深入浅析python的第三方库pandas
2020/02/13 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
酒店总经理欢迎词
2014/01/15 职场文书
小学毕业演讲稿
2014/04/25 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书