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





تبلیغات
تبلیغات تبلیغات

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

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

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

 

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

 

<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″ به دلخواه تغییر بدید

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
ثبت نام در بروکر فارکس با قابلیت واریز و برداشت به صورت ریالی کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 1 تقویم و زمان , جی کوئری
لینک کوتاه مطلب : https://www.20script.ir/?p=32052
کلمات کلیدی پست :
مطالب مرتبط
9,824دانلود نرم افزار ساخت اسلایدر جی کوئری Amazing Slider تاریخ : 2018/04/2
7,081دکمه مستطیل شبکه های اجتماعی، PSD + HTML / CSS / جی کوئری تاریخ : 2013/11/27
7,912پلاگین جی کوئری صفحه بندی برای بوت استرپ تاریخ : 2014/02/9
11,443ساخت تابلو اعلانات با کمک جی کوئری تاریخ : 2014/08/12
30,736شطرنجی کردن عکس به صورت جی کوئری تاریخ : 2014/02/9
11,950اسکریپت جی کوئری جستجوگر سریع صفحات هلمز تاریخ : 2017/10/30
8,512تبدیل تصاویر به صورت یک نقشه با MobilyMap تاریخ : 2019/11/8
15,649اسلاید بندی تصاویر پس زمینه وبسایت با استفاده از backstretch تاریخ : 2014/07/20
7,084افکت زیبا بر روی تصاویر به صورت جی کوئری تاریخ : 2014/01/17
6,135افکت به تصاویر با استفاده از اسکریپت Picanim تاریخ : 2014/07/27
6,614روبان بسیار زیبای متحرک به صورت جی کوئری تاریخ : 2014/03/28
8,994فهرست آبشاری با بهره گیری از جی کوئری تاریخ : 2014/07/29
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
شرکت سئو سایت
شرکت سئو سایت
تبلیغات
تبلیغات
تبلیغات