HTML5小时钟

 
  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    canvas{
        background: #eee;
    }
</style>
<script>
    window.onload=function(){
        var con=document.getElementById('con');
        var oCanvas=con.getContext("2d");
        var startX=200;
        var startY=200;
        var radius=100;
        

        setInterval(function(){
            oCanvas.clearRect(0, 0, 400, 400);
            // 阴影
            oCanvas.shadowColor="#888";
            oCanvas.shadowOffsetX=1;
            oCanvas.shadowOffsetY=1;
            oCanvas.shadowBlur=3;

            // 渐变
            var grd=oCanvas.createRadialGradient(startX, startY,1, startX, startY,100);
            grd.addColorStop(0, '#efefef');
            grd.addColorStop(1, "#cecece");
            oCanvas.fillStyle=grd;
            oCanvas.lineWidth=5;
            oCanvas.beginPath();
            oCanvas.strokeStyle="#a34";
            oCanvas.arc(startX, startY, radius, 0, 2*Math.PI);
            oCanvas.stroke();
            oCanvas.fill();

            // 去掉阴影
            oCanvas.shadowColor="#888";
            oCanvas.shadowOffsetX=0;
            oCanvas.shadowOffsetY=0;
            oCanvas.shadowBlur=0;

            // 画刻度
            dragMark();
            var myDate=new Date();
            var H=myDate.getHours()*30+myDate.getMinutes()/2-90;
            var M=myDate.getMinutes()*6-90;
            var S=myDate.getSeconds()*6-90;
            // 时针
            dragT("#000",4,55,H);
            // 分针
            dragT("#888",3,65,M);
            // 秒针
            dragT("#f10",2,80,S);
            // 画中心点
            oCanvas.beginPath();
            oCanvas.fillStyle="#ccc";
            oCanvas.arc(200, 200, 6, 0, 2*Math.PI);
            oCanvas.fill();
        }, 1000);

        

        

        
        
        function dragT(color,lw,radius,angle){
            oCanvas.beginPath();
            oCanvas.strokeStyle=color;
            oCanvas.lineWidth=lw;
            oCanvas.moveTo(startX, startY);
            oCanvas.lineTo(startX+radius*Math.cos(angle*Math.PI/180), startY+radius*Math.sin(angle*Math.PI/180));
            oCanvas.stroke();
        }

        function dragMark(){
            for(var i = 0; i < 60; i++) {
                var lw=2;
                var radius1=radius-5;
                var angle=i*6*Math.PI/180;
                oCanvas.strokeStyle="#888";
                if (i%5==0) {
                    radius1=radius-8;
                    lw=3;
                    oCanvas.strokeStyle="#666";
                };
                // if(i%15==0){
                //     var s=(i*6-90)*Math.PI/180;
                //     oCanvas.fillStyle="#000"
                //     oCanvas.fillText(i/5, startX+(radius-15)*Math.cos(s), startY+(radius-15)*Math.sin(s));
                // }
                oCanvas.lineWidth=lw;
                oCanvas.beginPath();
                oCanvas.moveTo(startX+radius*Math.cos(angle), startY+radius*Math.sin(angle));
                oCanvas.lineTo(startX+radius1*Math.cos(angle), startY+radius1*Math.sin(angle));
                oCanvas.stroke();
            };
            
        }
    }
</script>
</head>
<body>
    <canvas width="400" height="400" id="con"></canvas>
</body>
</html>
 
  

 

 

效果图~

