تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده


آخرین ارسال های تالار مشاهده انجمن
شمسی سازی Bookings for WooCommerce 0 پاسخ 41 بازدید Google Scholar 1 پاسخ 877 بازدید افزونه پرداخت با تتر 2 پاسخ 1035 بازدید درج اگهی تبلیغاتی چگونه است؟ 0 پاسخ 3 بازدید Open Journal Systems (OJS) 0 پاسخ 1706 بازدید ارز ووکامرس 2 پاسخ 1380 بازدید افزونه گرافیست 1 پاسخ 1281 بازدید آموزش تغییر استایل بخش مدیریت سفارشات 1 پاسخ 1822 بازدید خرابی قالب سایت اسکریپت ها 2 پاسخ 1763 بازدید لینک قالب کلینیک بهداشتی پزشکی Medizco برای وردپرس 1 پاسخ 1227 بازدید
تبلیغات
تبلیغات تبلیغات

کد ساعت بسیار زیبای جی کوئری

جی کوئری , تقویم و زمان

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

 

کد ساعت بسیار زیبای جی کوئری

 

<canvas id="canvas" width="350" height="350"></canvas>
<script class="cssdeck">
var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');
ctx.lineWidth = 23;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = '25px Trebuchet MS';
ctx.fillStyle = 'black';
 
/**
 * @closure
 */
var draw = (function () {
    var start = 1.5 * Math.PI; // Start circle from top
    var end = (2 * Math.PI) / 100; // One percent of circle
 
    /**
     * Draw percentage of a circle
     *
     * @param {number} r Radius
     * @param {number} p Percentage of circle
     * @param {string} c Stroke color
     * @return void
     */
    return function (r, p, c) {
        p = p || 100; // When time is '00' we show full circle
        ctx.strokeStyle = c;
        ctx.beginPath();
        ctx.arc(175, 175, r, start, p * end + start, false);
        ctx.stroke();
    };
}());
 
var clock = function () {
    requestAnimationFrame(clock);
 
    var date = new Date;
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();
    // Calculate percentage to be drawn
    var hp = 100 / 12 * (h % 12);
    var mp = 100 / 60 * m;
    var sp = 100 / 60 * s;
    // Ensure double digits
    h = h < 10 ? '0' + h : h;
    m = m < 10 ? '0' + m : m;
    s = s < 10 ? '0' + s : s;
 
    ctx.clearRect(0, 0, 350, 350);
    ctx.fillText(h + ':' + m + ':' + s, 175, 175);
    draw(75, hp, 'palevioletred');
    draw(100, mp, 'limegreen');
    draw(125, sp, 'steelblue');
};
 
clock()
 
</script>

 

اگر مایل به تغییر سایز ساعت بودید می توانید مقدار های آنهارا با تگ ها : width=”350″ height=”350″ به دلخواه تغییر بدید

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 1 جی کوئری , تقویم و زمان
لینک کوتاه مطلب : https://www.20script.ir/?p=32052
کلمات کلیدی پست :
مطالب مرتبط
12,310آموزش ایجاد افکت shake + جی کوئری تاریخ : 2014/07/21
13,034اسکریپت 9 سبک خاص آیکون های متحرک شبکه های اجتماعی تاریخ : 2016/07/12
7,691افکت به تصاویر با استفاده از اسکریپت Picanim تاریخ : 2014/07/27
19,122افزونه ساخت تب های حرفه ای در وردپرس CodeTabs تاریخ : 2017/12/17
10,490فهرست آبشاری با بهره گیری از جی کوئری تاریخ : 2014/07/29
9,416اسکریپت تب های پیوند دار تاریخ : 2014/08/4
7,384پلاگین سنجاق کردت تصاویر با جی کوئری تاریخ : 2016/02/20
17,742اسلایدر واکنش گرا و قابل برنامه ریزی به صورت جی کوئری تاریخ : 2014/09/17
8,435پلاگین جی کوئری برای تغییر رنگ صفحه تاریخ : 2016/02/20
8,683دانلود ویترین کشویی جی کوئری تاریخ : 2013/12/14
7,560اسکریپت بازی آنلاین تشخیص اشکال و حروف Symbols تاریخ : 2014/01/14
14,990ساخت گالری تصاویر کاملا واکنش گرا با جی کوئری تاریخ : 2014/11/9
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file
تبلیغات