تبدیل تاریخ میلادی به شمسی با جاوا اسکریپت

4.2

خانه » طراحی وب » تبدیل تاریخ میلادی به شمسی با جاوا اسکریپت

در این مقاله آموزشی با پروژه تبدیل تاریخ میلادی به شمسی با جاوا اسکریپت و کدهای html و Css همراه شما هستیم. برای تبدیل تاریخ شمسی به میلادی و برعکس از یک تابع از قبل طراحی شده توسط یک شخص (یا تیم) استفاده کردم که لینک دانلود تابع رو براتون در انتهای مطلب قرار دادیم.

خروجی پروژه تبدیل تاریخ میلادی به شمسی با جاوا اسکریپت ما به صورت زیر خواهد بود :

کدهای html

<!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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/c0154ef072.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="container">
<div id="calendar">
<div id="top-side-text">
تبدیل تاریخ میلادی به شمسی
</div>
<div id="input-container">
<input type="date" name="" id="input-date" value="">
</div>
<div id="reverse-container">
<i class="fa-solid fa-clock-rotate-left"></i>
</div> 
<div id="input-container">
<input type="button" name="" id="convert-output" value="تبدیل کن">
</div>
<div id="time-output">
<span>20</span>
<span>5</span>
<span>2020</span>
</div>
</div>
</div>
</body>
</html>
<script src = "apss.js"></script>

✅ نکته : یک دکمه برای معکوس کردن این فرایند ساختم که دیگه چونکه پروژه خودش خیلی طولانی بود بیخیالش شدم ولی شما میتونید برای تمرین خودتون کاملش کنید.

خط مربوط به آیکن این هست :

<i class="fa-solid fa-clock-rotate-left"></i>

کدهای Css

body{
background-color: #001b3a;
}
#container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
place-items: center;
}
#calendar {
position:relative;
left: 0;
top: 0;
width: 800px;
height: 600px;
background-color: #011124;
border-radius: 15px;
border: 1px solid white;
}
#top-side-text {
position:absolute;
left: 0;
top: 0;
width:100%;
height: 60px;
background-color:rgb(187, 57, 10);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
display:flex;
place-items: center;
justify-content: center;
font-family: font;
font-size: 24px;
color:white;
border-bottom: 1px solid rgb(255, 255, 255);
}
#input-container {
position:relative;
top: 60px;
left: 0;
width:100%;
height: 120px;
display:flex;
place-items: center;
justify-content: center;
}
#input-container input[type=date]{
width: 50%;
height: 40%;
border-radius: 10px;
font-family: font;
font-size: 18px;
border:2px solid rgb(255, 255, 255);
color:white;
text-align: center;
background-color:#044c9e ;
}
#reverse-container {
position:relative;
top: 60px;
left: 0;
width:100%;
height: 50px;
display:flex;
place-items: center;
justify-content: center;
margin-top: 30px;
}
#input-container input[type=button]{
width: 40%;
height: 40%;
border-radius : 10px;
font-family: font;
font-size: 18px;
background-color:rgb(165, 48, 6);
border: 1px solid white;
color:white;
cursor: pointer;
transition: 500ms;
}
#input-container input[type=button]:hover {
width: 50%;
background-color:red;
}
#reverse-container i {
font-size: 40px;
color:white;
transition: 500ms;
cursor:pointer;
}
#reverse-container i:hover {
color:red;
}
#time-output {
position:relative;
left: 0;
width:100%;
height: 50px;
margin-top: 90px;
display:flex;
justify-content: center;
place-items: center;
gap: 40px;
}
#time-output span {
font-size: 18px;
color:white;
opacity: 0;
}
@keyframes fade-up {
from {
opacity: 0;
transform: translateY(60px);
}
to{
opacity: 1;
transform: translateY(0px);
}
}
@keyframes fade-down {
from {
opacity: 0;
transform: translateY(-60px);
}
to{
opacity: 1;
transform: translateY(0px);
}
}
@font-face {
font-family: font;
src: url(../B\ Koodak\ Bold_0.ttf);
}

کدهای جاوا اسکریپت

رایج ترین روشی که برای تبدیل تاریخ استفاده می شود، تابع () new Date است. () new Date آرگومان ها را به اشکال مختلفی که در کد آورده شده است می گیرد و یک تاریخ را برمی گرداند.

var now = new Date();
var hour = now.getMonth();
var convert_btn = document.getElementById("convert-output")
var input_date = document.getElementById("input-date")
convert_btn.addEventListener("click", function (){
var input = input_date.value.split("-")
var outputSpan = document.querySelectorAll("#time-output span");
result = gregorian_to_jalali(parseInt(input[0]), parseInt(input[1]), parseInt(input[2]))
delay = 0;
for (let index = 0; index < outputSpan.length; index++) {
outputSpan[index].innerText = result[index]
outputSpan[index].style.animation = "fade-up 1s 1 forwards";
outputSpan[index].style.animationDelay = delay+"s";
delay+= 1;
}
});
function gregorian_to_jalali(gy, gm, gd) {
var g_d_m, jy, jm, jd, gy2, days;
g_d_m = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
gy2 = (gm > 2) ? (gy + 1) : gy;
days = 355666 + (365 * gy) + ~~((gy2 + 3) / 4) - ~~((gy2 + 99) / 100) + ~~((gy2 + 399) / 400) + gd + g_d_m[gm - 1];
jy = -1595 + (33 * ~~(days / 12053));
days %= 12053;
jy += 4 * ~~(days / 1461);
days %= 1461;
if (days > 365) {
jy += ~~((days - 1) / 365);
days = (days - 1) % 365;
}
if (days < 186) {
jm = 1 + ~~(days / 31);
jd = 1 + (days % 31);
} else {
jm = 7 + ~~((days - 186) / 30);
jd = 1 + ((days - 186) % 30);
}
return [jy, jm, jd];
}

دانلود سورس کد پروژه

امیدواریم این مقاله برای شما مفید قرار گرفته شده باشد. در صورتی که سوالی در این رابطه دارید ، از بخش نظرات پایین مطلب با ما به اشتراک بگذارید. همچنین مقاله بعدی ما با عنوان ساخت تقویم با html ، css و جاوا اسکریپت را از دست ندهید.

تبدیل تاریخ میلادی به شمسی با جاوا اسکریپت

کدهای html

کدهای Css

کدهای جاوا اسکریپت

مطالب مرتبط

راهنمای پرکاربرد اصطلاحات طراحی سایت (مبتدی تا پیشرفته)

پشتیبان‌گیری در هاست وردپرس چگونه است؟

نقش اپراتور پشتیبانی هاستینگ در رضایتمندی مشتریان هاست و سرور

ده نکته مهم برای بالا بردن امنیت سایت های وردپرس

چگونه با مهارت‌های وردپرس، اکسل و فتوشاپ یک وبسایت بی‌نقص بسازیم

معرفی ۳۰ ابزار مهم در طراحی وب سایت که باید بشناسید

قالب‌ وودمارت چیست (بررسی ۰ تا ۱۰۰ ویژگی، مزیت و امکانات)

بهترین ترفندهای کانوا برای طراحی چیست؟

هاست برای سئو بهتر است یا سرور مجازی؟

دیدگاه ها

لغو پاسخ