许愿树——JS练习

最新推荐文章于 2020-09-26 22:51:02 发布

Knight__D

最新推荐文章于 2020-09-26 22:51:02 发布

阅读量1.7k

点赞数

分类专栏： web前端 JavaScript

本文链接：https://blog.csdn.net/dihuiqin/article/details/52605458

版权

web前端同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

JavaScript

25 篇文章 0 订阅

订阅专栏

一个简单的许愿树制作，记录一下

<!DOCTYPE html>
<html>
<head>
   <title>许愿树</title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8">
   <style type="text/css">
      *{  margin: 0;  padding: 0;  }
      body{  background-image:url(images/bg.jpg);  font-weight: bold; }
      .box{  width: 400px;  height: 500px;  }
      .pink,.blue,.purple{  width:235px;  height: auto;  }
      .top{  width: 235px;  height: 68px;  }
      .middle{  width: 217px;  min-height: 50px;  margin-left: -2px;  padding-left: 20px;  color: #000;  }
      .bottom{  width: 235px;  height: 72px;  color: #000;  }
      .top.blue{       background-image: url(images/a6_1.gif);    }
      .middle.blue{  background-image: url(images/a6_2.gif);  }
      .bottom.blue{  background-image: url(images/a6_3.gif);  }
       .top.purple{  background-image: url(images/a4_1.gif);  }
      .middle.purple{  background-image: url(images/a4_2.gif);  }
      .bottom.purple{  background-image: url(images/a4_3.gif);  }
       .top.pink{  background-image: url(images/a3_1.gif);  }
      .middle.pink{  background-image: url(images/a3_2.gif);  }
      .bottom.pink{  background-image: url(images/a3_3.gif);  }
      .bottom .wishIcon{  padding: 20px 0 0 30px; float: left;  }
      .bottom .wishName{  padding:20px 5px 0 30px;float: right;  }
   </style>
</head>
<body>
   <div class="box">
      <label for="name" >许愿留名:</label><input type="text" id="name"><br><br>
      <label for="content">许愿内容:</label> <textarea rows="10" cols="20"  id="content"></textarea><br>
      <label for="icon" id="icon">许愿图标:</label>
      <input type="radio" name="apple" value="0" /><label for="apple" name="a"><img src="images/bpic_11.gif"></label>
      <input type="radio" name="apple" value="1" /><label for="heart" name="a"><img src="images/bpic_13.gif"></label>
      <input type="radio" name="apple" value="2" /><label for="leaf" name="a"><img src="images/bpic_25.gif"></label>
      <br><br>
      <label for="content">许愿颜色:</label>
      <select id="color">
         <option value="blue">淡蓝色</option>
         <option value="purple">黄色</option>
         <option value="pink">粉色</option>
      </select>
      <br>
      <input type="button" value="许愿" οnclick="xuyuan()">
      <br>
   </div>
</body>
<script type="text/javascript">
   var num=0;
   function xuyuan() {
      num++;
      var wishName=document.getElementById("name").value;//获取许愿姓名的值
      var wishContent=document.getElementById("content").value;//获取许愿内容的值
      var wishColor=document.getElementById("color").value;//获取许愿颜色
      var  myselect=document.getElementsByName("apple");//获取许愿图标前边的值
      var labelArr=document.getElementsByName("a");//获取许愿图标
      var bg="";
      for (var i = 0; i < myselect.length; i++) {
         if (myselect[i].checked) {
            bg=labelArr[i].innerHTML;
         }
      }
      addWisher(wishName,wishContent,wishColor,bg,num);
   }
   function addWisher(wishName,Content,color,bg,i){
      var div=document.createElement("div");
      document.getElementsByTagName("body")[0].appendChild(div);
      div.style.position="absolute";
      div.style.left=Math.random()*800+300+"px";
      div.style.top=Math.random()*400+"px";
      div.style.zIndex=i;
      div.innerHTML="<div class='top "+color+"'></div>";
      div.innerHTML+="<div class='middle "+color+"'>"+Content+"</div>";
      div.innerHTML+="<div class='bottom "+color+"'><span class='wishIcon'>"+bg+"</span><span class='wishName'>"+wishName+"</span></div>";

   }
</script>
</html>