体验事件三要素代码01

游鹄君2025年4月30日小于 1 分钟
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件三要素</title>
  
  <!-- 内嵌样式 -->
  <style type="text/css">
    *{
     margin:0px;
     padding:0px;
    }
 
    #dvs {
     width:200px;
     height:200px;
     background:red;
    }
  </style>
</head>
<body>
 
  <!-- 实现div各种不同效果 -->
  <div id='dvs' style="position:absolute;left:0px"></div>
  
  <script type="text/javascript">
  //获取div对象
  var dvs=document.getElementById('dvs');
  
  //01实现自动移动 (让div不断向右移动) 
  var i=0;
  //使用定时器
  setInterval(function(){
 
    //获取元素的属性值
    var a=dvs.style.left;
    //增加移动距离
    var ad=parseInt(a)+10;
    console.log(ad);
 
    dvs.style.left=ad+"px";
 
    i++;
    //02 向div中增加文本!
    dvs.innerHTML=i;
  
    //03随机背景颜色
    //dvs.style.background='rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')';
    
    //04随机背景图片
    dvs.style.background='url(./images/'+rand(1,11)+'.jpg)';
 
    //05增加竖向移动距离(注意:::需要用驼峰命名法 并把-去掉!)
    dvs.style.marginTop='20px';
 
 
  },1000);
 
  function rand(m,n)
  {
    return Math.ceil(Math.random()*(n-m+1))+(m-1);
  }
 
  </script>
</body>
</html>