发稿子界面js

最新推荐文章于 2024-10-02 23:33:51 发布

桃花邬

最新推荐文章于 2024-10-02 23:33:51 发布

阅读量114

点赞数

文章标签： html5 css html

本文链接：https://blog.csdn.net/qq_57425554/article/details/120825821

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <style type="text/css">
       button{
           background-color:lightgreen;
           height: 38px;
           width: 138px;
           border-radius:6px;
           color: white;
       }
   </style>
   <body>
       <button type="button" οnclick="display()">我要发帖</button>
       <hr >
   </body>
   <script type="text/javascript">
   var a=document.getElementsByTagName("body")[0];
   var post=document.getElementsByTagName("button")[0];
   var ele=document.createElement("div");
   var num=0;
       function display(){
           if(num==1)return false;
           num++;
           var ele=document.createElement("div");
           ele.style.marginLeft="30px";
           ele.style.border="1px solid lightgrey"
           ele.style.width="500px"
           ele.innerHTML+="<input type='text' style='margin: 10px;' placeholder='请输入标题(1-50)个字符'/><br />";
           ele.innerHTML+="<strong style='margin: 10px;'>所属板块:</strong>"
           ele.innerHTML+=" <select ><option selected='selected' value='请选择板块'>请选择板块</option>"+
           "<option value='电子书籍'>电子书籍</option>"+
           "<option value='新课来了'>新课来了</option>"+
           "<option value='新手报到'>新手报到</option>"+
           "<option value='职业规划'>职业规划</option></select>"
           ele.innerHTML+="<br />";
           ele.innerHTML+="<textarea style='margin: 10px;'></textarea>";
           ele.innerHTML+="<button style='width: 100px; margin: 10px;'>发布</button>"
           a.appendChild(ele);
           var styleInput=document.getElementsByTagName("input")[0];
           styleInput.style.width="400px"
           var styleTextarea=document.getElementsByTagName("textarea")[0];
           styleTextarea.style.width="400px";
           styleTextarea.style.height="150px";
           var button=document.getElementsByTagName("button")[1];
           button.οnclick=function(){
               var title=document.getElementsByTagName("input")[0];
               var select=document.getElementsByTagName("select")[0];
               var passage=document.getElementsByTagName("textarea")[0];
               if(title.value==""||select.value=="请选择板块"||passage.value==""){
                   alert("所属板块和标题必须填写文章内容不能为空");
               }else{
               num=0;
               ele.remove();
                   var imgSrc;
                   var date=new Date();
                   var year=date.getFullYear();
                   var month=date.getMonth()+1;
                   var day=date.getDate();
                   var timeH=date.getHours();
                   var timeM=date.getMinutes();
                   var ele1=document.createElement("div");
                   if(month>=1&&month<=9){
                       month="0"+month;
                   }
                   if(day>=1&&day<=9){
                       day="0"+day;
                   }
                   if(timeH>=1&&timeH<=9){
                   timeH="0"+timeH;
                   }
                   if(timeM>=1&&timeM<=9){
                       timeM="0"+timeM;
                   }
                   var suiji=Math.random();
                   if(suiji==0.5){
                       imgSrc=1;
                   }
                   if(suiji<0.5&&suiji>0){
                       imgSrc=2;
                   }
                   if(suiji>0.5){
                       imgSrc=3;
                   }
                   if(suiji==0){
                       imgSrc=4
                   }
                   ele1.innerHTML+="<div id='div1'><img src='img/tou0"+imgSrc+".jpg' style='display: inline-block;'/></div>"
                   ele1.innerHTML+="<div id='div2'><strong >"+title.value+"</strong></div><br/>"
                   ele1.innerHTML+="<div id='div3'>"+'板块:'+select.value+' '+' '+' '+' '+' '+' '+'发表时间:'+year+
                   '-'+month+'-'+day+' '+timeH+':'+timeM+"</div>"
                   ele1.innerHTML+="<hr/>"
                   a.appendChild(ele1);
                   var div1=document.getElementById("div1");
                   var div2=document.getElementById("div2");
                   var div3=document.getElementById("div3");
                   div1.style.float="left";
                   div1.firstChild.style.borderRadius="45px";
                   div1.style.height="80px"
                   div2.style.position="relative";
                   div3.style.position="relative";
                   div2.style.height="40px";
                   div3.style.height="40px";
               }
           }
       }
   </script>
</html>