python罗盘时钟代码_jQuery css3创意的罗盘时钟代码

特效描述：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();

} ());

python罗盘时钟代码_jQuery css3创意的罗盘时钟代码相关推荐

html 地球页面代码,纯CSS3实现地球自转实现代码(图文教程附送源码)
最终成果: 素材:两张图片, espaco.jpg(1600*1000) terra.jpg(900*450) 第一步,形成静态图(地球背景全屏,地球大小为450px*450px,地球位置为上下左右居 ...
css3 动画图片滚动条,CSS3实现滚动条动画效果代码分享
一团网资讯一团资讯 > css3 > CSS3实现滚动条动画效果代码分享 CSS3实现滚动条动画效果代码分享 2018-05-01 08:57:16 发布者:来源网络先给大家一 ...
jQuery+css3实现极具创意的罗盘旋转时钟效果源码
效果 HTML代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><ti ...
VUE jQuery+VUE带实时节气创意圆形罗盘时钟动画特效
1.外部引用的js文件 ①jquery版本:jquery-3.3.1.js(可以自己找一个jQuery版本,不要太旧就行) <script type="text/javascript& ...
用前端代码编写一个动态的罗盘时钟
用前端代码编写一个动态的罗盘时钟前言一.代码如下 1.index 2.js 3.css 页面效果前言今天给大家分享一个罗盘时钟的前端代码,喜欢的小伙伴帮忙点赞一下噢! 一.代码如下 1.ind ...
html显示时钟翻页 js,js css3翻页数字时钟代码
特效描述:js css3翻页数字时钟.js获取本地时间数字时钟翻页动画代码. 代码结构 1. 引入JS 2. HTML代码 'use strict'; function _classCallCheck ...
python创意turtle作品和代码,python创意编程比赛作品
这篇文章主要介绍了python创意turtle作品和代码,具有一定借鉴价值,需要的朋友可以参考下.希望大家阅读完这篇文章后大有收获,下面让小编带着大家一起了解一下. 1.创意编程与python编程区别 ...
html如何添加时钟效果,基于HTML5+CSS3实现简单的时钟效果
目的: 利用html5,css实现钟摆效果知识点: 1) 利用position/left/top和calc()实现元素的水平和垂直居中: 2) 利用CSS3的animation/transform/ ...
Python开发指南[1]之程序员计时小时钟(附源码)
Python开发指南[1]之程序员计时小时钟程序之美前言主体运行效果核心代码逻辑分析结束语程序之美前言 Python作为一门编程语言,这门语言的魅力和影响力已经远超C#.C++等编程 ...
微信html抽奖转盘代码,使用CSS3+jquery.js 实现微信抽奖转盘效果
最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 "CSS3"! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖jquery的动画效果插件, ...

python罗盘时钟代码_jQuery css3创意的罗盘时钟代码

python罗盘时钟代码_jQuery css3创意的罗盘时钟代码相关推荐

最新文章

热门文章