js小案例

已于 2022-08-25 19:05:31 修改
阅读量296 收藏 1
点赞数
分类专栏： # js 文章标签： javascript 前端 开发语言
于 2022-07-14 21:23:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Matcha_ice_cream/article/details/125793235
版权

记录学习过程中的小案例。持续更新 ~ ~ ~

JavaScript小案例

一、事件

1. 显示鼠标区域移动坐标

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标移动事件</title>
</head>
<style>
  #moveArea {
    width: 300px;
    height: 100px;
    border: 2px solid gray;
  }
  #showArea {
    width: 300px;
    height: 30px;
    border: 2px solid grey;
    margin-top: 40px;
  }
</style>
<script>
  window.onload = function() {
    let moveArea = document.getElementById("moveArea");
    let showArea = document.getElementById("showArea");
    let x, y;
    moveArea.onmousemove = function(e) {
      e = e || window.e; //为了兼容性
      x = e.clientX;
      y = e.clientY;
      showArea.innerHTML = "x = " + x +  "，y = " + y;
    }
  }
</script>
<body>
  <div id="moveArea"></div>
  <div id="showArea"></div>
  
</body>
</html>

显示效果：

在这里插入图片描述

2. div跟随鼠标移动

方案一：使用clientX、clientY，需计算scrollTop和scrollLeft的值

方案一代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>div随鼠标移动</title>
</head>
<style>
  #div {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
  }
</style>
<script>
  window.onload = function() {
    let div = document.getElementById("div");
    document.onmousemove = function(e) {
      let x = e.clientX; //获取可视区域的客户端坐标
      let y = e.clientY;
      let st = document.documentElement.scrollTop; //获取html的scrollTop值，而非body的
      let sl = document.documentElement.scrollLeft;
      div.style.left = x + sl + "px";  //注意，一定要加上px，不然没有效果
      div.style.top = y + st + "px";
    }
  }
</script>
<body style="height: 1000px; width: 2000px;">
  <div id="div"></div>
</body>
</html>

方案二：使用pageX、pageY，很方便

方案二代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>div随鼠标移动</title>
</head>
<style>
  #div {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
  }
</style>
<script>
  window.onload = function() {
    let div = document.getElementById("div");
    document.onmousemove = function(e) {
      let x = e.pageX; //获取页面坐标
      let y = e.pageY;
      div.style.left = x + "px";  //注意，一定要加上px，不然没有效果
      div.style.top = y + "px";
    }
  }
</script>
<body style="height: 1000px; width: 2000px;">
  <div id="div"></div>
</body>
</html>

显示效果： div跟随鼠标移动

在这里插入图片描述

3. 鼠标拖拽事件

分析：
鼠标拖拽事件可以分为以下几步：
1）鼠标按下时，开始拖拽
2）鼠标移动时，被拖拽元素跟随其移动
3）鼠标松开时，被拖拽元素固定在原位置

案例过程中的鼠标分析：
在拖拽过程中，可以发现鼠标锚点总是会弹跳到被拖拽元素的左上角，需要进一步优化，使拖拽过程中鼠标锚点不再弹跳。
分析如下：

在这里插入图片描述

具体代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标拖拽</title>
</head>
<style>
  #box1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: coral;
  }
  #box2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: skyblue;
    top: 200px;
    left: 200px;
  }
</style>
<script>
  window.onload = function () {
    //鼠标拖拽事件分析：
    /**
     * 1.鼠标按下时，即开始拖拽
     * 2.鼠标移动时，被拖拽元素跟随鼠标移动
     * 3.鼠标松开时，被拖拽元素固定在原位置
     */
    var box1 = document.getElementById("box1");
    box1.onmousedown = function (event) {
      //给document绑定一个onmousemove事件
      //从开始点击拖拽时，就确定鼠标锚点的相对位置
      event = event || window.event;
      var ol = event.clientX - box1.offsetLeft;
      var ot = event.clientY - box1.offsetTop;

      //针对IE8进行全选时,取消默认行为,使用setCapture;
      box1.setCapture && box1.setCapture();
      //执行过程是这样的，先判断box1.setCapture是否为true，如果为true，则执行box1.setCapture
      //setCapture()函数，就是把所有的事件都包揽给自己

      document.onmousemove = function (event) {
        event = event || window.event;
        var left = event.clientX;
        var top = event.clientY;
        box1.style.left = left - ol + "px";
        box1.style.top = top - ot + "px";
      }
      //为document元素绑定一个松开事件
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        //需要取消鼠标松开事件，否则，点击文档任意部分，松开鼠标就会触发鼠标松开事件

        box1.releaseCapture && box1.releaseCapture();
        //鼠标松开后，取消releaseCapture()事件，执行过程同setCapture类似
      }
      return false; //取消浏览器的默认行为
      //引入的情况：当页面中有文字时，全选页面内容，会拖动文字和div盒子，
      //使用return false，取消默认事件行为，但是对于IE8不起作用
    }
  }
