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 复选框 全选都选 ...
随机推荐
- iOS 数据存储规则
概观 iCloud的备份包括,它可以自动每天通过Wi-Fi备份用户的iOS设备.在您的应用程序的主目录都被备份,唯一的例外是应用程序本身捆绑,缓存目录和temp目录.购买的音乐,应用程序,电子书,相机 ...
- 四、线程同步之Lock和Condition
Lock同步锁 Lock 在jdk1.5 提供了Lock以便执行同步操作,和synchronized不同的是Lock提供了显示的方法获取锁和释放锁.Lock提供了以下几个方法,请求和释放锁: voi ...
- 与你相遇好幸运，制作自己的Yeoman Generator
使用别人写好的生成器: npm install -g yonpm install -g generator-angularyo angular 如何自己制作符合自己心仪的生成器呢: https://g ...
- java中的泛型的使用与理解
什么是泛型? 泛型是程序设计语言的一种特性.允许程序员在强类型程序设计语言中编写 体验泛型代码时定义一些可变部份,那些部份在使用前必须作出指明.各种程序设计语言和其编译器.运行环境对泛型的支持均不一样 ...
- Android 6.0 - 动态权限管理的解决方案
Android 6.0版本(Api 23)推出了很多新的特性, 大幅提升了用户体验, 同时也为程序员带来新的负担. 动态权限管理就是这样, 一方面让用户更加容易的控制自己的隐私, 一方面需要重新适配应 ...
- form表单提交问题
1.提交后不能跳转到指定页面 jsp代码 <form class="form-horizontal" role="form"> <p clas ...
- 让不支持h5新标签的浏览器支持新标签
把这段js加到页面的头部就可以了,创建想让浏览器支持的标签即可 //条件判断是否支持 h5 if(window.applicationCache){ alert("支持h5") } ...
- <转>Unity3D研究院之C#使用Socket与HTTP连接服务器传输数据包
最近项目中需要使用HTTP与Socket,把自己这段时间学习的资料整理一下.有关Socket与HTTP的基础知识MOMO就不赘述拉,不懂得朋友自己谷歌吧.我们项目的需求是在登录的时候使用HTTP请求, ...
- JS+CSS 钟表
.<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title& ...
- SOAPUI使用教程-REST源和方法
1. 添加REST服务.源和方法 一个REST服务包含任意数量相应的路径的可用源. 资源本身可以有尽可能多的子资源;子资源路径和所有的父路径链接起来. 首先创建一个新的REST服务在您的项目. 在导航 ...