活学活用：实现几个JS小案例-CSDN博客

本文链接：https://blog.csdn.net/m0_65517946/article/details/131563508

一、心动的感觉

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>心动</title>
  <style>
    /* 定义一个动画 */
    @keyframes jump{
      from{
        transform: scale(0.5);
        opacity: 0.5;
      }to{
        transform: scale(2);
        opacity: 1;
      }
    }
    /* 定义一个iou旋转动画 */
    @keyframes circles{
      from{
        transform: rotate(0deg);
        z-index: 1;
      }to{
        transform: rotate(360deg);
        z-index: -1;
      }
    }
    .f{
      width: 170px;
      height: 160px;
      /* border: 1px solid rebeccapurple; */
      position: relative;
      left: 200px;
      top: 200px;
      /* 给父元素绑定动画 */
      /* animation: jump 1s ease alternate infinite; */
    }
    .m{
      animation: jump 1s ease alternate infinite;
    }
    .f>div{
      position: absolute;
    }
    /* 两个圆 */
    .z1,.z2{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: hotpink;
    }
    .z2{
      left: 70px;
    }
    .z3{
      width: 100px;
      height: 100px;
      background-color: hotpink;
      left: 35px;
      top: 35px;
      transform: rotate(45deg);
    }
    .z4{
      top: 50px;
      left: 50px;
      font-size: large;
      color: aliceblue;
      z-index: -1;
    }
    .z4c{
      animation: circles 2s linear 1s infinite;
    }
    button{
      width: 80px;
      height: 40px;
      background-color: plum;
      border: none;
      color: white;
      font-size: large;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 8px 5px gainsboro;
      margin-left: 20px;
    }
    button:active{
      transform: translate(5px,5px);
    }
  </style>
</head>
<body>
  <button onclick="start1()">开始</button>
  <button onclick="stop1()">停止</button>
  <div id="divF" class="f">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
    <div id="z4" class="z4">I LOVE U</div>
  </div>
</body>
<script>
  //获取
  let divF=document.getElementById('divF')
  let z4=document.getElementById('z4')
  function start1(){
    //设值
    divF.className='f m'
    z4.className='z4 z4c'
  }
  function stop1(){
    //设值
    divF.className='f'
    z4.className='z4'
  }
</script>
</html>

静态效果如下：

二、走马灯

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>走马灯</title>
  <style>
    .f{
      width: 800px;
      height: 100px;
      border-top: 1px solid lightcoral;
    }
    .f>div{
      width: 60px;
      height: 40px;
      background-color: white;
      border-radius: 50%;
      float: left;
      margin-left: 20px;
    } 
    @keyframes changeColor{
      0%{
        background-color: aqua;
      }20%{
        background-color: aquamarine;
      }40%{
        background-color: bisque;
      }60%{
        background-color: lightcyan
      }80%{
        background-color: fuchsia;
      }100%{
        background-color: pink;
      }
    }
    .f>div:nth-child(1){
      animation: changeColor 3s ease 0s infinite;
    }
    .f>div:nth-child(2){
      animation: changeColor 3s ease 1s infinite;
    }
    .f>div:nth-child(3){
      animation: changeColor 3s ease 2s infinite;
    }
    .f>div:nth-child(4){
      animation: changeColor 3s ease 3s infinite;
    }
    .f>div:nth-child(5){
      animation: changeColor 3s ease 4s infinite;
    }
    .f>div:nth-child(6){
      animation: changeColor 3s ease 5s infinite;
    }
    .f>div:nth-child(7){
      animation: changeColor 3s ease 6s infinite;
    }
    .f>div:nth-child(8){
      animation: changeColor 3s ease 7s infinite;
    }
    .f>div:nth-child(9){
      animation: changeColor 3s ease 8s infinite;
    }
    .f>div:nth-child(10){
      animation: changeColor 3s ease 9s infinite;
    }
  </style>
</head>
<body id="body">
  <div class="f">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
<script>
  //获取
  let body=document.getElementById('body')
  let s=''
  for(let i=0;i<10;i++){
    s+=`<div class="f">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>`
  }
  body.innerHTML=s