</script>
<body>
  <p>我是一段文字</p>
  <div id="box1"></div>
  <div id="box2"></div>
</body>
</html>

展示效果：

Chrome中：
在这里插入图片描述

IE8中：
在这里插入图片描述

封装一个用于拖拽的函数：

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标拖拽</title>
</head>
<style>
  #box1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: coral;
  }
  #box2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: skyblue;
    top: 200px;
    left: 200px;
  }
</style>
<script>
  window.onload = function () {
    //鼠标拖拽事件分析：
    /**
     * 1.鼠标按下时，即开始拖拽
     * 2.鼠标移动时，被拖拽元素跟随鼠标移动
     * 3.鼠标松开时，被拖拽元素固定在原位置
     */
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    drag(box1);
    drag(box2);
  }
  //提取一个用来设置拖拽的函数
  function drag(obj) {
      obj.onmousedown = function (event) {
        //给document绑定一个onmousemove事件
        //从开始点击拖拽时，就确定鼠标锚点的相对位置
        event = event || window.event;
        var ol = event.clientX - obj.offsetLeft;
        var ot = event.clientY - obj.offsetTop;

        //针对IE8进行全选时,取消默认行为,使用setCapture;
        obj.setCapture && obj.setCapture();
        //执行过程是这样的，先判断box1.setCapture是否为true，如果为true，则执行box1.setCapture
        //setCapture()函数，就是把所有的事件都包揽给自己

        document.onmousemove = function (event) {
          event = event || window.event;
          var left = event.clientX;
          var top = event.clientY;
          obj.style.left = left - ol + "px";
          obj.style.top = top - ot + "px";
        }
        //为document元素绑定一个松开事件
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
          //需要取消鼠标松开事件，否则，点击文档任意部分，松开鼠标就会触发鼠标松开事件

          obj.releaseCapture && obj.releaseCapture();
          //鼠标松开后，取消releaseCapture()事件，执行过程同setCapture类似
        }

        return false; //取消浏览器的默认行为
        //引入的情况：当页面中有文字时，全选页面内容，会拖动文字和div盒子，
        //使用return false，取消默认事件行为，但是对于IE8不起作用
      }

    }
</script>

<body>
  <p>我是一段文字</p>
  <div id="box1"></div>
  <div id="box2"></div>
</body>

</html>

显示效果：
给元素调用拖拽函数，即可进行拖拽效果

在这里插入图片描述

4. 键盘移动div

实现的效果：当按下左键时，div向左移动；按下上键时，div向上移动；按下右键时，div向右移动；按下下键时，div向下移动。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>键盘移动div</title>
</head>
<style>
  #box1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
  }
</style>
<script>
  window.onload = function() {
    /**
     * 实现功能：
     * 1.当点击左键时，div向左移动
     * 2.当点击上键时，div向上移动
     * 3.当点击右键时，div向右移动
     * 4.当点击下键时，div向下移动
     * keyCode：左：37 上：38 右：39 下：40 从左开始，顺时针记忆
    */
    var box1 = document.getElementById("box1");
    var speed = 10;
    document.onkeydown = function(event) {
      switch(event.keyCode) {
        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";
      }
    }
  }
</script>
<body>
  <div id="box1"></div>
</body>
</html>

显示效果：

在这里插入图片描述

二、动画

1. 封装简单动画函数

