太空人时间HTML,基于JavaScript实现网红太空人表盘的完整代码

最新推荐文章于 2024-02-12 15:39:04 发布
最新推荐文章于 2024-02-12 15:39:04 发布
阅读量727 收藏
点赞数
文章标签： 太空人时间HTML

一、效果展示

用javascript写的一个太空人表盘。

08f7519c93e6cd8b0b079ff78d70e70b.gif

二、源代码

html代码

太空人表盘

function WatchMeter() {

// 初始化dom

this._initDom()

// 更新

this.update()

this.date = new TimeGeneration()

this._render(this.date.getDate(), this.date.getCalendarDate(), this.date.getTime())

}

// 修改原型

WatchMeter.prototype = {

constructor: WatchMeter,

// 初始化Dom

_initDom: function () {

this.elem = {}

this.elem.hh = document.getElementById('hh')

this.elem.hl = document.getElementById('hl')

this.elem.mh = document.getElementById('mh')

this.elem.ml = document.getElementById('ml')

this.elem.sh = document.getElementById('sh')

this.elem.sl = document.getElementById('sl')

this.elem.date = document.getElementById('date')

this.elem.calendarDate = document.getElementById('calendarDate')

},

// 更新

update: function () {

var _this = this

setInterval(function () {

_this._render(_this.date.getDate(), _this.date.getCalendarDate(), _this.date.getTime())

}, 1000)

},

// 渲染

_render: function (date, calendarDate, time) {

this._setNumberImage(this.elem.hh, time[0])

this._setNumberImage(this.elem.hl, time[1])

this._setNumberImage(this.elem.mh, time[2])

this._setNumberImage(this.elem.ml, time[3])

this._setNumberImage(this.elem.sh, time[4])

this._setNumberImage(this.elem.sl, time[5])

this.elem.date.innerText = date[2] + " " +date[0] + "-" +date[1]

this.elem.calendarDate.innerText = calendarDate

},

// 设置数字图片

_setNumberImage: function (elem, value) {

elem.style.backgroundImage = "url(./assets/img/" + value + ".svg)";

}

}

var myWatchMeter = new WatchMeter()

js代码

// 生成时间 农历 公历 时间

function TimeGeneration() {

}

TimeGeneration.prototype = {

constructor: TimeGeneration,

WEEKDAY_NAME: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

NUMBER_STRING: "一二三四五六七八九十",

MONTH_STRING: "正二三四五六七八九十冬腊",

MONTH_ADD: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],

CALENDAR_DATA: [0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95],

_getBit: function (m, n) {

return (m >> n) & 1;

},

// 获取时间 array

getTime: function () {

var time = new Date();

return [parseInt(time.getHours() / 10),

parseInt(time.getHours() % 10),

parseInt(time.getMinutes() / 10),

parseInt(time.getMinutes() % 10),

parseInt(time.getSeconds() / 10),

parseInt(time.getSeconds() % 10)]

},

// 获取公历日期 array

getDate: function () {

var date = new Date();

return [

date.getMonth() + 1,

date.getDate(),

this.WEEKDAY_NAME[date.getDay()]

]

},

// 获取农历日期 string

getCalendarDate: function () {

var calendar = new Date();

var tmp = calendar.getFullYear();

if (tmp < 1900) {

tmp += 1900;

}

var total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + this.MONTH_ADD[calendar.getMonth()] + calendar.getDate() - 38;

if (calendar.getFullYear() % 4 == 0 && calendar.getMonth() > 1) {

total++;

}

var isEnd = false;

var n, m, k

for (m = 0; ; m++) {

k = (this.CALENDAR_DATA[m] < 0xfff) ? 11 : 12;

for (n = k; n >= 0; n--) {

if (total <= 29 + this._getBit(this.CALENDAR_DATA[m], n)) {

isEnd = true;

break;

}

total = total - 29 - this._getBit(this.CALENDAR_DATA[m], n);

}

if (isEnd) break;

}

var month = k - n + 1;

var day = total;

if (k == 12) {

if (month == Math.floor(this.CALENDAR_DATA[m] / 0x10000) + 1) {

month = 1 - month;

}

if (month > Math.floor(this.CALENDAR_DATA[m] / 0x10000) + 1) {

month--;

}

}

var tmp = "";

if (month < 1) {

tmp += "(闰)";

tmp += this.MONTH_STRING.charAt(-month - 1);

} else {

tmp += this.MONTH_STRING.charAt(month - 1);

}

tmp += "月";

tmp += (day < 11) ? "初" : ((day < 20) ? "十" : ((day < 30) ? "廿" : "三十"));

if (day % 10 != 0 || day == 10) {

tmp += this.NUMBER_STRING.charAt((day - 1) % 10);

}

return tmp;

}

}

