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 15 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
php数组编码转换示例详解
2014/03/11 PHP
PHP 读取和编写 XML
2014/11/19 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
PHP反射基础知识回顾
2020/09/10 PHP
javascript for循环设法提高性能
2010/02/24 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
python在命令行下使用google翻译(带语音)
2014/01/16 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
python程序封装为win32服务的方法
2021/03/07 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python re.match()用法相关示例
2021/01/27 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
大学生村官心得体会范文
2014/01/04 职场文书
学习新党章思想汇报
2014/01/09 职场文书
阳光体育活动总结
2014/04/30 职场文书
大学课外活动总结
2014/07/09 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
办公室个人总结
2015/02/28 职场文书
开学典礼校长致辞
2015/07/29 职场文书
课程设计感想范文
2015/08/11 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
python中%格式表达式实例用法
2021/06/18 Python