آموزش ساخت سخنان انگیزشی روزانه + ساعت و تاریخ با js

آموزش ساخت سخنان انگیزشی روزانه + ساعت و تاریخ با js

ساخت سخنان انگیزشی روزانه با js – برخی از وبسایت ها قصد دارند که سخنی از بزرگان یا افراد موفق را به صورت روزانه نمایش دهند .

در این آموزش قصد داریم علاوه بر نقل قول های روزانه ساعت و تاریخ را نمایش دهیم همچنین یک خلاقیت جالبی که به خرج خواهیم داد استفاده از آیکون روز یا شب در برنامه است که در زمان روشنایی بخش روز فعال و در زمانی که هوا تاریک است شب را نمایش می دهد .

صفحه اصلی برنامه index.html

قبل از هر کاری کتابخانه تبدیل تاریخ میلادی به شمسی farvardin.js را دانلود کرده و همانند زیر ضمیمه کنید .

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/main.css">
</head>
<body>
    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
        <div class="day-quote">
            <div class="dan-status">
                <img class="dan" id="day" src="static/img/dan-status.svg" alt="status">
                <div class="dan-cover"></div>
            </div>
            <div class="date-details">
                <div class="dt time"><strong>ساعت : </strong><span id="val">x1</span></div><br>
                <div class="dt date"><strong>تاریخ : </strong><span id="val">x2</span></div><br>
                <div class="dt quote"><strong>نقل قول : </strong><p id="val">x3</p><a id="val2" href="#">x4</a></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <script src="static/js/lib/farvardin.min.js"></script>
    <script src="static/js/app.js"></script>
</body>
</html>



فایل api-date.php جهت دریافت اطلاعات زمان و تاریخ

<?php
header("Content-Type: application/json");

date_default_timezone_set("Asia/Tehran");
$timestamp = time();
$latitude = 35.69;
$longitude = 51.42;

$date_details = date_sun_info($timestamp , $latitude ,$longitude );
$sunrise_ts = $date_details['sunrise'];
$sunset_ts = $date_details['sunset'];
$statusDay = "night";

if($sunrise_ts <= $timestamp && $timestamp < $sunset_ts) $statusDay = "day";

$dateJsonList = [
    "timestamp" => $timestamp,
    "date" => date("Y-m-d"),
    "time" => date("H:i:s"),
    "statusDay" => $statusDay
];

die(json_encode($dateJsonList));

?>



فایل main.css

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

.clearfix , .clearfix::after , .clearfix::before{
    content: "";
    clear: both;
}

.day-quote{
    padding: 5px;
    background-color: mediumspringgreen;
    color: #000;
    border-radius: 0 0 14px 39px;
}

.dan-status{
    width: 150px;
    height: 150px;
    overflow: hidden;
    float: right;
    position: relative;
}

.dan-status .dan{
    width: 100%;
    transition: 0.3s all;
}

.dan-status .dan#day{
    transform: rotate(0deg);
}

.dan-status .dan#night{
    transform: rotate(180deg);
}



.dan-status .dan-cover{
    position: absolute;
    top: 41%;
    width: 100%;
    height: 53%;
    background-color: #8bc34a6b;
    border-radius: 0 0 100px 100px;
}

.date-details{
    padding: 40px 15px;
}

.dt{
    display: inline-block;
}

.dt.quote{
    margin-top: 15px;
}

.dt.date span{
    float: left;
}

.dt.quote p{
    display: block;
    margin: 10px 0 0 0 !important;
}

.dt.quote a{
    float: left;
    text-decoration: none;
    background-color: #ff9800;
    color: black;
    border: none;
    padding: 5px;
    font-weight: bold;
    border-radius: 8px;
    margin-top: 15px;
}


فایل app.js

در کد زیر به 2 تا از endpoint ها درخواست مان را می فرستیم :
1- همان فایل api-date.php است
2- آدرس https://api.rapidcode.ir/quote/ که نقل قول ها را دریافت می کنیم .

const randomInt = Math.floor(Math.random() * 100) + 1;
const quoteURL = "https://api.rapidcode.ir/quote/";
const dateURL = location.href + "api-date.php";
let secondsInterval = null;
let timestamp = 0;
let timeCheckSeconds = 0; 
let everySecondsApiCheck = 10;

funcSendGetData(quoteURL , {"lid" : randomInt} , function(res){
    if(res.status == 1){
        const data = res.content;
        document.querySelector(".dt.quote #val").textContent = data.Quote;
        document.querySelector(".dt.quote #val2").textContent = data.Author;
    }
});

funcSendGetData(dateURL , {} , funcDateUpdate);



function funcSendGetData(url, dataLists , customFunc) {

    const xhr = new XMLHttpRequest();
    xhr.responseType = "json";
    const queryString = new URLSearchParams;
    if (dataLists && typeof dataLists == "object") {
        for(const dataList in dataLists) queryString.append(dataList , dataLists[dataList]);
    } else dataLists = "";


    xhr.open("GET", url + "?" + queryString.toString());
    xhr.setRequestHeader("Content-Type" , "application/json");

    xhr.onreadystatechange = function (e) {

        if (this.status === 200 && this.readyState == this.DONE) {

            const res = this.response;
            customFunc(res);

        } else if (this.status < 200 && this.readyState == this.DONE) {
            window.alert("خطای شبکه");
            console.error("ERR");
        }
    }

    xhr.send();

}

function funcDateUpdate(res){
    
    document.querySelector(".dt.time #val").textContent = res.time;

        timestamp = res.timestamp;
        const date = new Date(timestamp * 1000);
        document.querySelector(".dt.date #val").textContent = farvardin.gregorianToSolar(date.getFullYear() , (date.getMonth() + 1) , (date.getDay()+1) , "string")
        document.querySelector(".dan").id = res.statusDay;
        
        clearInterval(secondsInterval);

        secondsInterval = setInterval(function(){
            
            if(everySecondsApiCheck<=timeCheckSeconds){
                timeCheckSeconds = 0;
                funcSendGetData(dateURL , {} , funcDateUpdate);
            }

            timestamp++;
            const miliSeconds = timestamp * 1000;
            const date = new Date(miliSeconds);
            const Hours = (date.getHours() < 10 ? "0" : "") + date.getHours();
            const Minutes = (date.getMinutes() < 10 ? "0" : "") + date.getMinutes();
            const seconds = (date.getSeconds() < 10 ? "0" : "") + date.getSeconds();
            document.querySelector(".dt.time #val").textContent = Hours + ":" + Minutes + ":" + seconds;
            timeCheckSeconds++;
        } , 1000)
}


خروجی برنامه نقل قول روزانه

آموزش ساخت سخنان انگیزشی روزانه + ساعت و تاریخ با js

دانلود برنامه نقل قول روزانه

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us

انجام انواع پروژه های وب


( فروشگاهی ، خبری ، رزرواسیون ، وردپرس ، حل مشکلات وردپرسی )

شماره تماس و واتساپ : 09398554859