ساخت شمارنده زیبا با css و html به همراه ویدیو

طراحی قالب, کد های آماده
افزونه افزایش سرعت وردپرس
این مطلب رو حتما بخون:
افزونه افزایش سرعت وردپرس WP Fastest Cache
مشاهده مطلب

سلام دوستان خسته نباشید امیدوارم حالتون خوب باشه امروز یه شمارنده با طراحی حرفه ای ساختیم  که به همراه سورس کد و ویدیو  بهتون معرفی میکنیم! باشد که مورد پسندتون واقع بشه!

در ادامه میتونید سورس کد رو ببینید و تو سایت خودتون استفاده کنید. 😉

عزیزان به دلیل این که روی طراحیش خیلی کار شده و هیچ کس راضی به دود شدن زحماتش نیست، اشتفاده شخصی از کد ها کاملا آزاده اما کپی برداری از طرح از لحاظ قانونی و معنوی مجاز نیست! (بعد کسی نگه نگفتم)

ساخت شمارنده زیبا با css و html به همراه ویدیو

از این شمارنده برای سایت های فروشگاهی در قسمت افزایش تعداد محصولات سبد خرید یا سایت هایی که کاربر باید تعداد مشخصی را وارد کند استفاده میشود!

کد های html شمارنده:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>React Counter Example</title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Teko:300,400,500,600,700'>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Teko:300,400,500,600,700'>
  <link href="https://fonts.googleapis.com/css?family=Markazi+Text" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app"></div>
<a target="_blank" href="https://almasweb.org"><small>www.almasweb.org</small></a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js'></script>
<script  src="js/index.js"></script>
</body>
</html>

کد های Css شمارنده:

/*www.almasweb.org*/
*{
  font-family: 'Markazi Text', serif !important;
  direction: rtl;
}
body {
  font-family: 'Markazi Text', serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 2em;
  box-sizing: border-box;
  background: #833ab4; 
  background: -webkit-linear-gradient(to right, #20002c, #8b5b9e);
  background: linear-gradient(to right, #20002c, #8b5b9e);
  color: #fff;
}
html {
  box-sizing: border-box;
  height: 100%;
}
small {
    margin-top: 20px;
    display: block;
    color: #ffffff6b;
}
h1 {
  color: #fff;
  text-shadow: 2px 2px 2px rgb(0, 0, 0, 0.6);
  text-align: center;
  margin-bottom: 0;
  font-size: 2em;
  line-height: 1.3em;
  font-weight: bold;
  margin-top: 0.67em;
}
button {
   font-family: 'Teko';
   margin-right: 15px;
   padding: 10px 25px;
   color: #fff;
   background: #2980B9;
   font-size: .9em;
   line-height: 1;
   border: 0;
   outline: 0;
   border-radius: 3px;
   cursor: pointer;
   text-align: center;
   box-shadow: 0 5px 5px -5px #333;
   transition: background 0.3s ease-in;
}
button:hover {
  background: #499fd8;
}
p {
  text-shadow: 2px 2px 2px rgb(0, 0, 0, 0.6);
  font-weight: bold;
  margin: 0 0 15px 0;
  font-size: 2em;
  line-height: 1;
}
/*www.almasweb.org*/

کد های javascript شمارنده:

function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}class Counter extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "state",
    { count: 0 });_defineProperty(this, "increment",
    () => this.setState({ count: this.state.count + 1 }));_defineProperty(this, "decrement",
    () => this.state.count > 0 && this.setState({ count: this.state.count - 1 }));_defineProperty(this, "reset",
    () => this.state.count !== 0 && this.setState({ count: 0 }));}
  render() {
    return (
      React.createElement("div", null,
      React.createElement("h1", null, "کلیک کنید !"),
      React.createElement("p", null, this.state.count),
      React.createElement("div", null,
      React.createElement("button", { onClick: this.increment }, "+"),
      React.createElement("button", { onClick: this.decrement }, "-"),
      React.createElement("button", { onClick: this.reset }, "ریست")),
      React.createElement("small", null, "")));
  }}
;
ReactDOM.render(React.createElement(Counter, null), document.getElementById('app'));

ویدئوی پیشنمایش کدها:

دانلود تمامی کد ها شمارنده:

دانلود کدها

در صورتی که در استفاده از کد ها مشکل دارید در قسمت نظرات و یا فرم تماس با ما مطرح کنید تا خودم یا دوستان به اون پاسخ بدیم! فراموش نکنید که مشکل شما مشکل خیلی از افراد هم هست پس تجربه خودتونو با این شمارنده به اشتراک بزارید تا بقیه هم استفاده کنند! تشکر

4.4/5 - (7 امتیاز)

مهدی ایبک ابادی

مهدی ایبک آبادی هستم ، موسس و بنیانگذار الماس وب، متخصص دنیای طراحی سایت و علاقه مند به وردپرس. 10 سال در حوزه برنامه نویسی و 6 سال به طور جدی در حوزه طراحی وبسایت فعالیت دارم.

2 پاسخ به “ساخت شمارنده زیبا با css و html به همراه ویدیو”

  1. ایمان ارشدی پور گفت:

    سلام خسته نباشید واقعا عالی بود
    اگر امکان داشته باشه این کد هم بهش اضافه کنید که اگر مثلا شمارش ها به ۵۰ رسید یک صفحه جدید باز بشه
    اگه این امکان رو بزارید براش واقعا عالی میشه
    ممنون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *