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> body{ font-size:12px;} #div1{ width:400px; margin:20px auto;} #div1 p{ float:right; margin:0;} #div1 textarea{ width:400px; height:100px;} #div1 a{ width:50px; height:30px; font-size:16px; line-height:30px; text-align:center; float:right; background:#00FF00; color:#FFFFFF;} #div1 a.dis{ background:#CCCCCC; color:#666666;} </style> <script> //onchange : 当光标消失的时候,只能触发一次 //ie : onpropertychange : 输入连续触发 //标准:oninput : 也是连续触发 window.onload = function(){ var oDiv = document.getElementById('div1'); var oP = oDiv.getElementsByTagName('p')[0]; var oT = oDiv.getElementsByTagName('textarea')[0]; var oA = oDiv.getElementsByTagName('a')[0]; var ie = !-[1,]; var bBtn = true; var timer = null; var iNum = 0; oT.onfocus = function(){ if(bBtn){ oP.innerHTML = '打击虚假消息,建设文明微博,还可以输入<span>140</span>字'; bBtn = false; } }; oT.onblur = function(){ if(oT.value==''){ oP.innerHTML = '《新浪微博社区公约(征求意见稿)》意见征求'; bBtn = true; } }; if(ie){ oT.onpropertychange = toChange; } else{ oT.oninput = toChange; } function toChange(){ var num = Math.ceil(getLength(oT.value)/2); var oSpan = oDiv.getElementsByTagName('span')[0]; if(!oSpan){return} if(num<=140){ oSpan.innerHTML = 140 - num; oSpan.style.color = ''; } else{ oSpan.innerHTML = num - 140; oSpan.style.color = 'red'; } if(oT.value=='' || num>140){ oA.className = 'dis'; } else{ oA.className = ''; } } function getLength(str){ return String(str).replace(/[^\x00-\xff]/g,'aa').length; } oA.onclick = function(){ if(this.className == 'dis'){ clearInterval(timer); timer = setInterval(function(){ if(iNum==5){ clearInterval(timer); iNum = 0; } else{ iNum++; } if(iNum%2){ oT.style.background = 'red'; } else{ oT.style.background = ''; } },100); } else{ alert('发布成功!'); } }; }; </script> </head> <body> <div id="div1"> <p>《新浪微博社区公约(征求意见稿)》意见征求</p> <textarea></textarea> <a class="dis" href="javascript:;">发布</a> </div> </body> </html>
js微博发布框的更多相关文章
- js微博发布框的实现
观察了微博发布框, 1.发现他的剩余文字是动态改变的, 2.且文字为零时 发布框颜色为暗色 3.文字不符合标准时提交不通过 整理了一下思路 js会主要用到的方法 1.onclick() //点击发布时 ...
- 原生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 复选框 全选都选 ...
随机推荐
- localstorage本地存储
前段时间项目上用到了本地存储,所以研究看了下,在这做下笔记. 本地存储是一个window的一个属性,分别是localStorage和sessionStorage,两者用法完全相同,只不过一个是sess ...
- PAT 07-图6 旅游规划 (25分)
有了一张自驾旅游路线图,你会知道城市间的高速公路长度.以及该公路要收取的过路费.现在需要你写一个程序,帮助前来咨询的游客找一条出发地和目的地之间的最短路径.如果有若干条路径都是最短的,那么需要输出最便 ...
- 【转】基于RMAN实现坏块介质恢复(blockrecover)
本文转自:乐沙弥的世界 对于物理损坏的数据块,我们可以通过RMAN块介质恢复(BLOCK MEDIA RECOVERY)功能来完成受损块的恢复,而不需要恢复整个数据库或所有文件来修复这些少量受损的数据 ...
- 立体视觉-opencv中立体匹配相关代码
三种匹配算法比较 BM算法: 该算法代码: view plaincopy to clipboardprint? CvStereoBMState *BMState = cvCreateStereoBMS ...
- 中文乱码 jsp正常后台接收异常
关于中文乱码:1,解决GET方式中的中文编码问题. 在Jsp中如果用中文方式传递编码,一定要保证传递过去的是U8:情况一:在便签中<s:action > 可以使用<s:param&g ...
- hdu2157之矩阵快速幂
How many ways?? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- tomcat管理web界面
在/usr/tomcat/apache-tomcat-7.0.47/conf/tomcat-users.xml里 <?xml version='1.0' encoding='utf-8'?> ...
- MVC - 布局
布局类似于APSX视图的母版页 用的是Razor的语法 创建布局 布局页面默认放在Shared目录 有几个自动生成的cshtml文件 删除它们 然后创建一个视图 命名为MyLayOut 取消勾选使用母 ...
- 有关Color和Drawable你所不知道的那些内容
Android开发中,我们经常会用到Color或Drawable,有时他们是可以混用的,有时却有严格的区别. Drawable 体系结构 Drawable是可绘制物件的一般抽象.与View不同,Dra ...
- Android_EditText
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...