基于javascript制作微博发布栏效果


Posted in Javascript onApril 04, 2016

本文为大家分享了做微博发布栏效果的过程,涉及到的知识点包括以下:

1.判断IE的方法:直接用  var ie=!-[1,];即可

2.连续发生事件的用法:

 IE下:触发对象.onpropertychange

 标准下:触发对象.oninput

3.焦点聚集和移开事件。onfocus和onblur

4.判断单字节(0-255之间)与双子节:正则表达式:/[^\x00-\xff]/g

代码如上:

<!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>
<style>
#div1{width: 400px;margin: 20px auto;border: 1px solid #ccc}
#div1 p{float: right;margin: 0;font-size: 13px;}
#div1 textarea{width: 400px;height: 280px;}
#div1 a{background: #ccc;float: right;color: #FFFFFF;text-align: center;background: #00FF00;width: 50px;height: 30px}
#div1 a.dis{background: #ccc;color: black;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
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 bool=true;
    var ie=!-[1,];
    var timer=null;
    var num=0;
    //给文本框加聚焦事件
    oT.onfocus=function()
    {
     if(bool)
     {
      oP.innerHTML='你还可以输入<span>90</span>字';
      bool=false;
     } 

    }
     oT.onblur=function()
    {
     if(oT.value=='')
     {
      oP.innerHTML='请输入你的留言';
      bool=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(num<=90)
       {
        oSpan.innerHTML=90-num;
        oSpan.style.color='';
       }
      else
      {
        oSpan.innerHTML=num-90;
        oSpan.style.color='red';
      }
      if(oT.value==''||num>90)
      {
      oA.className='dis';
      }
      else
      {
       oA.className='';
      }

    }
    function getLength(str)
    {
    return String(str).replace(/[^\x00-\xff]/,'aa').length;//不是单双节的将其变为两个单双节的
    }
    //点击按钮,变色
    oA.onclick=function()
    {
      if(this.className=='dis')
      {
        clearInterval(timer);
        timer=setInterval(function(){
          if(num>5){clearInterval(timer);num=0;}
          else{
            num++;
          }
          if(num%2)
          {
            oT.style.background='red';
          }
          else
          {
             oT.style.background='';
          }

        },100)
      }
      else
      {
        alert('发布成功');
      }
    }
    
}
</script>
</head>
<body >
<div id='div1'>
 <p>请输入你的留言</p>
 <textarea></textarea>
 <a href="#" class="dis">发布</a>
</div>
 
 
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
详解angular element()方法使用
Apr 08 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
Vue filter介绍及详细使用
Apr 04 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
纯js实现手风琴效果
Apr 17 #Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 #Javascript
Angular 根据 service 的状态更新 directive
Apr 03 #Javascript
jQuery中的Deferred和promise 的区别
Apr 03 #Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 #Javascript
jQuery qrcode生成二维码的方法
Apr 03 #Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 #Javascript
You might like
php获得文件扩展名三法
2006/11/25 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
Vue下的国际化处理方法
2017/12/18 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python异常学习笔记
2015/02/03 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python random模块用法解析及简单示例
2017/12/18 Python
Django rest framework实现分页的示例
2018/05/24 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
python pymysql库的常用操作
2020/10/16 Python
python tkinter实现连连看游戏
2020/11/16 Python
介绍一下write命令
2012/09/24 面试题
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
数据员岗位职责
2013/11/19 职场文书
员工自我工作评价
2015/03/06 职场文书
小平您好观后感
2015/06/09 职场文书
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python