原生前端开发js插件_发表说说

js 前端模板开发教程|web前端js开发工程师|前端开发工具 js

html 代码

<!DOCTYPE html>
<head>
<metacharset=”utf-8″>
<title>js前端开发:发表说说</title>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
a{
text-decoration:none;
color:black;
}
#wrap{
width:480px;
height:180px;
padding:10px;
background:#000;
margin:50pxauto;
border-radius:5px;
}
#txt{
width:480px;
height:120px;
border-radius:5px;
resize:none;
/* 设置文本框不能拉伸 默认是可以拉伸的*/
}
.box{
position:relative;
float:left;
width:40px;
height:40px;
margin-top:8px;
border:1pxsolid#eee;
padding:3px;
}
.boximg{
position:absolute;
left:0px;
top:0px;
width:40px;
height:40px;
display:none;
cursor:pointer;
}
#btn{
float:right;
margin-top:15px;
width:80px;
height:35px;
line-height:35px;
text-align:center;
font-size:14px;
color:white;
background:#f60;
cursor:pointer;
}
#list{
width:500px;
margin:0pxauto;
}
#listulli{
font-size:12px;
border-bottom:1pxsolid#000;
padding:10px0px;
}
#listulli::after{
content:”;
display:block;
clear:both;
}
#listullip{
float:right;
width:437px;
}
#listullispan{
float:left;
margin:18px0px0px6px;
}
#listulliimg{
float:left;
width:50px;
height:50px;
border:1pxsolid#000;
padding:2px;
}
</style>
</head>
<body>
<divid=”wrap”>
<textareaid=’txt’></textarea>
<divclass=”box”>
<imgstyle=”display: block” src=”1.jpg” alt=””>
<imgsrc=”2.jpg” alt=””>
</div>
<divid=”btn”>发表</div>
</div>
<divid=”list”>
<ul>
</ul>
<script type=”text/javascript”>
vartxt=document.getElementById(‘txt’);
varbtn=document.getElementById(‘btn’);
varUL=document.querySelector(‘#list ul’);
varoimg=document.querySelectorAll(‘#wrap .box img’);
varsrc=oimg[0].src;//默认的图片路径
oimg[0].onclick=function(){//点击更改图标 修改默认图片路径
this.style.display =’none’;
oimg[1].style.display =’block’;
src=oimg[1].src;
};
oimg[1].onclick=function(){
this.style.display =’none’;
oimg[0].style.display =’block’;
src=oimg[0].src;
}
functiontoTwo(num){//如果时 分 秒 小于10 就拼接上一个0,默认是不会补零的;
returnnum*1<10?”0″+num:num;
}
btn.onclick=function(){
vargoudan=newDate();
varYY=goudan.getFullYear();
varMM=goudan.getMonth() +1;
varDD=goudan.getDate();
varhh=goudan.getHours();
varmm=goudan.getMinutes();
varss=goudan.getSeconds();
varday=goudan.getDay();
if (txt.value) {//判断文本框有没有内容
vartime=”发表时间:”+YY+”年”+MM+”月”+DD+”号”+toTwo(hh) +’时’+toTwo(mm) +’分’+toTwo(
ss) +’秒’;
varval=txt.value;
txt.value =”;
varoLi=document.createElement(“li”);
oLi.innerHTML='<img src=”‘+src+'”>’+val+'<span>’+time+'</span>’;
UL.insertBefore(oLi,UL.firstChild);
}else{
alert(‘内容为空,请输入一些内容’);
}
};
</script>
</body>
</html>
刚毕业做前端开发js要学到什么程度|前端开发为什么要学js?|前端开发js是什么意思?
» 本文来自:前端开发者 » 《原生前端开发js插件_发表说说》
» 本文链接地址:https://www.rokub.com/3636.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!