基于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 相关文章推荐
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
javascript的函数作用域
Nov 12 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
纯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的memory_limit限制的方法分享
2012/02/21 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
php实现记事本案例
2020/10/20 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
RequireJs的使用详解
2017/02/19 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python全栈之列表数据类型详解
2019/10/01 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
python路径的写法及目录的获取方式
2019/12/26 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
python打包生成so文件的实现
2020/10/30 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
幼儿园开学通知
2015/04/24 职场文书