js控住DOM实现发布微博效果


Posted in Javascript onAugust 30, 2016

这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>微博消息效果</title>
 <style>
 *{margin:0;padding: 0;}
 .warp{
  width: 600px;
  margin:50px auto 0;
  background-color: #ccc;
 }
 #box{
  width: 600px;
  height: 340px;
  /*background-color: #ccc;*/
  position: relative;
  /*overflow: hidden;*/
  /*margin:50px auto 0;*/
  font-family: '微软雅黑';
 }
 #box .span1{
  position: absolute;
  font-size: 16px;
  line-height: 16px;
  top: 10px;
  left: 5px;
 }
 #box .span2{
  position: absolute;
  font-size: 16px;
  line-height: 16px;
  top: 50px;
  left: 5px;
 }
 #title{
  position: absolute;
  width: 460px;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  text-indent: 5px;
  left: 70px;
  top: 6px;
 }
 #text{
  position: absolute;
  width: 460px;
  height: 250px;
  resize: none;
  top: 50px;
  left: 70px;
  text-indent: 5px;
  font-size: 16px;
 }
 #box #prompt{
  position: absolute;
  top: 312px;
  left: 340px;
 }
 #prompt1{
  position: absolute;
  top: 312px;
  left: 340px;
  display: none;
 }
 #send{
  position: absolute;
  height: 25px;
  width: 60px;
  line-height: 20px;
  font-size: 16px;
  top: 310px;
  right: 68px;
 }
 #news{
  list-style: none;
  width: 490px;
  margin:10px auto 0px;
  padding-bottom: 5px;
 }
 #news li{
  width: 490px;
  font-size: 14px;
  overflow: hidden;
  background-color: #fff;
  margin-bottom: 5px;
  position: relative;
 }
 #news li h1{
  font-size: 16px;
  line-height: 20px;
 }
 #news li p{
  text-indent: 5px;
  clear: left;
 }
 #news li span{
  position: absolute;
  top: 0px;
  right: 0px;
  cursor: pointer;
 }
 #news span:hover{
  color: red;
 }
 </style>
</head>
<body>
 <div class="warp">
  <div id="box">
   <span class='span1'>标题:</span>
   <input id="title" type="text">
   <span class="span2">内容:</span>
   <textarea id="text"></textarea>
   <em id="prompt">还可以输入<var id="textnum">200</var>字</em>
   <em id="prompt1">你已超出<var id="textnum1"></var>字</em>
   <button id="send">发送</button>
  </div>
  <ul id="news">
    <li><h1></h1><span></span>
      <p></p>
    </li>
   </ul>
 </div>
 <script>
  var title=document.getElementById('title');
  var text=document.getElementById('text');
  var send=document.getElementById('send');
  var ul=document.getElementById('news');
  var lis=ul.getElementsByTagName('li');
  var prompt=document.getElementById('prompt');
  var prompt1=document.getElementById('prompt1');
  var textnum=document.getElementById('textnum');
  var textnum1=document.getElementById('textnum1');
  var timer1=null,timer2=null;
  send.onclick=function(){
   if (text.value==''||title.value=='') {
    alert('亲~标题或内容不能为空');return false;
   }
   lis[0].innerHTML='<h1>'+title.value+'</h1><span>×</span><p>'+text.value+'</p>';
   lis[0].children[1].setAttribute('id','close');
   var newLi=document.createElement('li');
   ul.insertBefore(newLi,lis[0]);
   maxheight=lis[1].clientHeight;
   lis[1].style.height=0+'px';
   var x=0;
   var minstep=0;
   var maxstep=20;
   var change=maxheight/maxstep;
   clearInterval(timer1);
   timer1=setInterval(function(){
    minstep++;
    if (minstep>=maxstep) {
     clearInterval(timer1);
    }
    x+=change;
    lis[1].style.height=x+'px';
   },10)
   title.value='';
   text.value='';
   var close=document.getElementById('close');
    for (var i = 0; i < lis.length; i++) {
     close.onclick=function(){
      var isme=this.parentNode;
      var x=this.parentNode.clientHeight;
     var minstep=0;
     var maxstep=20;
     var change=x/maxstep;
     clearInterval(timer1);
     timer1=setInterval(function(){
      minstep++;
      if (minstep>=maxstep) {
       clearInterval(timer1);
       ul.removeChild(isme);
      }
      x-=change; 
      isme.style.height=x+'px';
     },10)
     // ul.removeChild(lis[i]);//不可以,不知道绑定的是第几个。
     }
    }
   }
  text.onfocus=function(){
   // console.log(prompt.children[0].innerHTML);//children是指带有标签的子节点;
   timer2=setInterval(function(){
    if(text.value.length<190){
     var num=200-text.value.length;
     textnum.style.color='black';
     // prompt.style.color='black';
     textnum.innerHTML=num;//
     // prompt.innerHTML='还可以输入<var id="textnum">'+num+'</var>字</em>';
    }
    if (text.value.length>=190&&text.value.length<=200){
     var num=200-text.value.length;
     // prompt.style.color='black';
     textnum.style.color='red';//为什么不变红呢?因为这他妹的也是一个未来事件!
     // prompt.innerHTML='还可以输入<var id="textnum">'+num+'</var>字</em>';
     textnum.innerHTML=num;
    }
    if (text.value.length>200){
     var num=text.value.length-200;
     // prompt.style.color='red';
     prompt.style.display='none';
     prompt1.style.display='block';
     textnum1.style.color='red';
     textnum1.innerHTML=num;
     
    }
    // console.log(text.value.length);
   },50) 

  }
  text.onblur=function(){
   clearInterval(timer2);
  }
 </script>
</body>
</html>

这段代码主要运用了一些DOM节点操作的知识,纯属学习之余练手作品,大家可以参考参考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 表单验证方法(实用)
Apr 28 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 #Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 #Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 #Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 #Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 #Javascript
对js中回调函数的一些看法
Aug 29 #Javascript
Web打印解决方案之普通报表打印功能
Aug 29 #Javascript
You might like
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
php目录管理函数小结
2008/09/10 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
python实现顺序表的简单代码
2018/09/28 Python
Python configparser模块操作代码实例
2020/06/08 Python
详解pandas赋值失败问题解决
2020/11/29 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
组织生活会表态发言材料
2014/10/17 职场文书
2014年工程师工作总结
2014/11/25 职场文书
离婚纠纷代理词
2015/05/23 职场文书
老干部座谈会主持词
2015/07/03 职场文书
员工手册董事长致辞
2015/07/29 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
Python实现天气查询软件
2021/06/07 Python
Python实现简单的猜单词
2021/06/15 Python
MySQL GTID复制的具体使用
2022/05/20 MySQL