CSS代码

.jun-meter {

position: relative;

width: 640px;

height: 640px;

background-image: url("../img/ring.svg");

background-repeat: no-repeat;

background-size: 100%;

margin: auto;

margin-top: 7%;

}

.jun-time-rect {

position: absolute;

width: 30px;

height: 80px;

left: 275px;

top: 180px;

background-image: url("../img/rect.svg");

background-size: 40px 40px;

}

.jun-time-h-h {

position: absolute;

width: 100px;

height: 100px;

left: 140px;

top: 170px;

background-image: url("../img/8.svg");

background-repeat: no-repeat;

background-size: 100%;

}

.jun-time-h-l {

position: absolute;

width: 100px;

height: 100px;

left: 200px;

top: 170px;

background-image: url("../img/8.svg");

background-repeat: no-repeat;

background-size: 100%;

}

.jun-time-m-h {

position: absolute;

width: 100px;

height: 100px;

left: 290px;

top: 170px;

background-image: url("../img/8.svg");

background-repeat: no-repeat;

background-size: 100%;

}

.jun-time-m-l {

position: absolute;

width: 100px;

height: 100px;

left: 350px;

top: 170px;

background-image: url("../img/8.svg");

background-repeat: no-repeat;

background-size: 100%;

}

.jun-time-s-h {

position: absolute;

width: 60px;

height: 60px;

left: 430px;

top: 208px;

background-image: url("../img/8.svg");

background-repeat: no-repeat;

background-size: 100%;

}

.jun-time-s-l {

position: absolute;

width: 60px;

height: 60px;

left: 470px;

top: 208px;

background-image: url("../img/8.svg");

background-repeat: no-repeat;

background-size: 100%;

}

.jun-calendar-date {

position: absolute;

width: 120px;

height: 30px;

left: 460px;

top: 310px;

line-height: 30px;

font-size: 20px;

text-align: center;

}

.jun-date {

position: absolute;

width: 120px;

height: 30px;

left: 460px;

top: 345px;

line-height: 30px;

font-size: 20px;

text-align: center;

}

.jun-human{

position: absolute;

width: 150px;

height: 150px;

left: 250px;

top: 280px;

background-image: url("../img/human.gif");

background-repeat: no-repeat;

background-size: 100%;

}

到此这篇关于基于JavaScript实现网红太空人表盘的完整代码的文章就介绍到这了,更多相关JavaScript实现网红太空人表盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

