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 相关文章推荐
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
koa-router源码学习小结
Sep 07 Javascript
js实现中文实时时钟
Jan 15 Javascript
JavaScript实现登录窗体
Jun 22 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
数据库相关问题
2006/10/09 PHP
PHP的开合式多级菜单程序
2006/10/09 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
Python设计模式之观察者模式实例
2014/04/26 Python
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
Django中使用Celery的方法示例
2018/11/29 Python
python实现飞机大战游戏
2020/10/26 Python
python的re模块使用方法详解
2019/07/26 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
python 负数取模运算实例
2020/06/03 Python
python 深度学习中的4种激活函数
2020/09/18 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
个人简历的自荐信
2013/10/23 职场文书
医院护士专业个人的求职信
2013/12/09 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
森林防火标语
2014/06/23 职场文书
学校安全责任书范本
2014/07/23 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书