devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

每天几个js小案例，有手就能会

作者：盐析白兔 | 2024-06-14 10:33:00

赞

踩

每天几个js小案例，有手就能会

目录

1.圆周运动

2.英雄归为

3.反弹的小球

1.圆周运动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10. <style>
  11.     .bdr1 {
  12.         border-radius: 50%;
  13.         width: 300px;
  14.         height: 300px;
  15.         border: 1px solid red;
  16.         position: relative;
  17.     }
  18.  
  19.     .bdr2 {
  20.         border-radius: 50%;
  21.         width: 200px;
  22.         height: 200px;
  23.         border: 1px solid green;
  24.         position: absolute;
  25.         left: 0;
  26.         right: 0;
  27.         top: 0;
  28.         bottom: 0;
  29.         margin: auto;
  30.     }
  31.  
  32.  
  33.     .bdr3 {
  34.         border-radius: 50%;
  35.         width: 100px;
  36.         height: 100px;
  37.         border: 1px solid rebeccapurple;
  38.         position: absolute;
  39.         left: 0;
  40.         right: 0;
  41.         top: 0;
  42.         bottom: 0;
  43.         margin: auto;
  44.     }
  45.  
  46.     .bool {
  47.         width: 50px;
  48.         height: 50px;
  49.         border-radius: 50%;
  50.         background-color: skyblue;
  51.         position: absolute;
  52.         left: 0px;
  53.         top: 125px;
  54.     }
  55.  
  56.     .boolm {
  57.         width: 50px;
  58.         height: 50px;
  59.         border-radius: 50%;
  60.         background-color: rgb(226, 99, 99);
  61.         position: absolute;
  62.         left: 0px;
  63.         top: 75px;
  64.     }
  65. </style>
  66.  
  67. <body>
  68.     <div class="bdr1">
  69.         <div class="bool" id="bool"></div>
  70.         <div class="bdr2">
  71.             <div class="boolm" id="boolm"></div>
  72.             <div class="bdr3"></div>
  73.         </div>
  74.     </div>
  75.     <button onclick="check()">开始</button>
  76. </body>
  77. <script>
  78.     let bool = document.getElementById('bool')
  79.     let boolm = document.getElementById('boolm')
  80.     function check() {
  81.         circleMove(bool, 0, 125, 125, 20)
  82.         circleMove(boolm, 0, 75, 75, 20)
  83.     }
  84.     function circleMove(ball, x0, y0, r, t) {
  85.         let x = 0, y
  86.         let dsq1 = setInterval(() => {
  87.             ball.style.left = x0 + x++ + 'px'
  88.             y = -Math.sqrt(2 * x * r - Math.pow(x, 2))
  89.             ball.style.top = y0 + y + 'px'
  90.             if (x == 2 * r && y == 0) {
  91.                 clearInterval(dsq1)
  92.                 let dsq2 = setInterval(() => {
  93.                     ball.style.left = x0 + x-- + 'px'
  94.                     y = Math.sqrt(2 * x * r - Math.pow(x, 2))
  95.                     ball.style.top = y0 + y + 'px'
  96.                     if (x == 0 && y == 0) {
  97.                         clearInterval(dsq2)
  98.                         circleMove(ball, x0, y0, r, t)
  99.                     }
  100.                 }, t)
  101.             }
  102.         }, t)
  103.     }
  104. </script>
  105.  
  106. </html>

