这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js 控住 DOM 实现发布微博效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为:
- <!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 节点操作的知识,纯属学习之余练手作品,大家可以参考参考。
来源: http://www.phperz.com/article/17/0516/332244.html