javascript 作品

JavaScript获取浏览器高度和宽度值

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

javascript 作品_第1张图片

JS的位置

    //clientHeight表示的是可视区域的高度,不包含border和滚动条(css height + css padding)
    console.log('clientHeight:'+document.getElementById('div').clientHeight);
    //Element.scrollHeight 这个只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容
    console.log('scrollHeight:'+document.getElementById('div').scrollHeight);
    //HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数
    console.log('offsetHeight:'+document.getElementById('div').offsetHeight);


    //clientTop一个元素顶部边框的宽度(以像素表示)。不包括顶部外边距或内边距。clientTop 是只读的 
    console.log('clientTop:'+document.getElementById('div').clientTop);
    //Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
    console.log('scrollTop:'+document.documentElement.scrollTop);
    //HTMLElement.offsetTop 为只读属性,它返回当前元素相对于其 offsetParent 元素的顶部的距离
    console.log('offsetTop:'+document.getElementById('div').offsetTop);

BOM

定时器应用
轮播图(纯js)
Div块 移动(键盘控制)

Div块 移动 代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<style type="text/css">
#box1{
     
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
} 
</style>
</head>
<body>
  <div id="box1"></div>
</body>
<script type="text/javascript">
var speed=20;
//通过修改dir影响方向
var dir=0;
setInterval(function(){
     
        switch (dir){
     
            case 37://"向左"
            box1.style.left=box1.offsetLeft-speed+"px";
              break;
            case 38://"向上"
             box1.style.top=box1.offsetTop-speed+"px";
              break;
                      case 39://"向右"
             box1.style.left=box1.offsetLeft+speed+"px";
              break;
                      case 40://"向下"
             box1.style.top=box1.offsetTop+speed+"px";
              break;
            }
},30);
   document.onkeydown=function(event){
     
    event=event||window.event;    https://saton.top/javascript/js基础/练习/BOM练习/
  if(event.ctrlKey)//按ctrl改变速度
    {
     speed=50;}else{
     speed=20}
    dir=event.keyCode;
  }
  document.onkeyup=function(){
     
   dir=0;
  }
</script>
</html>

DOM

div跟随鼠标
滚轮练习
键盘练习
全选练习
事件绑定
事件冒泡
事件委派
拖拽

拖拽练习 代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
  #box1{
     
    width: 200px;
    height:200px;
    background-color: #bfa;
    position: absolute;
  }
    #box2{
     
    width: 200px;
    height:200px;
    background-color: yellow;
    position: absolute;
    left: 500px;
    top:50px;
  }
</style>
</head>
<body >
	<div align="center">
    6666
  <div id="box1"></div>
  <div id="box2"></div>
   <img src="./img/1.jpg" id="img1" style="position: absolute;"/>
</div>

 
 
</body>
<script type="text/javascript">
 var box1=document.getElementById("box1");
 var box2=document.getElementById("box2");
 var img1=document.getElementById("img1");

 drag(box1);
 drag(box2);
 drag(img1);
 function  drag(obj){
     
   obj.onmousedown=function(event){
     
  //设置box捕获所以鼠标按下的事件
  obj.setCapture&&obj.setCapture();
 event=event||window.event;
  //div的偏移量 .clientx-元素.offsetLeft
  //div的偏移量 .clienty-元素.offsetTop 鼠标在哪点,就固定在div哪里
  var ol=event.clientX-obj.offsetLeft;
  var ot=event.clientY-obj.offsetTop;
  
  document.onmousemove=function(event){
     

  event=event||window.event;//解决事件对象兼容性
  var left=event.clientX-ol;
  var top=event.clientY-ot;
  obj.style.left=left+"px";
  obj.style.top=top+"px";
 }
  obj.onmouseup=function(){
     
  //当鼠标松开时,被拖拽元素固定在当前位置
  //取消document的onmousemove事件
  document.onmousemove=null;
  //取消document的onmouseup事件
  document.onmouseup=null;
  obj.releaseCapture&&obj.releaseCapture();
 }
 //当拖拽一个网页内容时,浏览器会默认搜索引擎中的搜索内容
 //可以通过return false来阻止
 return false;
 }
 }
</script>
</html>

你可能感兴趣的:(javascript)