精华内容
下载资源
问答
  • 罗盘时钟代码

    千次阅读 2020-12-12 23:26:36
    initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> 罗盘时钟</title> <link rel="stylesheet" href="css/clock.css" > </head> <body> <div id="clock"></div> ...

    HTML

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>罗盘时钟</title>
    
        <link rel="stylesheet" href="css/clock.css" >
    
    </head>
    <body>
    
    <div id="clock"></div>
    
    <script src="js/clock.js"></script>
    
    </body>
    </html>
    

    CSS

    *{
        margin:0;
        padding:0
    }
    html,body{
        width:100%;
        height:100%;
        background-color:#000;
        overflow:hidden
    }
    #clock{
        position:relative;
        width:100%;
        height:100%;
        background:#000
    }
    .label{
        display:inline-block;
        color:#4d4d4d;
        text-align:center;
        padding:0 5px;
        font-size:19px;
        transition:left 1s,top 1s;
        transform-origin:0% 0%
    }
    

    JacaScript

    var monthText=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
    var dayText=["零一号","零二号","零三号","零四号","零五号","零六号","零七号","零八号","零九号","十号","十一号","十二号","十三号","十四号","十五号","十六号","十七号","十八号","十九号","二十号","二十一号","二十二号","二十三号","二十四号","二十五号","二十六号","二十七号","二十八号","二十九号","三十号","三十一号"];
    var weekText=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var hourText=["零点","零一点","零两点","零三点","零四点","零五点","零六点","零七点","零八点","零九点","零十点","十一点","十二点","十三点","十四点","十五点","十六点","十七点","十八点","十九点","二十点","二十一点","二十二点","二十三点"];
    var minuteText=["零一分","零二分","零三分","零四分","零五分","零六分","零七分","零八分","零九分","零十分","十一分","十二分","十三分","十四分","十五分","十六分","十七分","十八分","十九分","二十分","二十一分","二十二分","二十三分","二十四分","二十五分","二十六分","二十七分","二十八分","二十九分","三十分","三十一分","三十二分","三十三分","三十四分","三十五分","三十六分","三十七分","三十八分","三十九分","四十分","四十一分","四十二分","四十三分","四十四分","四十五分","四十六分","四十七分","四十八分","四十九分","五十分","五十一分","五十二分","五十三分","五十四分","五十五分","五十六分","五十七分","五十八分","五十九分","六十分"];
    var secondsText = ["零一秒", "零二秒", "零三秒", "零四秒", "零五秒", "零六秒", "零七秒", "零八秒", "零九秒", "零十秒", "十一秒", "十二秒", "十三秒", "十四秒", "十五秒", "十六秒", "十七秒", "十八秒", "十九秒", "二十秒", "二十一秒", "二十二秒", "二十三秒", "二十四秒", "二十五秒", "二十六秒", "二十七秒", "二十八秒", "二十九秒", "三十秒", "三十一秒", "三十二秒", "三十三秒", "三十四秒", "三十五秒", "三十六秒", "三十七秒", "三十八秒", "三十九秒", "四十秒", "四十一秒", "四十二秒", "四十三秒", "四十四秒", "四十五秒", "四十六秒", "四十七秒", "四十八秒", "四十九秒", "五十秒", "五十一秒", "五十二秒", "五十三秒", "五十四秒", "五十五秒", "五十六秒", "五十七秒", "五十八秒", "五十九秒", "六十秒"];
    var clock;var monthList=[];
    var dayList=[];
    var weekList=[];
    var hourList=[];
    var minuteList=[];
    var secondsList=[];
    var isCircle=false;
    var textSet=[[monthText,monthList],
        [dayText,dayList],
        [weekText,weekList],
        [hourText,hourList],
        [minuteText,minuteList],
        [secondsText,secondsList]];
    window.onload=function()
    {
        init();
        setInterval(function()
        {runTime();
        },100);
        changePosition();
        setTimeout(function()
        {changeCircle();
        },2000);
    }
    function init()
    {clock=document.getElementById('clock');
        for(var i=0;
            i<textSet.length;i++)
        {for(var j=0;j<textSet[i][0].length;j++)
        {var temp=createLabel(textSet[i][0][j]);
            clock.appendChild(temp);textSet[i][1].push(temp);
        }
        }
    }
    function createLabel(text)
    {
        var div=document.createElement('div');
        div.classList.add('label');
        div.innerText=text;return div;
    }
    function runTime()
    {
        var now=new Date();
        var month=now.getMonth();
        var day=now.getDate();
        var week=now.getDay();
        var hour=now.getHours();
        var minute=now.getMinutes();
        var seconds=now.getSeconds();
        initStyle();
        var nowValue=[month,day-1,week,hour,minute,seconds];
        for(var i=0;
            i<nowValue.length;
            i++)
        {var num=nowValue[i];
            textSet[i][1][num].style.color='#fff';
        }
        if(isCircle)
        {var widthMid=document.body.clientWidth/2;
            var heightMid=document.body.clientHeight/2;
            for(var i=0;
                i<textSet.length;
                i++){for(var j=0;
                         j<textSet[i][0].length;
                         j++){var r=(i+1)*35+50*i;
                var deg=360/textSet[i][1].length*(j-nowValue[i]);
                var x=r*Math.sin(deg*Math.PI/180)+widthMid;
                var y=heightMid-r*Math.cos(deg*Math.PI/180);
                var temp=textSet[i][1][j];
                temp.style.transform='rotate('+(-90+deg)+'deg)';
                temp.style.left=x+'px';
                temp.style.top=y+'px';
            }
            }
        }
    }
    function initStyle()
    {var label=document.getElementsByClassName('label');
        for(var i=0;
            i<label.length;i++)
        {label[i].style.color='#4d4d4d';
        }
    }
    function changePosition()
    {
        for(let i=0;i<textSet.length;
            i++)
        {
            for(let j=0;
                j<textSet[i][1].length;
                j++){
                let tempX=textSet[i][1][j].offsetLeft+"px";
                let tempY=textSet[i][1][j].offsetTop+"px";
                setTimeout(function(){
                    textSet[i][1][j].style.position="absolute";
                    textSet[i][1][j].style.left=tempX;textSet[i][1][j].style.top=tempY;
                },50);
            }
        }
    }
    function changeCircle()
    {
        isCircle=true;
        clock.style.transform="rotate(90deg)";
    }
    
    展开全文
  • jQuery带日期和星期的数字时钟,创意旋转的罗盘时钟代码。代码结构1. 引入JS2. HTML代码 (function() {var months = ["January", "February", "March", "April", "May", "June","July", "August", "September", ...

    特效描述:jQuery css3 创意的罗盘时钟。jQuery带日期和星期的数字时钟,创意旋转的罗盘时钟代码。

    代码结构

    1. 引入JS

    2. HTML代码

    (function() {

    var months = ["January", "February", "March", "April", "May", "June",

    "July", "August", "September", "October", "November", "December"

    ],

    days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

    function getTime() {

    var date = new Date(),

    second = date.getSeconds() ,

    minute = date.getMinutes() ,

    hour = date.getHours() ,

    time = date.toLocaleString('en-US', { hour: 'numeric',minute:'numeric', hour12: true }),

    day = date.getDay() ,

    month = date.getMonth() ,

    date = date.getDate() +' . '+ months[month],

    ds = second * -6,

    dm = minute * -6,

    dh = hour * -30;

    $('.second').css('transform', 'rotate(' + ds + 'deg)');

    $('.minute').css('transform', 'rotate(' + dm + 'deg)');

    $('.hour').css('transform', 'rotate(' + dh + 'deg)');

    $('.time').text(time);

    $('.day').text(days[day]);

    $('.date').text( date )

    }

    function dailer( selector , size){

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

    $(selector).append(''+s+'')

    }

    }

    dailer( '.second' , 195);

    dailer( '.minute' , 145);

    dailer( '.dail' , 230);

    for(var s = 1; s < 13 ; s++){

    $('.hour').append(''+s+'')

    }

    setInterval(getTime, 1000);

    getTime();

    } ());

    展开全文
  • jquery罗盘时钟代码

    2021-02-03 17:38:08
    非常漂亮的jquery罗盘时钟代码,值得下载收藏
  • 罗盘时钟代码分享
  • 2021抖音潮流罗盘时钟代码
  • jQuery罗盘时钟代码

    2021-02-18 16:56:15
    源码介绍: jQuery罗盘时钟代码基于jquery-3.4.1.min.js制作,环形罗盘,时钟动画。 网盘下载地址: http://www.bytepan.com/4iimSDHOqnu 图片:

    源码介绍:

    jQuery罗盘时钟代码基于jquery-3.4.1.min.js制作,环形罗盘,时钟动画。


    网盘下载地址:

    http://www.bytepan.com/4iimSDHOqnu


    图片:


    展开全文
  • jQuery罗盘时钟代码(炫酷).zip
  • jQuery实时节气罗盘时钟代码,将其放在部署好的tomcat中(也就是webapp下面想要运行的项目问价夹中),然后运行tomcat,之后再进入到这个路径中,打开index.txt就可以了
  • 原生抖音罗盘时钟代码分享 罗盘文字时钟软件非常火 文字时钟 本站给大家分享这款就是通过原生j来s实现的文字时钟源码,有喜欢的朋友可以下载哦,无需安装,上传访问即可使用 简单实现:...

    原生抖音罗盘时钟代码分享 罗盘文字时钟软件非常火 文字时钟

    本站给大家分享这款就是通过原生j来s实现的文字时钟源码,有喜欢的朋友可以下载哦,无需安装,上传访问即可使用
    简单实现:https://sucaiip.com/time-302.html
    在这里插入图片描述

    展开全文
  • 罗盘时钟代码(转载)

    万次阅读 热门讨论 2019-12-06 23:16:57
    文件结构如下: $ tree ├── css │ └── demo.css ├── hello.html └── js └── demo.js 浏览器打开hello.html即可(文件见附录),效果如下: 完整代码(Flask工程)见: ... http://www.academics.work/clock
  • 最近抖音上有一个罗盘文字时钟软件非常火,就是文字时钟,给大家分享这款就是通过原生js来实现的文字时钟源码,有喜欢的朋友可以下载哦,无需安装,上传访问即可使用
  • } } } 时钟在analog模式下显示为12:56 现在,我们的时钟就做好了!! 妈蛋,终于完成了,累死wo了。It's so tired!!!! PS:这篇主要是面向新手,请大神勿喷,也不要觉得这个是一个烂文章,谢谢。 -- END -- unity...
  • var Months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];var Days = ['一号', '二号', '三号', '四号', '五号', '六号', '七号', '八号', '九号', '...
  • *,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box;...font-size:16px;}.clock-container{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%)...
  • 电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。先准备一个html元素,用来放置...
  • 今天我们来讨论一款老掉牙的实时时钟芯片DS1302。什么是实时时钟(RealTime Clock, RTC)呢?为什么我们需要它呢?假设你使用单片机实现万年历应用,一般的做法是这样的:设置中断后判断1秒是否到来,如果到来就将秒...
  • 1.所需器件(1)Arduino Uno主控板一块。...3.代码编写使用Mixly软件编写代码,最好是用1.0以上版本的。此处代码编写分三步完成:第一步 调试LCD模块显示第二步 获取GPS时间数据显示第三步 几点改进下面我们开始一步...
  • 早年的大块头显示器,需要屏幕保护程序防止其烧坏。现代化显示器普及后,屏保作为一种历史遗留物,失去了本来的价值。不过古物总能焕发新机,屏保仍然在装饰、显示时间、预览...启动屏保后一个漂亮的数字时钟就出现了。
  • 不过,笔者近日发现可以利用 Rainmeter(中译「雨滴桌面」,一款自由度极高的 Windows 桌面个性化工具)写一段十分简易的代码来实现30小时制时钟(Windows 党福音)。参考代码如下: [MeasureTimeHour] Measure=Time...
  • [闽南网]Word Clock Mac版作为一款精美和酷炫的数字时钟屏保,目前受到了非常多的用户的欢迎和使用。word clock作为一款纯文字排版屏幕保护应用,让用户的电脑屏保瞬间变的“高大上”和科技感十足。那么word clock ...
  • 抖音上很火的时钟屏保,被我改造完后用来准备准备准备表白,好吧,我一直在准备。。。闲言少叙,书归正文,因为 gif 格式的图片只能上传 5M,所以我只能切成两块,中间还删减了一些,大家凑合着看,不要打我,大家...
  • 我们先看看粒子时钟的效果,如下:下面我们将通过canvas和js实现,首先要创建一个html文件并添加一个canvas画布,如下:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • 之前之所以忽视了这里,是因为龙芯开源的PMON考虑到了6核版本和8和版本共用同一固件的兼容性,并没有关掉这两个核的时钟,所以在逆向的时候,找到了这段代码的用途,就误以为作用和开源版本的一致,疏忽了。...
  • (给程序员的那些事加星标)转自:程序员入门进阶【程序员的那些事 转注】:雷军在 1994 年写的汇编代码,我们曾在 2011 年就在微博分享过。最近有位博主成功试运行了。这是一段古董代码了,因为在1994年,当时我的一...
  • css+html已经学完了,将近50天时间,...同时也会把一些关键点做总结 html部分 <html lang="en"> <head> <meta charset="UTF-8"> , initial-scale=1.0"> 好看的时钟title> <link rel="stylesheet" href="IU-clock.css"> ...
  • 时钟 电脑中的CPU,AGP、PCI插槽、SATA、USB端口和PS/2端口等在通信速度上有很大差异,所以需要提供不同的时钟频率。由ck410、ck505和iCLK等芯片将原先散布在不同地方的晶振和分频电路整合在一起,为CPU、SATA、PCI...
  • jQuery实时节气罗盘时钟代码是一款创意个性的圆形节气时钟动画特效。

空空如也

空空如也

1 2 3 4 5 6
收藏数 115
精华内容 46
关键字:

罗盘时钟代码