学前端开发：js 原生模仿微博发布
Posted 倪殤
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学前端开发：js 原生模仿微博发布相关的知识，希望对你有一定的参考价值。
初学前端开发，需要掌握的基础项目案例：js 原生模仿微博发布
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
</head>
<styletype="text/css">
*{
margin:0;
padding:0;
list-style:none;
font-family:"微软雅黑";
outline:none;
}
#box{
width:1000px;
height:650px;
border:4px solid #CCCCCC;
margin:0 auto;
}
#p1{
font-size:24px;
margin-left:40px;
margin-top:30px;
}
#a1{
width:500px;
height:50px;
margin-left:40px;
margin-top:30px;
}
#fabu{
width:500px;
height:300px;
left:31%;
top:180px;
border:4px solid #CCCCCC;
position:fixed;
z-index:100;
opacity:1;
background:white;
}
#wenben{
width:400px;
height:140px;
font-size:18px;
margin-left:50px;
margin-top:20px;
resize:none;
}
#tijiao{
width:400px;
height:50px;
margin-left:50px;
font-size:26px;
background:orange;
border:1px solid orange;
border-radius:10px;
color:white;
}
#xianshi{
width:920px;
height:400px;
margin:0 auto;
border:1px solid blue;
margin-top:20px;
}
</style>
<body>
<divid="box">
<pid="p1">来说说吧你想做什么</p>
<inputtype="button" id="a1" value="我要写点什么"/>
<divid="xianshi">
</div>
</div>
<divid="ww" style="position: absolute;top: 0px; width: 100%;height:680px;background: #CCCCCC;opacity: 0.8;display: none;">
<divid="fabu">
<spanid="guanbi" style="margin-left:480px;font-size:20px;">×</span>
<pstyle="margin-left: 50px;">快把你遇到的趣事和大家分享下吧</p>
<textareaid="wenben" rows="" cols=""></textarea>
<pstyle="margin-left: 300px;"> 字数不得超过150字</p>
<inputtype="button" id="tijiao" value="发布"/>
</div>
</div>
<scripttype="text/javascript">
vara1 = document.getElementById("a1");
varfabu = document.getElementById("fabu");
varguanbi = document.getElementById("guanbi");
varbox = document.getElementById("box");
vartijiao = document.getElementById("tijiao");
varwenben = document.getElementsByTagName("textarea")[0]
varxianshi = document.getElementById("xianshi");
varww = document.getElementById("ww");
a1.onclick= function() {
ww.style.display= "block";
wenben.value= ""
}
guanbi.onclick= function() {
ww.style.display= "none"
}
vararr = ["用户:lanttoy", "用户:阿迪斯", "用户:APPLE", "用户:王云", "用户:李征","用户:万宗昊","用户:榴莲","用户:梁冬妮","用户:李氏川","用户:赵淳","用户:彬彬","用户:二蛋","用户:淘气"]
// arr[Math.random()]
varrad;
tijiao.onclick= function() {
rad = Math.round(Math.random() *arr.length-1);
if(wenben.value.length > 150) {
alert("请输入150字内")
p.innerHTML= ""
}
ww.style.display= "none"
varp = document.createElement("p");
xianshi.appendChild(p)
for(var i = 0; i < arr.length; i++) {
p.innerHTML= arr[rad] + " " + "<br/>" + wenben.value;
}
wenben.value= ""
}
</script>
</body>
</html>
还有更多的学习案例和电子书，可以搜【web前端交流学习群018】，找君羊主哦！注册获取官网免费学习资源http://www.kgc.cn/?tuin=7145
?
以上是关于学前端开发：js 原生模仿微博发布的主要内容，如果未能解决你的问题，请参考以下文章