转载于:https://www.cnblogs.com/JerryWang24/p/3974309.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
C语言是一种广泛使用的编程语言,它具有高效、灵活、可移植性强等特点,被广泛应用于操作系统、嵌入式系统、数据库、编译器等领域的开发。C语言的基本语法包括变量、数据类型、运算符、控制结构(如if语句、循环语句等)、函数、指针等。下面详细介绍C语言的基本概念和语法。 1. 变量和数据类型 在C语言中,变量用于存储数据,数据类型用于定义变量的类型和范围。C语言支持多种数据类型,包括基本数据类型(如int、float、char等)和复合数据类型(如结构体、联合等)。 2. 运算符 C语言中常用的运算符包括算术运算符(如+、、、/等)、关系运算符(如==、!=、、=、<、<=等)、逻辑运算符(如&&、||、!等)。此外,还有位运算符(如&、|、^等)和指针运算符(如、等)。 3. 控制结构 C语言中常用的控制结构包括if语句、循环语句(如for、while等)和switch语句。通过这些控制结构,可以实现程序的分支、循环和多路选择等功能。 4. 函数 函数是C语言中用于封装代码的单元,可以实现代码的复用和模块化。C语言中定义函数使用关键字“void”或返回值类型(如int、float等),并通过“{”和“}”括起来的代码块来实现函数的功能。 5. 指针 指针是C语言中用于存储变量地址的变量。通过指针,可以实现对内存的间接访问和修改。C语言中定义指针使用星号()符号,指向数组、字符串和结构体等数据结构时,还需要注意数组名和字符串常量的特殊性质。 6. 数组和字符串 数组是C语言中用于存储同类型数据的结构,可以通过索引访问和修改数组中的元素。字符串是C语言中用于存储文本数据的特殊类型,通常以字符串常量的形式出现,用双引号("...")括起来,末尾自动添加'\0'字符。 7. 结构体和联合 结构体和联合是C语言中用于存储不同类型数据的复合数据类型。结构体由多个成员组成,每个成员可以是不同的数据类型;联合由多个变量组成,它们共用同一块内存空间。通过结构体和联合,可以实现数据的封装和抽象。 8. 文件操作 C语言中通过文件操作函数(如fopen、fclose、fread、fwrite等)实现对文件的读写操作。文件操作函数通常返回文件指针,用于表示打开的文件。通过文件指针,可以进行文件的定位、读写等操作。 总之,C语言是一种功能强大、灵活高效的编程语言,广泛应用于各种领域。掌握C语言的基本语法和数据结构,可以为编程学习和实践打下坚实的基础。
该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。
HTML5网页动态时钟源码可以使用JavaScript和CSS来实现。下面是一个简单的示例: HTML代码: ```html <!DOCTYPE html> <html> <head> <title>动态时钟</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="clock"> <div id="hour" class="hand"></div> <div id="minute" class="hand"></div> <div id="second" class="hand"></div> </div> <script src="script.js"></script> </body> </html> ``` CSS代码(style.css): ```css .clock { width: 200px; height: 200px; background-color: #f1f1f1; border-radius: 50%; position: relative; margin: 0 auto; margin-top: 100px; overflow: hidden; } .hand { background-color: #333; position: absolute; left: 50%; bottom: 50%; transform-origin: bottom center; } #hour { width: 8px; height: 60px; margin-left: -4px; } #minute { width: 4px; height: 80px; margin-left: -2px; } #second { width: 2px; height: 100px; margin-left: -1px; } ``` JavaScript代码(script.js): ```javascript function rotateClockHands() { var now = new Date(); var hourAngle = now.getHours() % 12 * 30 + now.getMinutes() / 2; var minuteAngle = now.getMinutes() * 6; var secondAngle = now.getSeconds() * 6; document.getElementById('hour').style.transform = 'rotate(' + hourAngle + 'deg)'; document.getElementById('minute').style.transform = 'rotate(' + minuteAngle + 'deg)'; document.getElementById('second').style.transform = 'rotate(' + secondAngle + 'deg)'; } setInterval(rotateClockHands, 1000); ``` 这段代码创建一个200x200像素的圆形时钟,并用JavaScript动态旋转时、分、秒指针。CSS用于设置时钟的样式,JavaScript负责计算当前时间并将指针旋转到正确的位置。setInterval()函数用于每秒钟更新一次指针的旋转角度,使时钟指针动起来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值