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 相关文章推荐
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
工作中常用js功能汇总
Nov 07 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python查看列的唯一值方法
2018/07/17 Python
postman传递当前时间戳实例详解
2019/09/14 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
中职生自荐信范文
2014/06/15 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
律政俏佳人观后感
2015/06/09 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
初一年级组工作总结
2015/08/12 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
Python几种酷炫的进度条的方式
2022/04/11 Python