- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>unknow</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:50px auto;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: 1px solid #eee;padding: 3px;
- }
- .box img{
- 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:0px auto;
- }
- #list ul li{
- font-size: 12px;
- border-bottom: 1px solid #000;
- padding: 10px 0px;
- }
- #list ul li::after{
- content: '';
- display: block;
- clear: both;
- }
- #list ul li p{
- float:right;width:437px;
- }
- #list ul li span{
- float:left;margin:18px 0px 0px 6px;
- }
- #list ul li img{
- float:left;width:50px;height:50px;
- border:1px solid #000;padding: 2px;
- }
- </style>
- </head>
- <body>
- <div id="wrap">
- <textarea id='txt'></textarea>
- <div class="box">
- <img style="display: block" src="1.jpg" alt=""><img src="2.jpg" alt="">
- </div>
- <div id="btn">发表</div>
- </div>
- <div id="list">
- <ul>
- </ul>
- <script type="text/javascript">
- var txt = document.getElementById('txt');
- var btn = document.getElementById('btn');
- var UL = document.querySelector('#list ul');
- var oimg = document.querySelectorAll('#wrap .box img');
- var src = 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;
- }
- function toTwo( num ) {//如果时 分 秒 小于10 就拼接上一个0,默认是不会补零的;
- return num*1<10?"0"+num:num;
- }
- btn.onclick = function(){
- var goudan = new Date();
- var YY = goudan.getFullYear();
- var MM = goudan.getMonth() + 1;
- var DD = goudan.getDate();
- var hh = goudan.getHours();
- var mm = goudan.getMinutes();
- var ss = goudan.getSeconds();
- var day = goudan.getDay();
- if(txt.value){//判断文本框有没有内容
- var time = "发表时间:"+YY+"年"+MM+"月"+DD+"号"+toTwo(hh)+'时'+toTwo(mm)+'分'+toTwo(ss)+'秒';
- var val = txt.value;
- txt.value = '';
- var oLi = document.createElement("li");
- oLi.innerHTML = '<img src="'+src+'"><p>'+val+'</p><span>'+time+'</span>';
- UL.insertBefore(oLi,UL.firstChild);
- }else{
- alert('内容为空,请输入一些内容');
- }
- };
- </script>
- </body>
- </html>
来源: http://www.w3cfuns.com/notes/34656/b9ff165d46fb102dcfab0d5624114eb0.html