html 留言板：

最新推荐文章于 2023-11-25 14:15:35 发布

weixin_34362991

最新推荐文章于 2023-11-25 14:15:35 发布

阅读量1.1k

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/18829297883/blog/1083087

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           #body{
               /*图片固定于桌面*/
               background: url(img/hai.jpg) fixed center center no-repeat ;
               /*background-size: 100%;*/
               width: 100%;
               height: 100%;
           }
           #div1{
               width: 1200px;
               height: 200px;
               background-color: #28004D;
               background: rgba(0,0,0,.5);
               margin: auto;
               position: relative;
               margin-top:10px ;
               border-radius: 10px;
           }
           #div3{
               width: 1200px;
               height: 80px;
               background-color: #28004D;
               background: rgba(0,0,0,.5);
               margin: auto;
               position: relative;
               margin-top:10px ;
               border-radius: 10px;
           }
           #div4{
               width: 1200px;
               height: 100%;
               background-color: white;
               background: rgba(0,0,0,.0);
               margin: auto;
               position: relative;
               margin-top:10px ;
               border-radius: 10px;
           }
           /*蓝鸥logal*/
           #img1{
               width: 150px;
               height: 80px;
               position: absolute;
               left: 71px;
               top: 15px;
           }
           /*字体*/
           #s{
           position: absolute;
           top: 47px;
           left: 233px;
           color: white;
           font-size: 25px;
           opacity: 0.7;
           }
           /*图像*/
           #div2{
               position: absolute;
top: 19px;
left: 917px;
background-image:url(img/m.jpg);
width: 76px;
height: 76px;
border-radius: 50%;
background-color: white;
background-size: 67px;
           }
           /*字体大小*/
           #span1{
               position: absolute;
top: 35px;
left: 1011px;
font-size: 28px;
color: white ;
           }
           /*注销*/
           #a1{
               position: absolute;
               top: 47px;
               left: 1068px;
               font-size: 18px;
               color: red;
opacity: 0.3px;
           }
           #span2{
               position: absolute;
               left: 180px;
               bottom:40px;
               font-size: 25px;
               color:#00FFFF;
           }
           #span3{
               position: absolute;
               left: 330px;
               bottom:40px;
               font-size: 25px;

           }
           #span4{
               position: absolute;
               left: 480px;
               bottom:40px;
               font-size: 25px;

           }
           #span5{
               position: absolute;
               left: 630px;
               bottom:40px;
               font-size: 25px;

           }
           #span6{
               position: absolute;
               left: 760px;
               bottom:40px;
               font-size: 25px;

           }
           #span7{
               position: absolute;
               left: 890px;
               bottom:40px;
               font-size: 25px;

           }

           #line{
               width: 815px;
               height: 2px;
               position: absolute;
               bottom: 20px;
               left: 180px;
               background-color: white;
           }
           #span8{
               position: absolute;
left: 50px;
top: 20px;
color: white;
           }
           #t1{
               position: absolute;
left:170px;
top: 10px;
background-color: #28004D;
               background: rgba(0,0,0,.2);
width: 800px;
height: 60px;
color: white;
               font-size: 18px;
           }
           #btn{
               position: absolute;
left: 978px;
top: 10px;
width: 80px;
height: 20px;
background-color: #4DFFFF;
border-radius:10px ;
           }
       </style>
   </head>
   <body id="body">
       <div id="div1">
           <img src="img/l.png" id="img1" />
           <span id="s">安全管理平台</span>
           <div id="div2"></div>
           <span id="span1">pc</span>
           <a href="" id="a1">注销登陆</a>
           <span id="span2">产品信息</span>
           <span id="span3">角色管理</span>
           <span id="span4">账号信息</span>
           <span id="span5">安全扫描</span>
           <span id="span6">故障信息</span>
           <span id="span7">值班管理</span>
           <div id="line"></div>

       </div>
       <div id="div3">
       <span id="span8">发表您的想法</span>
       <textarea id="t1" οnfοcus="if(value=='发表内容'){value=''}" οnabοrt="if(value=''){values='发表内容'}">发表内容</textarea>
       <input type="button" id="btn" value="发表" />
       </div>
       <div id="div4">

       </div>
   </body>
   <script type="text/javascript">
       var textContent=document.getElementById("t1");
   var btn=document.getElementById("btn");
   var content=document.getElementById("div4");
   //创建的
   btn.οnclick=function(){
       addDiv();
   }
       function addDiv(){
    //放名字，文本，线，日期
   var divContent=document.createElement("div");
   //姓名
   var name1=document.createElement('n');
   //文本
   var textC=document.createElement("p");
   //线
   var line=document.createElement("div");
   //日期
   var date2=document.createElement("date1");
   //刪除按鈕
   var removeBtn=document.createElement("button");
   //楼号
   var float1=document.createElement("f");
   var date1=new Date();
       var year=date1.getFullYear();
       var month=date1.getMonth()+1;
       var day=date1.getDate();
       var hour=date1.getHours();
       var minite=date1.getMinutes();
       var second=date1.getSeconds();
var datetime=year+":"+month+":"+day+" "+hour+":"+minite+":"+second;
//每一个divcont大小

divContent.style.position="relative";
divContent.style.height="100px";
divContent.style.width="900px";
divContent.style.margin="auto";
// divContent.style.backgroundColor="#CAFFFF";
divContent.style.backgroundcolor="#28004D";
divContent.style.background="rgba(0,0,0,.5)";0
//名字
name1.style.position="absolute";
name1.style.left="20px";
name1.style.top="20px";
name1.innerText="pc";
//内容
textC.style.position="absolute";
textC.style.height="50px";
textC.style.weight="700px";
textC.innerText=textContent.value;
textC.style.left="30px";
textC.style.top="30px";
//线
line.style.width="900px"
line.style.height="1px"
line.style.backgroundColor="black";
line.style.position="absolute";
line.style.left="0px"
line.style.bottom="5px";
//日期
date2.style.position="absolute";
date2.style.right="100px";
date2.style.bottom="8px";
date2.innerText=datetime;
date2.style.right="100px";
date2.style.bottom="8px";
//刪除按鈕
removeBtn.style.position="absolute";
removeBtn.style.right="100px";
removeBtn.style.bottom="70px";
removeBtn.style.height="20px";
removeBtn.style.width="45px";
removeBtn.innerText="删除";
removeBtn.style.backgroundColor="red";
//楼层排序
float1.style.position="absolute";
float1.left="10px";
float1.top="10px";
float1.innerText=content.children.length+1;
//添加
divContent.appendChild(float1);
divContent.appendChild(removeBtn);
divContent.appendChild(date2);
divContent.appendChild(name1);
divContent.appendChild(line);
divContent.appendChild(textC);

//倒叙添加
content.insertBefore(divContent,content.children[0]);
console.log(content.children.length);

  删除：
removeBtn.οnclick=function(){
divContent.remove();
var num=content.children.length;
for(var i=0;i<num;i++){
   content.children[i].childNodes[0].innerText=num-i;
}
}
}
   </script>
</html>