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插件制作 自增长输入框实现代码
Aug 17 jQuery
Javascript实现Web颜色值转换
Feb 05 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
PHP实现简易计算器功能
2020/08/28 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
js传值 判断
2006/10/26 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
javascript实现微信分享
2014/12/23 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
Python语法快速入门指南
2015/10/12 Python
分享Python文本生成二维码实例
2016/01/06 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
python字符串中的单双引
2017/02/16 Python
Sanic框架路由用法实例分析
2018/07/16 Python
python画双y轴图像的示例代码
2019/07/07 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
学Python 3的理由和必要性
2019/11/19 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
用Python 执行cmd命令
2020/12/18 Python
开办大学饮食联盟创业计划书
2014/01/29 职场文书
教师演讲稿大全
2014/05/16 职场文书
企业承诺书格式
2014/05/21 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
python基础之错误和异常处理
2021/10/24 Python
python内置模块之上下文管理contextlib
2022/06/14 Python