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 复选框 全选都选 ...
随机推荐
- Android基础学习第二篇—Activity
写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对 ...
- [项目]WebService涉及到的部分核心代码
前言: 博客园似乎不太喜欢设计模式的东西,一连写了几篇设计模式的东西,都没什么人气,也许是写的水平有些不够,另外设计模式属于内功,怎们都得修炼一下,否则,设计混乱,不成体系,对于大型项目来说,就会显 ...
- Kafka基本原理
简介 Apache Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apache项目的一部分.Kafka是一种快速.可扩展的.设计内在就是分布式的,分区的和可复制的提交 ...
- Android 笔记 Intent and Bundle day7
学习了Intent与Bundle的使用,进行应用中的交互 package com.example.intent; import android.app.Activity; import android ...
- WCF 学习篇
写在前面 自从运用了.NET Remoting 之后,就想系统的学习下WCF,因为WCF是对现有分布式通信技术的整合.主要以 <WCF全面解析> 这本书为主,园子的资料和网上资料为辅,来学 ...
- 数据分析(9):DataFrame介绍
DataFrame 表格型的数据结构 创建DataFrame 可以通过传入dict的方式,DataFrame会自动加上索引,并且列会有序排列 data = {'state':['a', 'b', 'c ...
- Oracle存储过程语法
原文链接:http://www.jb51.net/article/31805.htm Oracle存储过程基本语法 存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 ...
- Git安装
前面说了很多废话,说得再好,还不如实践一次.要想使用Git,首先得安装.这次实验主要是实践怎样安装Git. 安装与检查是否安装成功 1. 在Linux(Ubuntu)上安装 上篇的Git简介已经介绍过 ...
- Myeclipse运行报错:an out of memory error has occurred的解决方法
不知道怎么了,重装的myeclipse2013,里边就放了一个项目,启动myeclipse就报 an out of memory error has occurred....... 一点yes就退出 ...
- 使用echarts开发电子屏数据展示页面
背景 之前的项目因为要顾及体量问题,选用了highchart,没用上echarts:这次因为是本地部署电子屏幕的展示页,不需要考虑体量大小,直接用上了echarts:用起来觉得非常不错,特别是地图上非 ...