</script>
</html>

静态效果如下：

三、圆周运动

代码如下：

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

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .r1 {
      width: 500px;
      height: 500px;
      position: relative;
      border: 1px solid red;
      border-radius: 50%;
    }

    .r1>div {
      position: absolute;
    }

    .r2 {
      width: 300px;
      height: 300px;
      border: 1px solid blue;
      border-radius: 50%;
      top: 100px;
      left: 100px;
    }

    #b1 {
      width: 100px;
      height: 100px;
      background-color: aqua;
      border-radius: 50%;
      top: 200px;
      left: 100px;
    }

    #b2 {
      width: 100px;
      height: 100px;
      background-color: #80bdff;
      border-radius: 50%;
      top: 200px;
    }

    .r3 {
      width: 100px;
      height: 100px;
      border: 1px solid green;
      border-radius: 50%;
      top: 200px;
      left: 200px;
    }

    button {
      width: 80px;
      height: 40px;
      background-color: cornsilk;
      border: none;
      color: salmon;
      font-size: large;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 8px 5px gainsboro;
      margin-left: 20px;
    }
  </style>
</head>

<body>
  <div class="r1">
    <!-- 圆 -->
    <div id="b1"></div>
    <div id="b2"></div>
    <!-- 轨道 -->
    <div class="r2"></div>
    <div class="r3"></div>
  </div>
  <button onclick="go()">开始</button>
</body>
<script>
  //圆1，圆2半径及圆周运动的圆心
  let r = 200, r1 = 100, x0 = 200, y0 = 200
  let x = 0, x1 = 100, y, y1, a = 1, a1 = 1
  let b2 = document.getElementById("b2")
  let b1 = document.getElementById("b1")
  go = () => {
    setInterval(() => {
      x += a
      //圆1x取值范围
      if (x >= 400 || x <= 0) {
        a *= -1
      }
      //逆时针运动
      if (a > 0) {
        //圆标准方程求出y
        y = y0 + Math.sqrt(Math.pow(r, 2) - Math.pow(x - x0, 2))
      } else {
        y = y0 - Math.sqrt(Math.pow(r, 2) - Math.pow(x - x0, 2))
      }
      b2.style.top = y + "px"
      b2.style.left = x + "px"
    }, 10)
    setInterval(() => {
      x1 += a1
      //圆2x取值范围
      if (x1 >= 300 || x1 <= 100) {
        a1 *= -1
      }
      //顺时针运动
      if (a1 > 0) {
        y1 = y0 - Math.sqrt(Math.pow(r1, 2) - Math.pow(x1 - x0, 2))
      } else {
        y1 = y0 + Math.sqrt(Math.pow(r1, 2) - Math.pow(x1 - x0, 2))
      }
      b1.style.top = y1 + "px"
      b1.style.left = x1 + "px"
    }, 10)
  }
</script>

</html>

静态效果如下：

四、曲线运动(sin函数图像)

代码如下：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>曲线运动(sin)</title>
	<!--给小球设置样式-->
	<style>
		#ball {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-color: deepskyblue;
			position: fixed;
			left: 0px;
			top: 300px;
		}
	</style>
</head>

<body>
	<div id="ball"></div>
	<script>
		//获得元素
		var oBall = document.getElementById('ball');
		var x = 0;
		var startY = 300;
		var y = 0;
		setInterval(function () {
			x++;
			y = startY - Math.sin(x * 2 * Math.PI / 360) * 200;
			oBall.style.left = x + "px";
			oBall.style.top = y + "px";
		}, 1000 / 60)
	</script>
</body>

</html>

小结：

学习JS案例是提高编程技能和理解JS概念的有效方式。通过实际案例，可以将理论知识应用到实际问题中，加深对语言特性和功能的理解。案例可以涉及各种应用领域，如网页交互、数据处理、动画效果等。通过编写和分析案例，可以学习到JS的基本语法、DOM操作、事件处理、异步编程等技术。同时，案例也可以帮助培养解决问题的能力和编程思维。总之，学习JS案例是一种锻炼和巩固编程技能的有效方法，可以提升对JS的掌握程度并拓展应用能力。