动画函数的封装

animate.js文件

// 主要进行简单动画函数的封装
/*
  业务实现：封装的animate动画主要实现obj对象简单的左右移动的功能
  其中，obj为目标对象；target为对象需要移动的目标；
  callback为回调函数，可以在动画结束后实现相关的操作
 */
function animate(obj, target, callback) {

  // 清除在此之前的定时器，保证一次只开一个定时器
  clearInterval(obj.timer);
  //使用定时器实现左右移动，其中，给每一个对象设置一个定时器
  obj.timer = setInterval(() => {

    //这里让动画减速运行，每次运行时，步长按规律减小，但是这样的话，步长值可能有小数，需要取整
    var step = (target - obj.offsetLeft) / 10;

    //对步长值取整。向右移动时，向上取整(Math.ceil)；向左移动时，向下取整(Math.floor)
    step = step > 0 ? Math.ceil(step) : Math.floor(step);

    if(obj.offsetLeft == target) {
      // 如果到达目的地之后，清除动画
      clearInterval(obj.timer);
      if(callback) {
        // 如果传入的参数有回调函数，则调用回调函数
        callback();
      }
    }

    // obj.style.left获取的是具有定位属性的父元素的左边距。
    // 并且obj.style.left是可读写的；而obj.offsetLeft是只读的属性，返回值为数值
    obj.style.left = obj.offsetLeft + step + 'px';  // 每调用一次，就会计算一下left值
  }, 15);
}

使用animation.js中的动画效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>animate动画实现</title>
</head>

<style>
  span {
      display: block;
      position: relative;
      top: 50px;
      left: 0;
      width: 200px;
      height: 200px;
      background-color: #42b983;
  }
</style>
<script src="animate.js"></script>
<body>

<button class="btn400">移动到400的位置</button>
<button class="btn800">移动到800的位置</button>
<span>YiBo</span>

<script>
  window.addEventListener('load', function (){
    // var btn400 = document.getElementById('btn400');
    // var box1 = document.getElementById('box1');
    var btn400 = document.querySelector('.btn400');
    var btn800 = document.querySelector('.btn800');
    var span = document.querySelector('span');
    btn400.addEventListener('click', function () {
      animate(span, 400);
      // alert("1");
    });
    btn800.addEventListener('click', function() {
      animate(span, 800);
    })
  })
</script>
</body>


</html>

显示效果：

在这里插入图片描述

