MiniLab - Technology is life
Would you like to react to this message? Create an account in a few clicks or log in to continue.
MiniLab - Technology is life

Browse through category and boards, add friends, get helps, shout whats on your mind, send personal messages and mails, and much more in MiniLab


জাভাস্ক্রিপট ডেইট টাইম কোড

MiniLab - Technology is life :: Development :: Web Development
Go down
Admin
Admin
Admin
Posts : 24
Join date : 2018-05-15
https://minilab.forumotion.com
+

জাভাস্ক্রিপট ডেইট টাইম কোড Empty জাভাস্ক্রিপট ডেইট টাইম কোড

Mon May 21, 2018 12:56 pm
কোডঃ 




এইচটিএমএলঃ

<div id="clock">
    <p class="date">{{ date }}</p>
    <p class="time">{{ time }}</p>
</div>
সিএসএসঃ 
html,body {
    height: 100%;
}
body {
    background: #0f3854;
    background: radial-gradient(ellipse at center,  #0a2e38  0%, #000000 70%);
    background-size: 100%;
}
p {
    margin: 0;
    padding: 0;
}
#clock {
    font-family: 'Share Tech Mono', monospace;
    color: #ffffff;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #daf6ff;
    text-shadow: 0 0 20px rgba(10, 175, 230, 1),  0 0 20px rgba(10, 175, 230, 0);
    .time {
        letter-spacing: 0.05em;
        font-size: 80px;
        padding: 5px 0;
    }
    .date {
        letter-spacing: 0.1em;
        font-size: 24px;
    }
    .text {
        letter-spacing: 0.1em;
        font-size: 12px;
        padding: 20px 0 0;
    }
}
জাভাস্ক্রিপ্টঃ

var clock = new Vue({
    el: '#clock',
    data: {
        time: '',
        date: ''
    }
});

var week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
    var cd = new Date();
    clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
    clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
};

function zeroPadding(num, digit) {
    var zero = '';
    for(var i = 0; i < digit; i++) {
        zero += '0';
    }
    return (zero + num).slice(-digit);
}
রান করুন এখানেঃ 

JS Fiddle (Click to run)

সোর্সঃ কোডপেন
কপিরাইটঃ Toshiyuki TAKAHASHI
মিনিল্যাব এই কোডের অধীকারি নয়, এবং এই কোডের লেখক নয়।
Back to top
Permissions in this forum:
You cannot reply to topics in this forum