前端开发js 原生 模仿微博发布
摘要： 前端移动app的开发工具 前端 linux下开发工具 最新前端集成开发工具 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″ /> ……
| 前端移动app的开发工具 |
| 前端 linux下开发工具 |
| 最新前端集成开发工具 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title></title>
</head>
<style type=”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>
<div id=”box”>
<p id=”p1″>来说说吧 你想做什么</p>
<input type=”button” id=”a1″ value=”我要写点什么” />
<div id=”xianshi”></div>
</div>
<div
id=”ww”
style=”position: absolute;top: 0px; width: 100%;height: 680px;background: #CCCCCC;opacity: 0.8;display: none;”
>
<div id=”fabu”>
<span id=”guanbi” style=”margin-left:480px;font-size: 20px;”
>×</span
>
<p style=”margin-left: 50px;”>快把你遇到的趣事和大家分享下吧</p>
<textarea id=”wenben” rows=”” cols=””></textarea>
<p style=”margin-left: 300px;”>字数不得超过150字</p>
<input type=”button” id=”tijiao” value=”发布” />
</div>
</div>
<script type=”text/javascript”>
var a1 = document.getElementById(‘a1’)
var fabu = document.getElementById(‘fabu’)
var guanbi = document.getElementById(‘guanbi’)
var box = document.getElementById(‘box’)
var tijiao = document.getElementById(‘tijiao’)
var wenben = document.getElementsByTagName(‘textarea’)[0]
var xianshi = document.getElementById(‘xianshi’)
var ww = document.getElementById(‘ww’)
a1.onclick = function() {
ww.style.display = ‘block’
wenben.value = ”
}
guanbi.onclick = function() {
ww.style.display = ‘none’
}
var arr = [
‘用户:lanttoy’,
‘用户:阿迪斯’,
‘用户:APPLE’,
‘用户:王云’,
‘用户:李征’,
‘用户:万宗昊’,
‘用户:榴莲’,
‘用户:梁冬妮’,
‘用户:李氏川’,
‘用户:赵淳’,
‘用户:彬彬’,
‘用户:二蛋’,
‘用户:淘气’,
]
// arr[Math.random()]
var rad
tijiao.onclick = function() {
rad = Math.round(Math.random() * arr.length – 1)
if (wenben.value.length > 150) {
alert(‘请输入150字内’)
p.innerHTML = ”
}
ww.style.display = ‘none’
var p = 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>
| linux 前端开发工具 |
| web前端开发工具 bp |
| 前端h5的开发工具 |
» 本文来自：前端开发者 » 《前端开发js 原生 模仿微博发布》
» 本文链接地址：https://www.rokub.com/6820.html
» 您也可以订阅本站：https://www.rokub.com
近期评论