js简易QQ聊天记录

最新推荐文章于 2024-07-19 22:07:41 发布

吴恒利

最新推荐文章于 2024-07-19 22:07:41 发布

阅读量798

点赞数

本文链接：https://blog.csdn.net/a2QWSDN/article/details/89405222

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>QQ</title>
</head>
<style type="text/css">
	*{margin:0;
		padding: 0;
		list-style:none;
	}
	.items{
		width: 500px;
		height:700px ;
		border:1px solid;
		margin: 0 auto;
	}
      .box{
         width:500px;
         height: 400px;
         overflow:auto;
      }
      img{
      	width:500px;
      }
      #text{
      	width: 500px;
      	height: 200px;
      }
      button{
      	float: right;
      }
      .f{
       	width: 400px;
       	background: #ccc;
       	margin-left:60px;
       }
       .ff{
       	width: 60px;
       height: 30px;
       	color: purple;
       	margin-left:80px;
       	margin-top:-60px;
       }
       .image{
       	width: 50px;
       	margin-top:20px;
       }
</style>
<body>
	<div class="items">
		<div class="box">
			<ul class="item"></ul>
		</div>

		<div class="box1">
			<img src="聊天.png" alt="" />
			<textarea name="" id="text" cols="30" rows="10"></textarea>
			 <button>关闭(c)</button><button id="btn" >发送(s)</button>
		</div>
	</div>
</body>


	
	  <script type="text/javascript">
	  
	 	var ul=document.getElementsByClassName("item")[0];

                   // 引入item
	 	var arr=["4.gif","5.gif"];
                   //把图片放入数组
	 	var arr1=["老大","老二","老三"];
                   // 名字放入数组
	 	function num(m,n){
	 		var a =Math.round(Math.random()*(n-m)+m)
	 		return a }
	 	        // 随机数
	 	     btn.onclick=function(){
	 		var li=document.createElement("li")
                             //创建li
	 		var p=document.createElement("p")
                               //创建p
	 		var img=document.createElement("img")
                                  //创建img
	 		var h4=document.createElement("h4")
                              //创建 h4
	 		var val=text.value;
                              //text.value值等于val
            
              p.innerHTML=val;
                //p文本内容等于textarea的val值
              text.value="";
                //value值线为空
             (p).className=("f")
                  //引入classname设置样式
              li.appendChild(p)
                   //li的子集是p
              ul.appendChild(li)
                  //ul的子集是li
            a=num(0,arr.length-1);
                  //a等于随机数
            h4.className=("ff")
                 //引入class类名
              h4.innerHTML=arr1[a]
                  //h4的文本内容随机名字
               li.appendChild(h4)
               //li的子集是h4

            img.src=arr[a]
              //img的随即图片
            img.className=("image")
               //设置class类名设置css样式
            li.appendChild(img)
             //li的子集是img
    
	 	}


           
</script>
</html>