精华内容
下载资源
问答
  • html5已经出来好长时间了,但仍然有不多小伙伴们不太懂,下面小编就来用html5实现一个简单的钟表外观 #myCanvas{border:3px solid blue;} window.onload = function() { var mycanvas = document.getElementById(...

    html5已经出来好长时间了,但仍然有不多小伙伴们不太懂,下面小编就来用html5实现一个简单的钟表外观

    效果图

    20181027_5bd3f811ea3a8.png

    展开全文
  • 模版详情:
  • HTML5实现钟表

    2018-05-07 13:56:50
    使用HTML5的Canvas做的一个钟表小程序,可以作为入门学习!
  • HTML5制作简单的钟表

    2019-11-06 22:35:38
    HTML5制作简单的钟表
  • [html]* {margin: 0;padding: 0;}canvas {box-shadow: 0 0 10px 10px #cccccc;display: block;margin: 50px auto 0;}window.onload = function() {new canvasclock({canvas: document.getelementbyid(...

    终于没有兼容bug了 。。。

    [html]

    * {

    margin: 0;

    padding: 0;

    }

    canvas {

    box-shadow: 0 0 10px 10px #cccccc;

    display: block;

    margin: 50px auto 0;

    }

    window.onload = function() {

    new canvasclock({

    canvas: document.getelementbyid("canvas"),

    r: 100,

    h: [0, -30],

    m: [0, -60],

    s: [0, -90]

    })

    };

    function canvasclock(opts) {

    var self = this;

    self.r = opts.r;

    self.h = opts.h;

    self.m = opts.m;

    self.s = opts.s;

    self.pi = math.pi;

    self.canvas = opts.canvas;

    self.context = self.canvas.getcontext("2d");

    window.setinterval(function() {

    self.canvas.width = 0;

    self.canvas.height = 0;

    self.canvas.width = 400;

    self.canvas.height = 400;

    self.context.strokestyle = "rgba(255,0,0,0.1)";

    self.context.translate(self.r * 2, self.r * 2);

    self.createtime("m");

    self.createtime("h");

    self.createtime("s")

    },

    1000)

    };

    canvasclock.prototype = {

    createtime: function(str) {

    var self = this;

    var context = self.context;

    context.linewidth = 1;

    context.beginpath();

    context.arc(0, 0, self.r, 0, 2 * self.pi, true);

    context.stroke();

    context.closepath();

    var s = (new date()).getseconds();

    var m = (new date()).getminutes();

    var h = (new date()).gethours();

    if (str == "s") {

    var t = s * 6;

    var x = self.s[0];

    var y = self.s[1]

    } else if (str == "m") {

    var t = (m + s / 60) * 6;

    var x = self.m[0];

    var y = self.m[1]

    } else {

    var t = (h + m / 60) * 30;

    var x = self.h[0];

    var y = self.h[1]

    }

    context.linewidth = 10;

    context.linecap = "round";

    context.rotate(t * self.pi / 180);

    context.beginpath();

    context.moveto(0, 0);

    context.lineto(x, y);

    context.stroke();

    context.closepath()

    }

    }

    摘自 事与愿违

    展开全文
  • html5已经出来好长时间了,但仍然有不多小伙伴们不太懂,下面小编就来用html5实现一个简单的钟表外观#myCanvas{border:3px solid blue;}window.onload = function(){var mycanvas = document.getElementById(...

    html5已经出来好长时间了,但仍然有不多小伙伴们不太懂,下面小编就来用html5实现一个简单的钟表外观

    #myCanvas{border:3px solid blue;}

    window.onload = function()

    {

    var mycanvas = document.getElementById("myCanvas");

    var context = mycanvas.getContext("2d");

    context.lineWidth = 2;

    context.strokeStyle = "blue";

    context.fillStyle = "blue";

    context.arc(250,200,5,0,Math.PI*2,true);

    context.fill();

    context.beginPath();

    context.arc(250,200,150,0,Math.PI*2,true);

    context.stroke();

    context.translate(250,200);

    context.rotate(-Math.PI/2);

    context.save();

    for(var i=0;i<60;i )

    {

    if(i % 5 == 0)

    {

    context.fillRect(130,0,20,5);

    context.fillText((i/5 == 0?12:i/5),120,5);

    }

    else

    {

    context.fillRect(140,0,10,2)

    }

    context.rotate(Math.PI/30);//360°每6度旋转一次

    }

    context.fillRect(0,-2,90,3);

    context.stroke();

    }

    效果图

    a_35832

    展开全文
  • 自己封装的一个用HTML5+jQuery写的时钟表代码:超酷数码钟表//引用的是在线jquery地址,如果不行请自行下载切换(function($){$.fn.drawClock = function(options){var mainId = $(this);//设置默认参数var default...

    自己封装的一个用HTML5+jQuery写的时钟表

    代码:

    超酷数码钟表

    //引用的是在线jquery地址,如果不行请自行下载切换

    (function($){

    $.fn.drawClock = function(options){

    var mainId = $(this);

    //设置默认参数

    var defaultOptions = {

    'width': '300px',

    'height': '300px',

    'margin': '200px auto',

    'border': '1px solid #888',

    'border-radius': '50%',

    'box-shadow': '2px 2px 4px #111'

    };

    var options = $.extend(defaultOptions, options);

    mainId.css({

    'width': options.width,

    'height': options.height,

    'margin': options.margin,

    'border': options.border,

    'border-radius': options['border-radius'],

    'box-shadow': options['box-shadow'],

    'position': 'relative'

    }).css({

    'background': '-webkit-gradient(radial, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', 0, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', ' + mainId.width()/2 + ', from(#ffe), to(#eee))',

    'background': '-moz-radial-gradient(circle closest-side, #ffe 0%, #eee 100%)'

    });

    //钟表盘中心圆

    $("

    'width': '20px',

    'height': '20px',

    'border-radius': '50%',

    'box-shadow': '0 0 5px rgba(0,0,0,0.8)',

    'position': 'absolute',

    'z-index': 999,

    'background': '-webkit-gradient(radial, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', 0, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', ' + mainId.width()/2 + ', from(#ffe), to(#eee))',

    'background': '-moz-radial-gradient(circle, #eee 30%, #ffe 100%)'

    }).css({

    'left': mainId.width()/2 - $('#circle').width()/2,

    'top': mainId.height()/2 - $('#circle').height()/2

    });

    var dateTime = new Date();

    var oHours = dateTime.getHours();

    var oMinutes = dateTime.getMinutes();

    var oSeconds = dateTime.getSeconds();

    //初始化时分秒

    var hPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(3/6), 5, "#333", -90+oHours*30+oMinutes*6/12);

    var mPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(4/6), 4, "#666", -90+oMinutes*6);

    var sPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(5/6), 3, "#f00", -90+oSeconds*6);

    //运动时分秒

    var timer = setInterval(function(){

    dateTime = new Date();

    oHours = dateTime.getHours();

    oMinutes = dateTime.getMinutes();

    oSeconds = dateTime.getSeconds();

    hPointer.css({'transform': 'rotate(' + (-90+oHours*30+oMinutes*6/12) + 'deg)'});

    mPointer.css({'transform': 'rotate(' + (-90+oMinutes*6) + 'deg)'});

    sPointer.css({'transform': 'rotate(' + (-90+oSeconds*6) + 'deg)'});

    }, 1000);

    //绘制钟表刻度

    for(var i=0; i<60; i++){

    var width = 3, height = 6, oBcolor = '#111';

    if(i%5 == 0){

    width = 5;

    height = 10;

    }

    if(i%15 == 0){

    oBcolor = 'red';

    }

    $("

    'width': width,

    'height': height,

    'position': 'absolute',

    'top': 0,

    'left': mainId.width()/2,

    'background': oBcolor,

    'transform': 'rotate(' + i*6 + 'deg)',

    "transform-origin": "0 " + mainId.width()/2+'px'

    });

    }

    //绘制钟表指针

    function drawPointer (startx, starty, width, height, bcolor, angle) {

    var oPointer = $("

    oPointer.appendTo(mainId).css({

    'width': width,

    'height': height,

    'position': 'absolute',

    'top': starty,

    'left': startx,

    'background': bcolor,

    'transform': 'rotate(' + angle + 'deg)',

    'transform-origin': '0 0'

    });

    return oPointer;

    }

    return this;

    }

    })(jQuery);

    $(function(){

    $('#clock').drawClock();

    });

    演示图:

    96b1a61b4337e60ff68b731e279e0d23.png

    以上所述就是本文的全部内容了,希望大家能够喜欢。

    展开全文
  • 精致钟表交易商户网站html模板
  • js html5制作简易的时钟表代码 js html5制作简易的时钟表代码 js html5制作简易的时钟表代码
  • 特效描述:html5 canvas绘制 时钟表时间。用canvas精灵绘制器绘制的时钟代码结构1. 引入JS2. HTML代码var Sprite=function(name,painter,behaviors){if(name!==undefined) this.name=name;if(painter!==undefined) ...
  • html5 Canvas 钟表

    2017-01-11 16:20:13
    html5 canvas 画钟表例子,参考别人的例子,整理完成,有详细注释 参考:http://www.html5tricks.com/demo/html5-canvas-circle-clock/index.html   &lt;!DOCTYPE html&gt; &lt;html&gt; &...
  • HTML5+css3钟表网页特效

    2019-11-24 21:25:58
    HTML5+css3钟表网页特效
  • html5钟表网响应式自式应html模板源码
  • function init(){clock();setInterval(clock,1000);}function clock(){var now = new Date();var ctx = document.getElementById('canvas').getContext('2d');ctx.save();ctx.clearRect(0,0,150,150);...
  • 用canvas绘制了一个钟表,废话不多说了,直接上代码吧。效果图如下:canvas钟表body{margin:0;}如果你看到这段文字,说明你的浏览器弱爆了!window.onload=draw;function draw() {var canvas=document....
  • Html5 canvas 钟表

    2014-11-02 14:48:00
    Html5 canvas 钟表 原文:Html5 canvas 钟表看到有不少人用canvas写钟表,今天也来加入他们,自己实现个。 效果图: 实现代码如下: <html> <head> <title>...
  • HTML 钟表 小时钟

    2019-09-28 04:26:17
    该放假了,心情不好,写个小表针感慨一下时间为什么过得如此之快,写了个小钟表. 提示 1:这个钟表的秒针转的非常快,如果需要和当前的网络时间一样,请修改</script>上一行的代码,把1换成1000  2:无需素材.直接...
  • 宽屏钟表珠宝html5模板是一款黄色宽屏大气风格的手表官网网站模板。
  • 钟表

    2021-03-26 14:13:20
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>时钟</title> <...
  • html5 canvas绘制时钟表时间效果源码下载 html5 canvas绘制时钟表时间效果源码下载
  • HTML5 Canvas指针时钟表特效是一款简洁好看的圆形指针时钟特效下载。
  • JavaScript语言:JaveScriptBabelCoffeeScript确定var minutes = new Array("five1", "ten1", "quarter", "twenty", "half");var hours = new Array("one", "two", "three", "four", "five2", "six", "seven", ...
  • 利用html5,css实现钟摆效果 ,在项目中经常会遇到,今天小编把基于HTML5+CSS3实现简单的时钟效果的实现代码分享到脚本之家平台,需要的额朋友参考下吧目的:利用html5,css实现钟摆效果知识点:1) 利用position/...
  • html5圆形的钟表.rar

    2019-07-10 11:37:58
    html5圆形的钟表,经测试发现,不兼容IE11,其它低版本IE就更不说了。不过本效果在火狐和chrome下将是不错,打开后即生成一个圆形带指针的钟表样式,并且指针随系统时间一起走动,是学习HTML5的好范例。
  • HTML钟表的制作

    千次阅读 2018-08-01 22:48:16
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;  &...钟表&lt;/title&gt;  &lt;meta name="Keywords" content=""&gt;  &am
  • html5 canvas 开发 3D钟表
  • HTML编程计时器钟表

    2013-12-23 21:48:31
    计时器钟表,实时显示当前时间,通过网页显示,可通过记事本观看代码
  • Clockbody{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;background:#2e1f27;}p{color:#854d27;}code{color:#f4c950;}.clock{--clock-width:50vmin;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,859
精华内容 1,943
关键字:

钟表html