你的位置:首页 > Java教程

[Java教程]「闲来无事」写了个类似于微博的效果


* {margin: 0;padding: 0;font-size: 20px;font-family: 'microsoft yahei';}.clear {overflow: hidden;height: 0;clear: both;}textarea {width: 500px;height: 150px;border:1px #cecece solid;resize: none;float: left;}#btn {float: left;background: -webkit-linear-gradient(top,#ace,#f96 80%,#f96);border: none;width: 98px;height: 30px;line-height: 30px;}p {float: left;}.box1 {width: 600px;border: 1px red solid;}ul li {background-color: #fff;}.layer {width: 300px;height: 100px;border: 1px red solid;border-radius: 10%;}

window.onload = function(){  var num = document.getElementById('num');  var btn = document.getElementById('btn');  var text = document.getElementById('text');  var texts;  var time;  // 算输入框有多少字  font = function(){    texts = text.value;    num.innerHTML = texts.length;    if (num.innerHTML > 140) {      num.style.color = 'red';    }else {      num.style.color = 'black';    }  }   // 每半秒钟刷新一次字数;  time = setInterval("font()",100);  min = function(){    // 判断输入文字长度    texts = text.value;    if (texts.length == 0) {      alert('请输入文字');      return false;    } else if(texts.length <= 2){      alert('内容太短,请重新输入');      return false;    } else if(texts.length > 140){      num.style.color = 'red';      alert('内容在140个字之内,请重新输入');      return false;    } else {//正确输入文字内容,添加节点;      var lists = document.getElementById('list');      var lists_li = lists.getElementsByTagName('li');      // 创建节点      var new_li = document.createElement("li");      // 插入节点      new_li.innerHTML = texts;      lists.appendChild(new_li);      // 所有li节点长度;      var li_length = lists_li.length;            // 奇偶背景色      if (lists_li.length > 1){        for (var i = 0; i < li_length; i++) {          if (i%2 == 1) {            lists_li[i].style.backgroundColor = #fff';          } else {            lists_li[i].style.backgroundColor = #cecece';          };        };      }      // 大于10条,删除第一条。      if (lists_li.length > 10) {        lists.removeChild(lists_li[0]);      }    };  };  btn.onclick = function(){    min();  }}

<div class="box1">    <textarea name="" id='text' onKeyUp='font();'></textarea>  <input type="button" name="" value="发布" id='btn'>  <p><span id='num'>0</span>&nbsp;/&nbsp;140</p>  <div class="clear">&nbsp;</div></div><div class="box2">  <ul id='list'>  </ul></div><div class="layer">  <div class="layers">    <p>请输入文字!</p>    <input type="button" name="" value="确定">  </div>  </div>

在工作中JQ用的很多,源生基本忘得都差不多了。反正公司也没事儿了,就写一个这个效果,以前也写过,但没现在写的这么顺。

对比我还新的人能提供一下帮助吧,希望高手大神也能对我提出一些指导和建议。