js控住DOM实现发布微博效果
作者:骑猪敲代码 发布时间:2024-04-10 11:02:03
标签:js,微博
这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为:
<!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节点操作的知识,纯属学习之余练手作品,大家可以参考参考。
0
投稿
猜你喜欢
- 1. 调试pythonipdb是用来python中用以交互式debug的模块,可以直接利用pip安装;其功能类似于pycharm中pytho
- 下面的这个函数实现的功能是列出某文件夹下的所有文件,以文件名字母排序,先数字后字母再到中文。<%
- 【原理介绍】通过NETCONF,网管能够用可视化的界面统一管理网络中的设备,并且安全性高、可靠性强、扩展性强。如下图所示,网管与网络中的所有
- 本文实例讲述了kNN算法python实现和简单数字识别的方法。分享给大家供大家参考。具体如下:kNN算法算法优缺点:优点:精度高、对异常值不
- 平时我们写个脚本,要放到后台执行去,我们怎么做呢?nohup python example.py 2>&1 /dev/null
- 一、安装matplotlib1)由于已安装anaconda,可直接打开anaconda prompt,再用命令pip install mat
- tpch是TPC(Transaction Processing Performance Council)组织提供的工具包。用于进行OLAP测
- 1.子查询概念 (1)就是在查询的where子句中的判断依据是另一个查询的结果,如此就构成了一个外部的查询和一个内部的查询,这个内部的查询就
- 加班时抽空弄的,javascript图片链接定时轮换,自适应图片大小,支持预载,进行了简单封装,方便调用。发现自己还是菜得很,一个简单效果被
- 现在做的一个小项目需要用到python的相关知识,但是因为太久没用一些东西都忘掉了,因此在本篇博客中记录一下python的函数和类的基础知识
- 1. 时间与时区1.1 时间标准UTC,世界标准时间,是现在的时间标准,以原子时计时。GMT,格林威治时间,是以前的时间标准,规定太阳每天经
- 签名import base64import jsonimport timefrom datetime import datetimeimpo
- 前言Kettle下载与安装保姆级教程(最新)Kettle下载安装pdi-ce-7.1.0.0-12教程win10环境安装kettle与lin
- 当各位在安装、重装时出现could not start the service mysql error:0原因: 卸载mysql时并没有完全
- Python httpx 运行过程中无限阻塞requests 模块只支持 http1,在遇到 http2 的数据接口的时候(某乎的搜索接口)
- 学习目的 掌握如何用ADO.NET插入新的记录 我们学得好快,今天做一个简易的新闻发布网页,可以说是个演示型的,只是让大家能理插入数据的最主
- python怎么求最大公约数和最小公倍数一、求最大公约数用辗转相除法求最大公约数的算法如下:两个正整数a和b(a>b),它们的最大公约
- 本文实例讲述了Python设计模式之观察者模式。分享给大家供大家参考,具体如下:观察者模式是一个软件设计模式,一个主题对象包涵一系列依赖他的
- 如何在本地机器上创建缓存?用法到是很简单,只需先创建Stream对象的实例,然后开始写入数据即可: Dim str&n
- 目录1.变量的引用的底层原理2.变量的分类Python的变量,简单来说有数值型,布尔型,字符串类型,列表,元组,字典等6大类。那么不同变量类