2.英雄归为

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10. <style>
  11.     img {
  12.         width: 200px;
  13.         height: 200px;
  14.         float: left;
  15.     }
  16.  
  17.     .picture {
  18.         width: 1600px;
  19.         height: 200px;
  20.         position: relative;
  21.     }
  22.  
  23.     .picture>div {
  24.         position: absolute;
  25.     }
  26.  
  27.     .kuang {
  28.         width: 1600px;
  29.         height: 200px;
  30.     }
  31.  
  32.     .a {
  33.         width: 200px;
  34.         height: 200px;
  35.         float: left;
  36.         margin-left: 40px;
  37.         border: 1px solid black;
  38.         text-align: center;
  39.         line-height: 200px;
  40.     }
  41. </style>
  42.  
  43. <body>
  44.     <div class="picture">
  45.         <div style="left: 0px;" id="picture1"><img src="图片/关羽.webp" alt=""  onclick="move1()"></div>
  46.         <div style="left: 200px;" id="picture2"><img src="图片/貂蝉.webp" alt=""  onclick="move2()"></div>
  47.         <div style="left: 400px;" id="picture3"><img src="图片/刘协.webp" alt=""  onclick="move3()"></div>
  48.         <div style="left: 600px;" id="picture4"><img src="图片/孙权.webp" alt=""  onclick="move4()"></div>
  49.         <div style="left: 800px;" id="picture5"><img src="图片/曹操.jpg" alt=""  onclick="move5()"></div>
  50.         <div style="left: 1000px;" id="picture6"><img src="图片/刘备(1).jpg" alt=""  onclick="move6()"></div>
  51.     </div>
  52.     <hr>
  53.     <div class="kuang">
  54.         <div class="a">刘协</div>
  55.         <div class="a">刘备</div>
  56.         <div class="a">关羽</div>
  57.         <div class="a">曹操</div>
  58.         <div class="a">孙权</div>
  59.         <div class="a">貂蝉</div>
  60.     </div>
  61.  
  62. </body>
  63. <script>
  64.     function change(img, x, y) {
  65.         document.onkeydown = function (e) {
  66.             switch (e.keyCode) {
  67.                 //左
  68.                 case 37:
  69.                     x--
  70.                     img.style.left = x + 'px'
  71.                     console.log(1)
  72.                     break
  73.                 //右  
  74.                 case 39:
  75.                     x++
  76.                     img.style.left = x + 'px'
  77.                     console.log(2)
  78.                     break
  79.                 //上
  80.                 case 38:
  81.                     y--
  82.                     img.style.top = y + 'px'
  83.                     break
  84.                 //下
  85.                 case 40:
  86.                     y++
  87.                     img.style.top = y + 'px'
  88.                     break
  89.             }
  90.         }
  91.     }
  92.     function move1() {
  93.         change(picture1, 0, 0)
  94.     }
  95.     function move2() {
  96.         change(picture2, 200, 0)
  97.     }
  98.     function move3() {
  99.         change(picture3, 400, 0)
  100.     }
  101.     function move4() {
  102.         change(picture4, 600, 0)
  103.     }
  104.     function move5() {
  105.         change(picture5, 800, 0)
  106.     }
  107.     function move6() {
  108.         change(picture6, 1000, 0)
  109.     }
  110. </script>
  111.  
  112. </html>

3.反弹的小球

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <title>Document</title>
  6.     <style>
  7.         .f {
  8.             width: 1200px;
  9.             height: 800px;
  10.             border: 1px solid red;
  11.             position: relative;
  12.         }
  13.  
  14.         .z {
  15.             width: 100px;
  16.             height: 100px;
  17.             border-radius: 50%;
  18.             background-color: #6cf;
  19.             position: absolute;
  20.             /* 正中心 */
  21.             left: 550px;
  22.             top: 350px;
  23.         }
  24.  
  25.         .kuai {
  26.             position: relative;
  27.             width: 400px;
  28.             height: 20px;
  29.             background-color: red;
  30.             left: 0px;
  31.         }
  32.     </style>
  33. </head>
  34.  
  35. <body>
  36.     <div class="f" onclick="startgame()">
  37.         <div id="ball" class="z">
  38.         </div>
  39.     </div>
  40.     <div id="kuai" class="kuai"></div>
  41. </body>
  42. <script>
  43.     //1、生成0到1200的随机整数
  44.     let r = Math.floor(Math.random() * 1200)
  45.     console.log(r)
  46.     //小球球心着落的随机点坐标是（r，50）
  47.     //小球球心坐标（x，y）
  48.     let x = 600, y = 400
  49.     //计算x和y之间运动距离的倍数关系
  50.     let x_y = (x - r) / (y - 50)
  51.     let dy = 1//表示 单位时间 内沿着y轴向上运动1
  52.     let dx = x_y * dy//表示 单位时间 沿着x轴的位移
  53.  
  54.     //获取小球的dom对象
  55.     let ball = document.getElementById('ball')
  56.     let kuai = document.getElementById('kuai')
  57.     let x1 = 0
  58.     let a = 30
  59.  
  60.  
  61.     //点击父元素任意位置，开始游戏
  62.     function startgame() {
  63.         setInterval(() => {
  64.             //上下碰撞
  65.             if (y <= 50) {
  66.                 dy = -dy
  67.  
  68.             }
  69.             if (y >= 750 && x1 < x && x < x1 + 400) {
  70.                 console.log(x)
  71.                 console.log(x1)
  72.                 dy = -dy
  73.             }
  74.             //左右碰撞
  75.             if (x <= 50 || x >= 1150) {
  76.                 dx = -dx
  77.             }
  78.             //把单位时间的位移作用在坐标上
  79.             x += dx
  80.             y += dy
  81.             //把坐标作用在实际的定位上
  82.             ball.style.left = x - 50 + 'px'
  83.             ball.style.top = y - 50 + 'px'
  84.         }, 1)
  85.     }
  86.     document.onkeydown = function (e) {
  87.         switch (e.keyCode) {
  88.             //左
  89.             case 37:
  90.                 x1 -= a
  91.                 kuai.style.left = x1 + 'px'
  92.                 break
  93.             //右  
  94.             case 39:
  95.                 x1 += a
  96.                 kuai.style.left = x1 + 'px'
  97.                 break
  98.         }
  99.     }
  100.  
  101. </script>
  102.  
  103. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/717626
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号