抖音超火JavaScript实现网红太空人表盘 ~看程序员是如何用代码做华为太空手表
2024-05-05 19:26:17
❉ 用JavaScript/Canvas实现网红太空人表盘
听说太空人表盘火了！程序员也不能落后，代码安排-用javascript写的一个太空人表盘~网上最近太空人表盘很火，效果感觉还不错，安排走起！
❉ 文章目录
- ❉ 用JavaScript/Canvas实现网红太空人表盘
- 外太空效果图↓↓↓(已兼容 H5移动端 和 pc端 )
- JavaScript实现版本
- canvas实现版本
- 外太空代码-文件目录↓
- 一、3D相册(代码实现)
- html (部分)
- js (部分)
- css (部分)
- 二、做好的网页效果,如何通过发链接给别人看?
- 1.1 解决部署上线~> 部署上线工具(可永久免费使用)
- 1.1部署流程
- 1.2 哇~ 部署成功
- 三、前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
- 四、❉ 源码获取
- 五、❉更多表白源码
外太空效果图↓↓↓(已兼容 H5移动端 和 pc端 )
JavaScript实现版本
JavaScript实现版本在线演示地址
canvas实现版本
Canvas实现版本在线演示地址
外太空代码-文件目录↓
一、3D相册(代码实现)
html (部分)
<div id="watch"><img id="elec" src="./电量.png" alt=""><p id="elec-num">电量:100%</p><img id="sun" src="" alt=""><p id="now"></p><p id="time"></p><img id="man" src="./3c235f84458df48e57def352432d1f35.gif" alt=""><p id="hert-num">80~120</p><img id="hert" src="./面性心率图标.png" alt=""><p id="hert-now">92</p><img id="img-high" src="./三角形_上.png" alt=""><img id="img-low" src="./三角形.png" alt=""><p id="tem-high"></p><p id="tem-low"></p><p id="weather"></p><div id="line-on"></div><!--用transform画线条,给边框进行X或者Y轴的缩小--><div id="line-mid"></div><p id="p"></p><img id="run" src="./步数.png" alt=""><p id="run-num">6745</p><div id="line-down"></div><div id="down-mid"></div></div>js (部分)
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>setInterval(function time () { //因为要实时获取时间，索引用了一个定时器,每隔10ms就会执行一次time这个函数var data=new Date()var hour=data.getHours(); //获取当前时间：时分秒var min=data.getMinutes()var second=data.getSeconds()if(second<10){ //为了美观，个位数的时间就会在前面添加一个数字0。second="0"+second;}if(min<10){min="0"+min;}if(hour<10){hour="0"+hour}var p=document.getElementById("p")p.innerText=hour+":"+min+":"+second //把用JS实时获取的时间插入到p标签。},10)//获取当前天气，并动态显示var xmlhttp;function wether(){$.ajax({ //用jqurey封装的AJAX来从网站获取天气数据url:"http://wthrcdn.etouch.cn/weather_mini?city=成都", //查找天气的网站，dataType:"json", //预期服务器返回的数据类型。async:false, //设为同步请求，将锁住浏览器，用户的其他操作必须等请求完成才能进行success:function(data){ //必须是function类型的参数，如果请求成功就会调用这个函数，function tianqi(){ // 闭包函数 函数外部可以访问内部的变量xmlhttp=data;return xmlhttp;};tianqi();}})console.log(xmlhttp);}setInterval(wether(),1000); //因为是显示实时温度所以就用定时器，每个1s调用一次函数。var high=xmlhttp.data.forecast[0].high //获取最高气温 数据类型是： 高温 26℃var low=xmlhttp.data.forecast[0].low; //获取最低气温 数据类型是： 低温 16℃high=high.replace(/[高温 ]/g,"") //利用正则表达式把 “高温 ”去除 low=low.replace(/[低温 ]/g,"") //利用正则表达式把 “低温 ”去除 var now=xmlhttp.data.wendu; //获取当前的温度var img=["./太阳.png","./多云.png","./霾.png","./下雨.png"] //该数组保存的是天气的图标的地址名var weather=xmlhttp.data.forecast[0].type; //获取天气的类型 例如：小雨 多云 阴function tem(){let temhigh=document.getElementById("tem-high");let temlow=document.getElementById("tem-low"); //获取准备用来保存最高温和最低温的标签temlow.innerText=low //往这个标签中插入数据temhigh.innerText=highlet wh=document.getElementById("weather"); //获取准备用来保存天气类型的标签wh.innerText=weathervar whnow=document.getElementById("now"); //保存现在的温度whnow.innerText=now+"℃"}setInterval(tem(),1000); //因为是显示实时温度所以就用定时器，每个1s调用一次函数。//天气图片动态改变function whimg(){let sun=document.getElementById("sun"); //获取用来保存天气图片的img标签。if(weather=="多云"||weather=="阴"){ //weather是从网站获取的天气类型。sun.src=img[1]; //然后用if判断里面是否等于 “多云”、“阴”，如果相等，就把img标签中的src地址赋值位之前的img数组的值 } //下面依次类推else if(weather=="霾"){sun.src=img[2];}else if(/[雨]/g.test(weather)){sun.src=img[3]}else{sun.src=img[0]}}setInterval(whimg(),1000) //显示月份 日期 星期的函数function shijian(){ let date=new Date(); let month=date.getMonth()+1; //用来显示月份 因为date.getMonth()获取到的月份要少一个月，所以就加1。let day=date.getDate(); //获取日let week=date.getDay(); //获取星期几 但是是阿拉伯数字let timer=document.getElementById("time");let number=["一","二","三","四","五","六","日"]; //因为星期显示阿拉伯数字 所以用if来改变阿拉伯数字，显示大写的数字if(week==1){week=number[0];timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;}else if(week==2){week=number[1];timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;}else if(week==3){week=number[2];timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;}else if(week==4){week=number[3];timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;}else if(week=5){week=number[4]timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;}else if(week==6){week=number[5];timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;}else {timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;}}shijian();</script>
css (部分)
<style>@font-face {font-family: "led regular";src: url("./Open\ 24\ Display\ St.ttf");}#p{font-family: "led regular";font-size: 50px;position: absolute;left: 50px;top: 50px;}#watch{width: 400px;height: 400px;border-radius: 200px;border:2px solid black;}#line-on{width: 325px;height: 2px;background-color: black;transform: scaleY(1);position: absolute;left: 48px;top: 89px;}#line-down{width: 325px;height: 2px;background-color: black;transform: scaleY(1);position: absolute;top: 329px;left: 47px;}#line-mid{width: 2px;height: 82px;background-color: black;transform: scaleY(1);position: absolute;left: 207px;top: 8px;}#elec{width: 60px;height: 50px;position: absolute;left: 140px;}#elec-num{font-family: "led regular";font-size: 30px;position: absolute;left: 90px;top: 20px;}#sun{width: 50px;height: 50px;position: absolute;left: 207px;}#temperature{position: absolute;left: 210px;top:50px;}#weather{position: absolute;left: 310px;top: 50px;}#now{position: absolute;left: 263px;top: 50px;font-weight: bolder;}#hert{width: 60px;position: absolute;left: 50px;top: 270px;}#hert-num{font-size: 15px;position: absolute;left: 55px;top: 240px;}#hert-now{position: absolute;font-size: 20px;font-weight: bolder;left: 110px;top: 275px;}#time{position: absolute;font-size: 20px;left: 300px;top: 85px;}#man{width: 200px;position: absolute;left: 110px;top: 150px;z-index: -1;transform: rotate(290deg);}#img-high{position: absolute;left: 242px;top: 57px;}#img-low{position: absolute;left: 242px;top: 75px;}#tem-high{position: absolute;left: 215px;top: 45px;font-size: 12px;}#tem-low{position: absolute;left: 215px;top: 62px;font-size: 12px;}#run{width: 30px;position: absolute;left: 280px;top: 290px;}#run-num{position: absolute;left: 315px;top: 282px;}
二、做好的网页效果,如何通过发链接给别人看?
1.1 解决部署上线~> 部署上线工具(可永久免费使用)
1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件，免费下载安装，简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取
2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)
1.1部署流程
1.2 哇~ 部署成功
哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~
三、前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~
四、❉ 源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉ 1.看到这里了就 [点赞+好评+收藏] 三连~ 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉ 3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、❉更多表白源码
❤100款表白源码演示地址
抖音超火JavaScript实现网红太空人表盘 ~看程序员是如何用代码做华为太空手表相关推荐
- 太空人时间HTML,基于JavaScript实现网红太空人表盘的完整代码
一.效果展示 用javascript写的一个太空人表盘. 二.源代码 html代码 太空人表盘 function WatchMeter() { // 初始化dom this._initDom() // ...
- 基于JavaScript实现网红太空人表盘
一.效果展示 用javascript写的一个太空人表盘.源码请从文章末尾获取下载 二.源代码 html代码 <html> <head><title>太空人表盘< ...
- 用JavaScript实现网红太空人表盘（绝对详细、绝对原创），附源码下载
引言:网上最近太空人表盘很火,之前看到有个兄弟用svg写的,但是我也不会这个啊,我就琢磨着用canvas写了一个,效果感觉还不错,拿出来大家唠唠! 效果图: 思路 分两个画布来绘制,画布1用来放置不动 ...
- 最近分享一款抖音上很火的七夕节程序员表白页面_html5七夕表白放烟花动画特效...
html5七夕表白放烟花动画特效 最近分享一款抖音上很火的七夕节程序员表白页面.小姐姐,我好喜欢你,你愿意做我女朋友吗? 表白成功触发烟花背景动画特效. 表白内容:有人说,人的一生会遇到2920万人, ...
- 最近分享一款抖音上很火的七夕节程序员表白页面_html5七夕表白放烟花动画特效
html5七夕表白放烟花动画特效 最近分享一款抖音上很火的七夕节程序员表白页面.小姐姐,我好喜欢你,你愿意做我女朋友吗? 表白成功触发烟花背景动画特效. 表白内容:有人说,人的一生会遇到2920万人, ...
- HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的)
HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的) 程序员给大家留下的印象往往是代码的机器,整天写代码-程序员不懂爱!其实这是对程序员一种片面的看法.程序员固然 ...
- HTML5七夕情人节表白网页抖音超火的樱花雨3D相册 HTML+CSS+JavaScript
HTML5七夕情人节表白网页????抖音超火的樱花雨3D相册???? HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱 ...
- HTML5七夕情人节表白网页(抖音超火3D炫酷魔方) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音超火❤3D炫酷魔方❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序 ...
- HTML+CSS+JavaScript 制作抖音超火圣诞树
HTML+CSS+JavaScript 制作抖音超火-圣诞树 视频演示 圣诞树代码 效果图 HTML <body marginwidth="0" marginheight=& ...
- 抖音怎么上热门网红 修改视频md5
抖音怎么上热门网红 修改视频md5 百度搜索"抖音隐私"相关搜索,好在目前抖音已经加大对海外版内容的规范,积极同当地相关部门沟通合作,以确保自 ...
最新文章
- 数字信号处理中的归一化频率
- centos7安装tomcat_手把手教你，使用 Nginx 搭配 Tomcat 实现负载均衡!
- oracle银行卡号检查约束,oracle约束学习（1）unique和check
- Linux信号处理机制
- mysql key_mysql 索引 key 的用法
- 存储器空间或者桌面堆_向爱因斯坦学习桌面管理之道
- admin- 源码解析（流程）
- Android自定义view之measure、layout、draw三大流程
- 小程序模拟服务器,小程序模拟请求服务器json数据
- python一般用什么平台好_python哪几个平台好用
- Windows API 获取所有进程音量并调节
- 上帝永远不会问你的十件事
- input隐藏域赋值数组，node获取val的值
- load语句报分区could not be cleaned up
- 系统服务（daemon）
- 捋一捋Unified Language Model Pre-training for Natural Language Understanding and Generation
- ZYNQ仿真器当做串口使用
- mvp关联activity生命周期_极简SaaS创业手册一文读懂SaaS全生命周期阶段
- ThinkPHP3.2.3 实现微信小程序微信授权登录
- qlv视频格式怎么转换成常用的mp4格式