javascript 作品

最新推荐文章于 2022-08-21 11:25:25 发布

Tsk720

最新推荐文章于 2022-08-21 11:25:25 发布

阅读量934

点赞数 3

分类专栏： javascript

本文链接：https://blog.csdn.net/Tsk720/article/details/103036528

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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

在这里插入图片描述

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>