Matcha_ice_cream
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js案例分享
TZLNBB的博客
03-10 7085
开发工具与关键技术：Visual Studio 作者：唐洲来 撰写时间：2022/3/8 一．星星亮起来案例分享 首先打开工具创建一个html代码 如图； 在tilte下面创建一个style标签代码如下 5.body内容主体下创建一个input文本标签，在创建个div容器如图； 6.html样式基本完成，创建JavaScript文件然后创建seript标签引用到htnl内如图； 在创建一个seript标签，代码如图； 在找到我们创建...
原生 js小案例
qq_40770473的博客
10-11 708
原生 js小案例1效果图2html3js4css 1效果图 点击12个月份中的任意一个，底部就会显示对应月份 2html <div id="dv1"> <div id="dv2"></div> </div> 3js <script type="text/javascript"> var mydv1 = document.getElementById("dv1"); var xd = document.getElements
30个HTML+JS小案例
05-06
该项目都是我工作时期，闲来无事做来玩的小案例。如果你是0基础的小白或者H5，Css3基础不太好的开发者，相信当你跟着敲完之后你能得到巨大的收获。能加固你的H5和css3的基础。 里面可能会有一些奇奇怪怪的注释代码，如果看到了，请忽略它！！！！ 内含：canvas，H5+css3网页还原，JS DOM BOM操作小案例，css动画，验证码，抽奖系统，轮播图等等
20个JavaScript开发案列（一）
终成大师的博客
02-17 4893
20个JavaScript开发案列（一）
JavaScript 各种小案例
老段的CSDN的博客
07-30 3303
JavaScript 6个常用的小案例
js中的一些小案例
qq_45760909的博客
06-24 1049
1抽奖 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> table{ width:500px; height:500px; } td{ width:150px; height:50px; bor
js基础精选案例
m0_64492064的博客
04-09 1673
主要是自己用来复习用的。如果想要练习的小伙伴也可以参考一下哦~ 1.[red','blue','red','green','pink','red'],求red出现的位置和次数 //思路是 先把第一个red的坐标找出来 然后遍历 每次查找的位置是上一个位置+1； var arr = ['red', 'blue', 'red', 'green', 'pink', 'red']; var index = arr.indexOf('red'); //0
500套JavaScript小案例
05-11
"500套JavaScript小案例" 提供了丰富的资源，帮助开发者深入理解和掌握JavaScript的核心概念和实际应用。这些案例覆盖了JavaScript的多个重要领域，包括事件处理、视觉特效、异步通信（Ajax）以及文档对象模型（DOM...
JavaScript小案例.zip
01-18
这个"JavaScript小案例.zip"文件包含三个实用的JavaScript功能示例，它们可以帮助初学者更好地理解和掌握JavaScript的基础以及实际应用。 第一个案例是“点击更换超链接”。在网页中，超链接通常用于引导用户访问...
Javascript实现的简单的转盘抽奖小案例+Javascript编程+Javascript小案例+转盘抽奖程序案例
最新发布
06-05
Javascript实现的简单的转盘抽奖小案例+Javascript编程+Javascript小案例+转盘抽奖程序案例Javascript实现的简单的转盘抽奖小案例+Javascript编程+Javascript小案例+转盘抽奖程序案例Javascript实现的简单的转盘抽奖...
javascript100个小例子
10-11
这个是100个javascript小例子 各种效果 操作表单页面等小例子 很有用 项目中直接copy就可以用 同样学习javascript的更合适用这些来学习
JavaScript案例-js购物车
02-16
在这个“JavaScript案例-js购物车”中，我们将深入探讨如何使用JavaScript技术来构建一个基本的在线购物车功能。购物车是电商网站不可或缺的一部分，它允许用户选择商品并保存这些选择，直到他们准备结账。 首先，...
JS案列问题锦集
weixin_67110633的博客
01-29 80
本文描述了对各类JS案列的代码描述
javaScript常用案例
张张张张张高高的博客
09-06 8599
前端页面开发之javaScript常用案例
JS 简单案例(10个最基础的)-分支 循环
GUIDM的博客
05-12 1049
博: 接 If语句 ①用简单的if语句编写: <script> var age=prompt('请输入你的年龄')； if(age＞=18){ alert('你可以进入')； } </scrip>
JavaScript基础——JS简单案例
m0_68794863的博客
12-04 5363
JS基础案例
Js小案列
wen0627的博客
09-25 455
1、共有两个小案例，第一个小案列是换网页背景图片，第一步是新建一个HTML文件，然后在bady中设置你要更换的网页背景，插入div，给div设置一个id命名为name，在div中插入p标签，最后在p标签中设置img标签插入你的图片。 2、接着设置css样式，设置name、p、img的样式。 3、最后设置js的样式，获取到图的id设置点击图片换背景。 4、第二个小案列是简单的轮播，第一步和上面的一样插入div，给div设置类和id，再添加style:left：-500px；。 ...
JS——经典案例
NanChen的博客
09-09 955
JS的经典案例
超详细JavaScript入门基础+练手小案例
weixin_55643605的博客
10-28 2440
一.什么是JavaScript 它是一种浏览器解释型语言，嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的 动态效果，用户交互及前后端的数据传输等。 它由下列三部分组成： 1.核心语法：规范JavaScript的基本语法。 2.BOM：提供了一系列操作浏览器的方法。 3.DOM：提供了一系列操作文档的方法。 二.使用方法 将JavaScript嵌入页面有以下三种方式： 1.元素绑定事件 事件：指用户的行为（单击，双击等）。 事件处理：元素监听事件，并在事件发生后自动执行事件过程
JavaScript案例-js轮播图
06-12
以下是一个使用 JavaScript 实现的简单的轮播图案例： ```html <!DOCTYPE html> <title>JavaScript 案例：轮播图 #slideshow { position: relative; width: 600px; height: 400px; margin: 0 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值