基本方法

游鹄君2025年4月30日大约 2 分钟

示例代码

基本方法01

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>方法</title>
</head>
<body>
  <button>确认框</button>
  <button>获取用户输入信息</button>
  <button>打开</button>
  <button>关闭</button>
  <script type="text/javascript">
    var buts = document.getElementsByTagName('button');
 
    buts[0].onclick=function()
    {
     //返回值是Boolean;
     var str=confirm('确认关闭吗');
    }
 
    buts[1].onclick=function()
    {
     //返回值是输入的内容!
     var into=prompt('请输入你的姓名');
 
     //console.log(into);
    }
  </script>
</body>
</html>

基本方法02

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>setTimeout</title>
</head>
<body>
  <button>开始</button>
 
  <button>停止</button>
 
  <button>开始1</button>
 
  <button>停止1</button>
  <script type="text/javascript">
  var buts = document.getElementsByTagName('button');
 //声明一个变量,接收一下函数结果
 var into=null;
  //只触发一次
  buts[0].onclick = function()
  {
    
    into=setTimeout(function(){
     alert('你好!');
    },1000)
  
  }
  buts[1].onclick=function()
  {
    clearTimeout(into);
  }
 
  var intol=null;
  //连续触发
  buts[2].onclick = function()
  {
    
    intol=setInterval(function(){
     console.log('12');
    },1000)
  
  }
 
  buts[3].onclick=function()
  {
    clearInterval(intol);
  }
  </script>
</body>
</html>

基本方法03

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>moveTo moveBy resizeTo resizeBy</title>
  <style type="text/css">
    *{margin:0px;padding:0px;}
    #dvs{
     width:120px;
     height:120px;
     border:solid 1px blue;
    }
  </style>
</head>
<body style='width:1800px;height:1600px'>
   <div id='dvs'></div>
 
  <button>moveTo</button>
  <button>moveBy</button>
 
  <button>resizeTo</button>
  <button>resizeBy</button>
  <script type="text/javascript">
    var buts = document.getElementsByTagName('button');
    var dvs = document.getElementById('dvs');
    
    //只在Ie里面有效
    //moveTo()  把窗口的左上角移动到一个指定的坐标  
    buts[0].onclick = function()
    {
     moveTo(100,100);
    }
    //moveBy()  浏览器按照指定的像素移动坐标位置
    buts[1].onclick = function()
    {
      moveBy(5,5);    
    }
    //resizeTo()  把窗口的大小调整到指定的宽度和高度
    buts[2].onclick = function()
    {
     resizeTo(200,200);
    }
    //resizeBy()  按照指定的像素调整窗口的大小
    buts[3].onclick = function()
    {    
     resizeBy(-5,5);
    }
 
    //scrollTo()  把文档内容滚动到指定的坐标
 
    //scrollTo(120,120);
 
    //scrollBy()  按照指定的像素值来滚动内容
    //scrollBy(50,50);
  </script>
</body>
</html>

滚动窗口自动播放

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>onscorll  onresize</title>
  <style type="text/css">
  *{margin:0px;padding:0px}
  #prev{
    width:800px;
    height:600px;
    background:lightblue;
  }
 
  #video{
    width:800px;
    height:600px;
    /*border:solid 1px blue;*/
    margin-top:20px;
  }
  </style>
</head>
<body style='width:1600px;height:1600px'>
 
  <div id='prev'></div>
  <div id='video'>
     
    <video id='veo' src="./action.mp4" controls="controls" width='800px' height='100%'></video>
  </div>
  <script type="text/javascript">
  var veo = document.getElementById('veo');
  //滚动条滚动事件
  /*window.onscroll=function()
  {
    alert('123');
  }*/
  //改变窗口大小时发生的事件
  /*window.onresize=function()
  {
    alert('456');
  }*/
 
  window.onscroll=function()
  {
    //获取整个文档的高度
    var h =document.documentElement.scrollHeight;
    //获取可视区域的距离
    var c=document.documentElement.clientHeight;
    //获取顶部隐藏的文档高度
    var t=document.documentElement.scrollTop;
 
    if(h-t-c<=380)
    {
     veo.autoplay = 'autoplay';
    }
  }
  </script>
</body>
</html>