js仿微博动态栏功能


Posted in Javascript onFebruary 22, 2017

知识有限,目前只写了发布动态的功能,没有写兼容,后面再慢慢完善。嘿嘿

效果图:

js仿微博动态栏功能

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>微博</title>
 <style>
  body, p, img, ul, li { margin: 0; padding: 0; }
  body { background-image: url("http://cdn.attach.qdfuns.com/notes/pics/201612/07/212742f92tpe2wve095ttp.jpg");}
  li { list-style: none; }
  .box {
   padding-top: 20px;
   margin: 20px auto;
   width: 620px;
   height: 180px;
   position: relative;
   background-color: #ffffff;
   text-align: center;
  }
  .box label {
   font: 18px/18px "微软雅黑";
   color: #cccccc;
   position: absolute;
   top: 60px;
   left: 40px;
   cursor: text;
  }
  .H {
   float: left;
   padding: 5px 0 5px 10px;
   color: #426B80;
   font: 400 16px/16px "宋体";
  }
  textarea {
   padding: 5px;
   border-color: #CCCCCC;
   width: 580px;
   height: 80px;
   resize: none;
   outline:none;
   font: 400 18px "微软雅黑";
   color: #333333;
  }
  #button {
   width: 80px;
   height: 34px;
   display: block;
   background-color: #FFC09F;
   position: absolute;
   top: 148px;
   right: 14px;
   text-align: center;
   line-height: 34px;
   color: #ffffff;
   cursor: pointer;
   /*F7671D*/
  }
  .dynamic {
   text-align: left;
   padding: 10px 10px;
   width: 580px;
   height: 100%;
  }
  .user {
   position: relative;
  }
  .user img {
   border: solid 1px #CCCCCC;
   vertical-align: top;
  }
  .user .name {
   display: block;
   position: absolute;
   top: 8px;
   left: 60px;
   font: 600 18px/18px "微软雅黑";
  }
  .time{
   display: block;
   position: absolute;
   top: 55px;
   left: 80px;
   font: 500 10px/10px "微软雅黑";
  }
  .dynamic .user {
   margin: 10px 5px 0 10px;
  }
  .dynamic .list {
   font: 500 16px/16px "微软雅黑";
   padding-left: 70px;
  }
 </style>
 <script>
  window.onload = function () {
   //获取当前时间函数
   function time() {
    var maydate = new Date();
    var Time = maydate.getFullYear() + "-" + (maydate.getMonth()+1) +"-"+maydate.getDate()+" "+maydate.getHours()+":"+maydate.getMinutes();
    return Time;
   }
   //获取ID函数
   function $(id) {return document.getElementById(id);}
   //创建节点函数
   function nweChild(id,text) {
    //获得节点ID
    var parent = $(id);
    //获得body所有的孩子
    var child = parent.parentNode.children;
    //克隆当前节点和其所有子节点
    var newNode = parent.cloneNode(true);
    //给当前节点的父节点插入克隆的节点
    parent.parentNode.insertBefore(newNode,child[1]);
    //插入的克隆节点更换ID
    child[1].id = id + (child.length - 2);
    //改变时间
    //获取当前id节点的所有孩子
    var idChild = child[1].children;
    idChild[0].innerHTML = time();
    idChild[2].innerHTML = $("text").value;
   }
   //获得焦点改变边框颜色和恢复默认字体颜色
   $("text").onfocus = function () {
    this.style.borderColor = "#FA7D3C";
    this.style.color = "#333333";
   }
   //失去焦点恢复默然边框颜色,改变字体颜色
   $("text").onblur = function () {
    this.style.borderColor = "#CCCCCC";
    this.style.color = "#CCCCCC";
   }
   //监听输入事件
   $("text").oninput = function () {
    if($("text").value != ""){
     //隐藏提示文本
     $("txt").style.display = "none";
     //文本域不为空 按钮可点击
     $("button").style.backgroundColor = "#FF8140";
    }else{
     //显示提示文本
     $("txt").style.display = "block";
     //文本域为空 按钮不可点击
     $("button").style.backgroundColor = "#FFC09F";
    }
   }
   //按钮事件
   $("button").onmousemove = function () {
    //当文本域不为空执行下面按钮事件
    if($("text").value != ""){
     $("button").onmouseout= function () {
      //如果不为空 按钮为亮色
      if($("text").value != ""){
this.style.backgroundColor = "#FF8140";
      }else {
       //恢复按钮为不可点击颜色
       $("button").style.backgroundColor = "#FFC09F";
      }
     }
     //按钮为高亮
     this.style.backgroundColor = "#F7671D";
     //调用节点函数,并把传递当前文本内容
     $("button").onclick = function () {
      if($("text").value != ""){
       nweChild("order",$("text").value);
      }
      //清空当前文本
      $("text").value = "";
      //恢复按钮为不可点击颜色
$("button").style.backgroundColor = "#FFC09F";
      //更改提示文本内容
      $("txt").innerHTML = "你看,没骗你吧!"
      //显示提示文本
      $("txt").style.display = "block";
     }
    }
   }
  }
 </script>
</head>
<body>
 <div class="box">
  <span class="H">有什么新鲜事想告诉大家?</span>
  <textarea name="text" id="text"></textarea>
  <label for="text" id="txt">输入一段话,点发布会有惊喜哦!</label>
  <span id="button">发布</span>
 </div>
 <div class="box dynamic" id="order">
  <span class="time">2016-12-07 21:20</span>
  <div class="user">
   <img src="http://cdn.attach.qdfuns.com/notes/pics/201612/07/212742m96ugh87fzxhuuxp.jpg" width=50; alt="头像">
   <span class="name">漫步未来</span>
  </div>
  <ul class="list">
   <li>未来的你,一定会感谢现在拼命的自己。</li>
  </ul>
 </div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
jQuery取id有.的值的方法
May 21 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 #Javascript
svg动画之动态描边效果
Feb 22 #Javascript
jQuery实现的简单拖动层示例
Feb 22 #Javascript
Bootstrap 3 进度条的实现
Feb 22 #Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 #Javascript
canvas 绘制圆形时钟
Feb 22 #Javascript
jquery实现数字输入框
Feb 22 #Javascript
You might like
php反弹shell实现代码
2009/04/22 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
jquery对表单操作2
2011/04/06 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
python中元类用法实例
2014/10/10 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
python日期相关操作实例小结
2019/06/24 Python
python实现简单学生信息管理系统
2020/04/09 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
Python如何实现远程方法调用
2020/08/07 Python
本科毕业生自我鉴定
2013/11/02 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
美食节策划方案
2014/05/26 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
公司股东出资证明书
2014/11/01 职场文书
运动会1000米加油稿
2015/07/21 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
Vue的过滤器你真了解吗
2022/02/24 Vue.js
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript