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 相关文章推荐
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 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
关于PHP5 Session生命周期介绍
2010/03/02 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python多进程编程常用方法解析
2020/03/26 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
python 实现音频叠加的示例
2020/10/29 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
财务会计毕业生个人求职信
2014/02/03 职场文书
班组长岗位职责
2014/03/03 职场文书
售后服务承诺书范文
2014/03/26 职场文书
教师节宣传方案
2014/05/23 职场文书
求职自荐信怎么写
2015/03/04 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
争做文明公民倡议书
2019/06/24 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