🔥 با کمک هوش مصنوعی در کمتر از 6 ماه فول‌استک شوید ...
۰ ثانیه
۰ دقیقه
۰ ساعت
۲ پرشه رسولی
شمارش data-count
جامعه Html & CSS ایجاد شده در ۰۵ مرداد ۱۴۰۱

سلام وقت بخیراولین data-count=200 قرار دادم و موقع اجرا کردن بقیه رو هم فقط تا 200 میشماره.

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>Documenttitle>

    <link

      rel="stylesheet"

      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"

    />

    <style>

      * {

        padding: 0;

        margin: 0;

        box-sizing: border-box;

      }

      body {

        background-color: lavender;

      }

      h2 {

        top: 20%;

        left: 50%;

        transform: translate(-50%, -50%);

        position: absolute;

      }

      .container-fluid {

        width: 80vw;

      }

      .container {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        display: flex;

      }

      .wrapper {

        height: 20vh;

        width: 25vw;

        margin: 10px;

        background-color: rgb(206, 206, 231);

        border-radius: 30px;

        text-align: center;

        position: relative;

      }

      .wrapper i {

        font-size: 30px;

        padding-top: 5%;

      }

      .wrapper .counter {

        position: absolute;

        bottom: 5%;

        left: 50%;

        transform: translate(-50%, -50%);

      }

    style>

  head>

  <body>

    <h2>Third projecth2>

    <div class="container-fluid">

      <div class="container">

        <div class="wrapper">

          <i class="fa-solid fa-user-graduate">i>

          <div class="counter" data-count="200">0div>

        div>

        <div class="wrapper">

          <i class="fa-solid fa-gift">i>

          <div class="counter" data-count="500">0div>

        div>

        <div class="wrapper">

          <i class="fa-solid fa-clapperboard">i>

          <div class="counter" data-count="1800">0div>

        div>

      div>

    div>


    <script

      src="https://code.jquery.com/jquery-3.6.0.min.js"

      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="

      crossorigin="anonymous"

    >script>

    <script>

      $(document).ready(function () {

        $(".counter").each(function () {

          var $this = $('.counter');

          var countTo = $this.attr('data-count');

          $({ countNum: $this.text() }).animate(

            {

              countNum:countTo,

            },


            {

              duration: 1800,

              easing: 'linear',

              step: function () {

                $this.text(Math.floor(this.countNum));

              },

             complete:function () {

                $this.text(this.countNum);

              }

            },

          );

        });

      });

    script>

  body>

html>


پرشه رسولی ۰۵ مرداد ۱۴۰۱، ۱۶:۰۵

درود

خط زیر باعث این موضوع میشه:

var $this = $('.counter');

برای اینکه براساس مقدار تعریف شده مجزا بشمره، کافیه به این صورت اصلاح کنید:

var $this = $(this);

درضمن ممنون میشم به دلیل مشکلات ادیتور فعلی، از این به بعد کدتون رو به صورت فایل پیوست یا درکدپن وارد کنید تا سریعتر بتونیم بررسی کنیم.

بهترین پاسخ
جواد رحمانیان ۰۶ مرداد ۱۴۰۱، ۱۶:۱۷