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

طراحی قالب, کد های آماده آخرین بروزرسانی : ۲۱ بهمن ۱۳۹۸

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

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

حتما بخوانید:

آموزش رفع خطای کمبود رم Allowed memory size در وردپرس

مشاهده مقاله

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

ساخت شمارنده زیبا با 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.5/5 - (8 امتیاز)

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

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

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

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

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

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

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