抖音超火JavaScript实现网红太空人表盘 ~看程序员是如何用代码做华为太空手表

❉ 用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=high
        let wh=document.getElementById("weather");     //获取准备用来保存天气类型的标签
        wh.innerText=weather
        var 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款表白源码演示地址​​