鼠标点击星星案例

最新推荐文章于 2023-10-10 11:15:00 发布

jlhaoran

最新推荐文章于 2023-10-10 11:15:00 发布

阅读量1k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/haoranli/article/details/73179007

版权

HTML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>基本选择器</title>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <meta name="author" content="" />
   <meta name="keywords" content="" />
   <meta name="description" content="" />
   <style type="text/css">

      body{
        margin: 0px;
        height: 300px;
      }
   </style>
   <script type="text/javascript">
     
     window.οnlοad=init;  //窗口事件
     
     function init(){
       document.body.bgColor="black";
     }
      
      function fn(e){
   

      //在网页上点击出现星星
      var obj=document.createElement("img");
      obj.src="xingxing.gif";
      //设置图像大小 20---60 
      var w = Math.random()*((60-20)+1)+20
      obj.width=w;
      //设置图像的位置
      var x = e.clientX;//x需要随即出现
      var y = e.clientY;//y需要随即出现
      
      obj.style.position="absolute";
      obj.style.left = x + "px";
      obj.style.top =  y + "px";

      document.body.appendChild(obj);
        
        // alert(x);
      }
   </script>
</head>
<body οnclick="fn(event)">
 
</body>
</html>