js微博发布框的实现
观察了微博发布框，
1.发现他的剩余文字是动态改变的，
2.且文字为零时 发布框颜色为暗色
3.文字不符合标准时提交不通过
整理了一下思路 js会主要用到的方法
1.onclick() //点击发布时触发
2.onmouseover()// 鼠标滑到 发布 触发
3.onmouseout() //鼠标离开 发布 时触发
4.onfocus() //点击到 输入框 时触发
5.onblur() //点击到 输入框 以外的区域触发
6.oninput() //输入内容改变时触发
以下是实现的思路
1.基本样式的实现 （就不赘述了）
2.判断输入框的内容 当没输入时 发布 一栏为暗色 当鼠标点击到输入框时 边框阴影出现 且文字提示出现 并随着文字输入增加相应数字减少
3.当鼠标点击到输入框外的内容时 ，边框阴影消失 文字提醒消失
4.当文字<=0 || >140时 发布 为暗色 且 当>140时 文字会提示超过的字数并建议转为长微博
5.定义getLength方法 来获取当前输入框的字数（当输入为汉字时 长度以aa计算） （用正则替换）
6.定义toChange方法 来修改输入框的数字变化
具体是修改innerHTML 来修改数字 并且在oninput执行时触发
以下是代码实现
<!DOCTYPE html>
<html>
<head land="en">
<meta charset="UTF-8">
<title>微博发布框</title>
<style type="text/css">
*{padding:0;margin: 0;font-size: 12px;}
.weibodiv{
margin: 20px auto;
width: 600px;
}
.ad{
background: url(img/1.png) no-repeat;
width: 291px;
height: 37px;
display: block;
float: left; }
.adtext{
float: right;
position: relative;
top: 14px;
line-height: 37px;
height: 37px;
}
.weibotext{
float: left;
top: 30px;
margin: 5px auto;
display: block;
}
textarea{
height: 170px;
width: 590px;
border: 1px solid rgb(64,224,208);
font-size: 20px;
overflow: auto;
}
#weibotextnum{
float: right;
font-size: 14px;
/* opacity: 0; */
}
#weibotextnumber{
font-size: 20px;
font-family:Bell MT; }
.post{
width: 80px;
height: 30px;
border: 1px solid;
text-align: center;
font-size: 20px;
text-decoration: none;
border-radius: 5px;
color: #ffffff;
background: #8BC528;
font-weight: bold;
float: right;
margin: 3px;
letter-spacing: 5px;
line-height: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="weibodiv">
<a href="" class="ad"></a>
<a href="" class="adtext">点击牛运按钮 赢取码上好礼</a>
<div class="weibotext">
<textarea></textarea>
<span id = "weibotextnum">还能输入<span id="weibotextnumber">140</span>字</span>
</div>
<span class="weibobottomlink"><img src="img/2.png" alt=""></span>
<a href="" class="post">广播</a>
<script type="text/javascript">
window.onload = function(){
var oT = document.getElementsByTagName('textarea')[0];//获取到输入框
var weibotext = document.getElementsByClassName('weibotext');////获取到输入区外容器
var weibotextnum = document.getElementById('weibotextnum');
var weibotextnumber = document.getElementById('weibotextnumber');
var oA = document.getElementsByClassName('post')[0];
var ie = !-[1,];//判断是否为IE //输入内容时执行
if(ie){
oT.onpropertychange = toChange;
}else{
oT.oninput = toChange;
} oT.onfocus = function(){ oT.style.border = "1px #40E0D0 solid";
oT.style.boxShadow = "0 0 10px #5CACEE";
weibotextnum.style.opacity = "1";
var num = Math.ceil(getLength(oT.value)/2);
if(num==""){
oA.style.background = "#7F7F7F";//第一次没字时应该为时是黑色
}
}
oT.onblur = function(){
weibotextnum.style.opacity = '0';
oT.style.boxShadow = "";
oA.style.background = '#8BC528';
}
oA.onmouseover = function(){
oA.style.background = '#7CCD7C';
oT.blur();
}
oA.onmouseout = function(){
oA.style.background = '#8BC528'; }
oA.onclick = function(){
var num = Math.ceil(getLength(oT.value)/2);
if(num==0 || num>140){
alert("不符合发布要求，请检查");
return false;
}else{
alert("发布成功！");
oT.value = "";
weibotextnumber.innerHTML="140";
}
} function toChange(){
var num = Math.ceil(getLength(oT.value)/2);
if(num<=140){
weibotextnum.innerHTML = "还能输入<span id='weibotextnumber'></span>字";
weibotextnumber = document.getElementById('weibotextnumber');
weibotextnumber.innerHTML = 140-num;
weibotextnumber.style.color = ''; }
else{
weibotextnum.innerHTML = "超出字数<span id = 'weibotextnumber'></span> 您可以转为<a href='#'>长微博</a>发送"
weibotextnumber = document.getElementById('weibotextnumber');
weibotextnumber.innerHTML = 140 - num;
weibotextnumber.style.color = 'red';
}
if(num>140 || oT.value==""){
oA.style.background = "#7F7F7F";
}else{
oA.style.background = "#8BC528";
}
} function getLength(str){
return String(str).replace(/[^\x00-\xff]/g,'aa').length;//当为汉字时以aa为算长度
}
} </script>
</div>
</body>
</html>
引用前请标明出处：http://www.cnblogs.com/zkhzz/ 谢谢
js微博发布框的实现的更多相关文章
- js微博发布框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生JS+tween.js模仿微博发布效果
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4816865.html 1.先看效果吧,有效果才有动力: 2.html结构: <!DOCTYPE ht ...
- [js高手之路]设计模式系列课程-委托模式实战微博发布功能
在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单? 大多数人的做法都是:获取元素,绑定事件 <ul> < ...
- 原生JavaScript 全特效微博发布面板效果实现
javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...
- 微博发布效果jq版
大家都看过新浪微博的发状态功能,我模拟了一下类似的效果,包括发布时间,删除效果等.代码如下: <!DOCTYPE HTML> <html> <head> <m ...
- VUE实现微博发布效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js控制文本框只能输入中文、英文、数字与指定特殊符号.
先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
随机推荐
- 3dmax导出到blend或者vs中
使用3dmax将模型导成obj格式的时候,可以导出材质或者不导出. 1.如果不导出,则按下图不勾选导出材质和创建材质库选项.这样生成的obj是可以直接再blend或者vs中打开的. 2.如果导出,不仅 ...
- MySQL Workbench中修改表字段字符集
背景介绍重要性必要性作用意义略过,开门见山: 用SQL语法修改字符集,可以参考此篇: http://www.cnblogs.com/HondaHsu/p/3640180.html MySQL提供图形界 ...
- **SQL某一表中重复某一字段重复记录查询与处理
sql某一表中重复某一字段重复记录查询与处理 1.查询出重复记录 select 重复记录字段 form 数据表 group by houseno having count(重复记录字段)> ...
- WebRTC音频预处理单元APM的整体编译及使用
正文 行的gnu静态库链接路径是针对NDK版本 r8d 的,如读者版本不匹配,请自行找到 libgnustl_static.a 静态库的路径进行替换. 3)本示例并不打算编译 WebRTC 的测试工程 ...
- mybatis map常用数据类型
JDBC Type Java Type CHAR String VARCHAR String LONGVARCHAR String NUMERIC java.math.BigDecimal DECIM ...
- Git 简介
版本控制 什么是版本控制? 我需要版本控制吗? - 如果你还没使用过版本控制系统,或许你会有以上疑问,甚至更多疑问.希望后面的回答能让你喜欢上版本控制系统,喜欢上Git. 什么是版本控制:顾名思义,版 ...
- (转)java自带线程池和队列详细讲解 - CSDN过天的专栏
一简介 线程的使用在java中占有极其重要的地位,在jdk1.4极其之前的jdk版本中,关于线程池的使用是极其简陋的.在jdk1.5之后这一情况有了很大的改观.Jdk1.5之后加入了java.util ...
- C语言中使用系统自带的快排函数
题目 . 德才论 () 宋代史学家司马光在<资治通鉴>中有一段著名的"德才论":"是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人.凡取 ...
- ue4 c++学习推荐
我由易到难推荐,不过在此之前还是先看看官方对于VS设置的推荐: https://docs.unrealengine.com/latest/INT/Programming/Development/Vis ...
- [资料分享]ACCESS2013 零基础到精通
Microsoft Office Access是由微软发布的关系数据库管理系统.它结合了 MicrosoftJet Database Engine 和 图形用户界面两项特点,是 Microsoft O ...