困困龙龙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用JavaScript实现网红太空人表盘（绝对详细、绝对原创），附源码下载
2401_84091628的博客
04-18 633
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取转动//不断的更新图片即可正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取资料领取方式：点击这里前往获取。
华为太空人表盘
热门推荐
little_shallot的博客
03-25 1万+
最近看到蛮火的太空人表盘，就用html和js去写了一个，时间可以动，如果想要其他数字切换可以自己去改，这是下载链接https://download.csdn.net/download/little_shallot/16091419 <div class="box"> <div class="topleft"> <img src="./image/1.png" alt=""> <span>80%&
html5 canvas绘制圆形、方形矩形、线段、图片等各种图形（面向对象版本）
编程界明世隐的博客
03-02 1697
概念： 面向对象的方法主要是把事物给对象化，包括其属性和行为。面向对象编程更贴近实际生活的思想。总体来说面向对象的底层还是面向过程，面向过程抽象成类，然后封装，方便使用就是面向对象（万物皆对象）。 绘制圆 构造函数（将圆心位置、半径、缩放比例等参数都封装进去） //构造函数 function Ball(o){ this.x=0,//圆心X坐标 this.y=0,//圆心Y坐标 this.r=0,//半径 this.startAngle=0,//开始角度 this.end
分享111个JS时钟代码特效，总有一款适合您
zy0412326的专栏
02-07 1851
JS
分享89个时间日期JS特效，总有一款适合您
weixin_47730343的博客
02-12 793
知识付费甚欢喜，为咱码农谋福利。移动端上下滑动日期选择插件mobileSelect.js。移动端日期选择插件kinerDatePicker.js。手机端时间选择插件jquery.promptumenu。体积小的移动端时间插件jquery.date.js。可上下滑动的日期时间插件mobiscroll。多主题的移动端日期选择插件rolldate。可定义多种的angularjs日期选择插件。移动端联动日期选择插件mobile.js。移动端日期选择插件jquery-date。各种日期选择样式的插件laydate。
js实现简单的日历
qq_43412333的博客
10-05 1674
最终效果: 我先写了一个js文件,方便调用里面的函数,内容如下: //此函数使时间按照指定的字符串样式输出 //date是当前的系统时间 function dateFormat(date, str) { //获取当前的年,月,日,小时,分,秒 var year = date.getFullYear(); //因为系统上的月份1-12分别为0-11,所以输出时应+1...
用JavaScript实现网红太空人表盘.rar
03-25
在本项目中，"用JavaScript实现网红太空人表盘"是一个使用JavaScript编程语言来创建一个互动的、视觉吸引人的太空人表盘的实例。这个表盘可能被设计为时钟或者计时器的形式，模仿了网络上流行的太空人元素，为网页...
网红华为太空手表太空人表盘代码HTML5编写
03-24
描述中的“网红华为太空手表太空人表盘代码编写的太空人”进一步强调了这个表盘设计的热门程度。由于“网红”一词的使用，我们可以理解这个表盘设计不仅技术上实现复杂，而且在社交媒体和网络上受到了广泛的传播和...
基于JavaScript网红太空人表盘
03-21
【基于JavaScript网红太空人表盘】是一个利用JavaScript技术实现的互动式网页元素，它以流行的“太空人”形象为设计灵感，为用户呈现一个独特的视觉效果。这种表盘设计通常包含动态的动画效果，比如太空人随着时间的...
太空人天气时钟源码及说明.zip
05-02
转发大佬的
小米手环-太空人表盘安装包.rar
03-25
太空人表盘宇航员表盘华为太空人表盘-小米手环Android版，内有安装教程，
html5daima
06-18
狼抓羊的好游戏，自己的好用，见笑了，请大家支持下，谢谢
【 JavaScript资源 】基于JavaScript 实现的网红太空人表盘demo
最新发布
04-03
这款基于JavaScript的网红太空人表盘是一个充满创意和趣味性的时钟插件。它巧妙地将太空人元素与时钟功能相结合，为用户带来独特的视觉体验。无论是用于个人网页装饰，还是作为项目展示的一部分，这款表盘都能为你的...
防华为手表太空人主题界面 | html5 代码实现
洛阳泰山的博客
02-15 1458
HTML、CSS和JavaScript是构建现代网页的核心技术，它们相互配合，共同实现了网页的结构、样式和交互行为。下面将详细解释每种技术的特点和用法。
用JavaScript实现的太空人手表
zebghfv的博客
03-31 6434
JS写的太空人手表，没有用canvas、svg。 主要用几个大的函数来动态显示时间、天气这些。 天气的获取用到了AJAX请求。 代码中有详细的注释，可以通过看注释了解。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2021033118492454.gif#pic_center 主要是JS部分 setInterval(function time () { //因为要实时获取时间，索引用了一个定时器,每隔10ms就会执行一次time这个函数 v
太空人表盘 javascript 下载
06-05
太空人表盘是一个基于Javascript的表盘应用程序，它提供了一个太空主题的同时，拥有多种历法和时区选择。在这个应用程序中，用户可以根据自己的喜好选择不同的表盘样式和不同的时间显示格式，还可以在地图上选择自己...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值