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 相关文章推荐
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
纯JS实现轮播图
Feb 22 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
es5 类与es6中class的区别小结
Nov 09 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
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
Django中使用locals()函数的技巧
2015/07/16 Python
Djang中静态文件配置方法
2015/07/30 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
高中化学教学反思
2014/01/13 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
小学语文国培研修日志
2015/11/13 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
python基础详解之if循环语句
2021/04/24 Python