با سلام
ساخت ویجت ساعت دیجیتال برای انجمن
ابتدا وارد کنترل پنل شده و به بخش شکل و ظاهر بروید و سپس ویجت هارو انتخاب کنید
گزینه ویجت جدید رو انتخاب کنید و روی html کلیک کنید
گزینه widget key رو به دلخواه انتخاب کنید
و عنوان رو به دلخواه بزنید مثل ساعت انجمن
مکان ویجت رو به سلیقه خودتون میتونید انتخاب کنید اما اگه از افزونه uix استفاده میکنید گزینه uix footer رو بزنید
کد های زیر رو در template وارد کنید
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Digital Clock Javascript | CodingNepal</title>
<link rel="stylesheet" href="extra.less">
</head>
<body>
<div class="clock">
<div class="display">
</div>
</div>
<script>
setInterval(function(){
const clock = document.querySelector(".display");
let time = new Date();
let sec = time.getSeconds();
let min = time.getMinutes();
let hr = time.getHours();
let day = 'AM';
if(hr > 12){
day = 'PM';
hr = hr - 12;
}
if(hr == 0){
hr = 12;
}
if(sec < 10){
sec = '0' + sec;
}
if(min < 10){
min = '0' + min;
}
if(hr < 10){
hr = '0' + hr;
}
clock.textContent = hr + ':' + min + ':' + sec + " " + day;
});
</script>
</body>
</html>
تیک حالت پیشرفته رو بردارید
و حالا به extra.lessبرید و کد های زیر رو وارد کنید
.clock{
background: #131419;
height: 100px;
line-height: 100px;
text-align: center;
padding: 0 25px;
box-shadow: -3px -3px 7px rgba(255,255,255,0.05),
3px 3px 5px rgba(0,0,0,0.5);
}
.clock .display{
font-size: 25px;
color: cyan;
letter-spacing: 5px;
font-family: 'Orbitron', sans-serif;
}
نمونه ویجت:
نام موضوع : ساخت ویجت ساعت دیجیتال | دسته : آموزش ها
این ویجت اولین بار در انجمن انجمن کافه نویسندگان طراحی شده است و هرگونه کپی برداری از آن با اسم انجمن دیگه ای ممنوع است
ساخت ویجت ساعت دیجیتال برای انجمن
ابتدا وارد کنترل پنل شده و به بخش شکل و ظاهر بروید و سپس ویجت هارو انتخاب کنید
گزینه ویجت جدید رو انتخاب کنید و روی html کلیک کنید
گزینه widget key رو به دلخواه انتخاب کنید
و عنوان رو به دلخواه بزنید مثل ساعت انجمن
مکان ویجت رو به سلیقه خودتون میتونید انتخاب کنید اما اگه از افزونه uix استفاده میکنید گزینه uix footer رو بزنید
کد های زیر رو در template وارد کنید
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Digital Clock Javascript | CodingNepal</title>
<link rel="stylesheet" href="extra.less">
</head>
<body>
<div class="clock">
<div class="display">
</div>
</div>
<script>
setInterval(function(){
const clock = document.querySelector(".display");
let time = new Date();
let sec = time.getSeconds();
let min = time.getMinutes();
let hr = time.getHours();
let day = 'AM';
if(hr > 12){
day = 'PM';
hr = hr - 12;
}
if(hr == 0){
hr = 12;
}
if(sec < 10){
sec = '0' + sec;
}
if(min < 10){
min = '0' + min;
}
if(hr < 10){
hr = '0' + hr;
}
clock.textContent = hr + ':' + min + ':' + sec + " " + day;
});
</script>
</body>
</html>
تیک حالت پیشرفته رو بردارید
و حالا به extra.lessبرید و کد های زیر رو وارد کنید
.clock{
background: #131419;
height: 100px;
line-height: 100px;
text-align: center;
padding: 0 25px;
box-shadow: -3px -3px 7px rgba(255,255,255,0.05),
3px 3px 5px rgba(0,0,0,0.5);
}
.clock .display{
font-size: 25px;
color: cyan;
letter-spacing: 5px;
font-family: 'Orbitron', sans-serif;
}
نمونه ویجت:
نام موضوع : ساخت ویجت ساعت دیجیتال | دسته : آموزش ها
این ویجت اولین بار در انجمن انجمن کافه نویسندگان طراحی شده است و هرگونه کپی برداری از آن با اسم انجمن دیگه ای ممنوع است