HTML+CSS+JS华为手机太空人

最新推荐文章于 2023-10-19 19:02:31 发布
最新推荐文章于 2023-10-19 19:02:31 发布
阅读量118 收藏
点赞数
分类专栏： 太空人 文章标签： html css javascript html5 css3 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aike420/article/details/132791667
版权

今天来点不一样的东西吧，一起实现华为手机太空人效果😁

先看看完成后的效果图

实现此效果就用上了前端三件套

  • 首先我们用HTML来写出主题部分吧
<!--index.html-->

 <div class="box">
        <!-- 头部 -->
        <div class="top">
            <div class="top_left">
                <div class="huojian">
                    <img src="./img/火箭.png" alt="">
                </div>
                <span><img src="./img/电池.png" alt="" class="dianchi"> </span>
                <span class="battary"></span>
            </div>
            <div class="top_right">
                <p class="diqu" style="font-family: '微软雅黑';white-space: nowrap;"></p>
                <div class="tq_box">
                    <div class="tianqi">
                        <p id="weather"></p>
                        <p style="white-space: nowrap;"> <span id="giradus"></span> ℃</p>
                    </div>
                    <div class="sxw">
                        <p> <span id="up"></span> <span>℃</span> <img src="./img/上午.png" alt=""></p>
                        <p> <span id="down"></span> <span>℃</span> <img src="./img/下午.png" alt=""></p>
                    </div>
                </div>
                <img src="./img/太阳.png" alt="" class="sky">
            </div>

        </div>
        <!-- 中 -->
        <div class="center">
            <div class="dian_tan">
                <span class="zhuangtai">充电器已插入</span><br>
                <span>当前电量: <span class="toksani">电量</span></span>
            </div>
            <div class="time">
                <span class="hour">小时</span>
                <span>:</span>
                <span class="menute">分</span>
                <span class="secode">秒</span>
            </div>
            <div class="tian">
                <span class="mounth">月</span>
                <span>-</span>
                <span class="day">天</span>
                <span class="zhou">周</span>
            </div>
            <div class="nong">
                <span class="nongli">壬寅十月</span>
            </div>
            <div class="pic">
                <img src="./img/太空人.gif" alt="">
            </div>
            <span class="xintiao">80 - 128</span>
            <span class="xin"><img src="./img/心跳.png" alt="">85</span>
            <span class="jiao"><img src="./img/鞋.png" alt="">8948</span>

        </div>

        <!-- 底 -->
        <div class="foot">
            <img src="./img/200w.webp" alt="" class="kaishi">
            <div class="shu_tan">
                <input type="number" class="shu">
                <div class="shu_an">
                    <span class="shu_guan">X</span>
                    <button class="sub" style="background-color: rgb(253, 253, 253);color: black;">清除</button>
                    <button class="go" style="background-color: rgb(25, 57, 173);">开始</button>
                </div>
            </div>
            <div class="foot_top">
                <div class="shui">
                    <span style="font-family: '宋体';">睡眠</span>
                    <span>7h30m</span>
                </div>
                <div class="juli">
                    <span class="qianmi_an" style="font-family: '宋体';">路程</span>
                </div>
            </div>
            <div class="asti" style="white-space: nowrap;text-overflow: ellipsis;">
                <span class="qianmi">00.0</span>Km
            </div>

        </div>
    </div>
  • 然后用CSS装修一下
/* index.css */

p {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: UniDreamLED;
    src: url(./ziti/电子表字体.ttf);
}

body {
    background-color: rgb(0, 0, 0);
}

.box {
    width: 350px;
    height: 350px;
    border: 20px solid #333;
    margin: 100px auto;
    border-radius: 50%;
    overflow: hidden;
    background-color: #000000;
    color: pink;
    font-family: UniDreamLED;
    box-shadow: 0 0 6px 0px white;

}

.top {
    height: 100px;
    width: 350px;
    border-bottom: 1px solid pink;
    display: flex;
}




.top_left {
    position: relative;
    width: 150px;
    height: 100%;
    border-right: 1px solid pink;
    overflow: hidden;
}


.top_right {
    position: relative;
    width: 200px;
    height: 100%;
    /* background-color: red; */

}

.top_right p {
    margin-left: 12px;
    margin-top: 9px;
}

.tq_box {
    display: flex;
}

.tianqi {
    width: 45px;
}

.tianqi p {
    margin-top: 10px;
}

.sky {
    position: absolute;
    right: 22%;
    bottom: 6px;
    width: 40px;
    height: 40px;
    animation: sky 5s infinite linear;
    /* transition: all 1s; */
}

.sxw img {
    width: 22px;
    height: 22px;
    vertical-align: middle;
}

.huojian img {
    width: 45px;
    height: 45px;
    position: absolute;
    right: -20%;
    top: 56px;
    animation: huoj 0.8s linear forwards;
    /* z-index: -1; */
}

.top_left span {
    position: absolute;
    font-size: 35px;
    right: 9%;
    bottom: 0;
    font-family: UniDreamLED;
}

.top_left span img {
    width: 30px;
    height: 30px;
    margin-left: -103px;
    margin-bottom: -5px;
    /* display: none; */
}

.ba {
    opacity: 1;
    transition: all 0.7s;
}

.yok {
    opacity: 0;
    transition: all 0.7s;
}

.center {
    height: 150px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.dian_tan {
    width: 200px;
    height: 100px;
    background-color: rgb(12, 12, 12);
    position: absolute;
    right: 50%;
    margin-right: -100px;
    bottom: 40px;
    z-index: 999999;
    border-radius: 5px;
    border-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    box-shadow: 0 0 6px 0px white;
    display: none;
    transition: all 1s;
    color: white;
}

.dian_tan span {
    display: inline-block;
    margin-top: 10px;
    font-size: 20px;
    letter-spacing: 2px;
   
    font-weight: 600;
}

.time {
    width: 100%;
    height: 55px;
    text-align: center;
    margin-top: 7px;
    letter-spacing: 3px;
    position: relative;
    z-index: 999;
}

.time span {
    font-size: 55px;
    line-height: 45px;
    font-family: UniDreamLED;


}

.tian {
    position: absolute;
    right: 3%;
    top: 55px;
    letter-spacing: 1px;
    z-index: 8;

}

.zhou {
    font-size: 15px;
    font-family: '微软雅黑';
}

.nongli {
    position: absolute;
    right: 5%;
    margin-top: 15px;
    font-size: 15px;
    font-family: '微软雅黑';
    letter-spacing: 1px;
}

.secode {
    position: absolute;
    right: 18%;
    top: 3px;
    font-size: 40px !important;
}

.pic img {
    position: absolute;
    bottom: -100px;
    width: 120px;
    height: 120px;
    left: 50%;
    margin-left: -20px;
    animation: taikong 1.5s forwards;
    z-index: 1 !important;
}

.xin {
    position: absolute;
    bottom: 7px;
    left: 10%;
    font-size: 20px;
    letter-spacing: 2px;
}

.xintiao {
    position: absolute;
    bottom: 29px;
    left: 6%;
    font-size: 20px;
    letter-spacing: 1px;
}

.xin img,
.jiao img {
    width: 17px;
    height: 17px;
    /* vertical-align: middle; */
    margin-bottom: -2px;
    animation: xin 2s linear infinite;
    margin-right: 8px;

}

.jiao {
    position: absolute;
    bottom: 7px;
    right: 8%;
    z-index: 2;
    font-size: 20px;
    letter-spacing: 2px;
}

.jiao img {
    width: 17px;
    height: 17px;
}

.foot {
    height: 100px;
    width: 100%;
    position: relative;
    border-top: 1px solid pink;
    /* overflow: hidden; */
}

.foot_top {
    width: 100%;
    height: 50px;
    display: flex;
}

.shui {
    width: 71.5%;
    height: 100%;
    border-right: 1px solid pink;
    text-align: center;
    font-weight: bold;
    font-size: 28px;
}

.shui span {
    display: inline-block;
    margin: 8px 0 0 8px;
    /* font-family: '微软雅黑'; */
    letter-spacing: 3px;
}

.juli {
    width: 28.5%;
    height: 100%;

}

.juli span {
    display: inline-block;
    margin: 10px 9px 0;
    font-size: 22px;
    font-family: '微软雅黑';
    letter-spacing: 3px;
    font-weight: 400;
    cursor: pointer;
}

.asti {
    height: 50px;
    width: 150px;
    margin: auto;
    border-top: 1px solid pink;
    border-left: 1px solid pink;
    font-size: 30px;
    /* font-family: '微软雅黑'; */
    letter-spacing: 2px;
    text-align: center;
}

.asti span {
    display: inline-block;
    margin-top: 5px;

}

.shu_tan {
    position: absolute;
    width: 200px;
    height: 100px;
    background-color: rgb(0, 0, 0);
    left: 50%;
    margin-left: -100px;
    text-align: center;
    top: -30px;
    z-index: 10;
    border-radius: 8px;
    display: none;
    box-shadow: 0 0 6px 0px white;
}

.shu_tan input {
    width: 170px;
    outline: none;
    border: none;
    border-radius: 2px;
    margin-top: 15px;
    background-color: rgba(20, 19, 19, 0.52);
    font-size: 15px;
    text-align: center;
    font-family: UniDreamLED;
    color: #fff;
}

.shu_an {
    margin-top: 6px;
}

.shu_an button {
    border: none;
    margin: 0 10px 0;
    margin-top: 20px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 8px;
    padding: 5px 10px;
    color: #fff;
    cursor: pointer;
}


.shu_an span {
    position: absolute;
    color: red;
    top: -2px;
    right: 1.5%;
    cursor: pointer;
    font-size: 15px;
    margin:2px 5px;
}

.kaishi {
    position: absolute;
    width: 220px;
    top: -120px;
    right: 20%;
    z-index: 666;
    display: none;
}

@keyframes sky {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes xin {
    0% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(1.2);
    }

    100% {
        transform: scaleX(1);
    }
}

@keyframes taikong {
    0% {
        bottom: -100px;
    }

    100% {

        bottom: -2px;
        margin-left: -60px;
    }
}

@keyframes huoj {
    0% {
        z-index: 1;
    }

    100% {
        right: 0;
        top: 16px;
    }
}
  • 现在到了最关键，最让人心动的步骤就是写js逻辑代码，让我们的太空人灵活起来👻
//index.js

window.addEventListener('load', function () {

    // 获取对象
    var hour = document.querySelector('.hour');
    var menute = document.querySelector('.menute');
    var secode = document.querySelector('.secode');
    var mounth = document.querySelector('.mounth');
    var day = document.querySelector('.day');
    var zhou = document.querySelector('.zhou');
    var battary = document.querySelector('.battary');
    var dianchi = document.querySelector('.dianchi');
    var toksani = document.querySelector('.toksani');
    var zhuangtai = document.querySelector('.zhuangtai');
    var dian_tan = document.querySelector('.dian_tan');
    var qianmi_an = document.querySelector('.qianmi_an');
    var qianmi = document.querySelector('.qianmi');
    var shu_tan = document.querySelector('.shu_tan');
    var shu_guan = document.querySelector('.shu_guan');
    var sub = document.querySelector('.sub');
    var go = document.querySelector('.go');
    var kaishi = document.querySelector('.kaishi');
    var shu = document.querySelector('.shu');
    var diqu = document.querySelector('.diqu');
    var weather = document.querySelector('#weather');
    var giradus = document.querySelector('#giradus');
    var up = document.querySelector('#up');
    var down = document.querySelector('#down');

    var url = 'https://restapi.amap.com/v3/weather/weatherInfo';
    var params = {
      city: '653101',
      key: 'c0f481df7c9ae27fe9766bbfea1bcc67',
      extensions: 'all'
    };
    
    // 将参数拼接到 URL 中
    var query = Object.keys(params).map(key => key + '=' + params[key]).join('&');
    url = url + '?' + query;
    
    // 创建 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    
    // 监听请求完成事件
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 400) {
        var data = JSON.parse(xhr.responseText);
    
        // 在这里可以根据需求处理返回的天气数据

        diqu.innerHTML=data.forecasts[0].city
        let list=data.forecasts[0].casts[0];
        weather.innerText=list.dayweather
        giradus.innerHTML=list.daytemp
        down.innerHTML=list.nighttemp
        up.innerHTML=list.daytemp

      } else {
        console.error('请求失败：', xhr.status);
      }
    };
    
    // 发送请求
    xhr.send();
    






    qianmi_an.addEventListener('click', function () {
        shu_tan.style.display = 'block';
    });
    sub.addEventListener('click', function () {
        shu.value = '';
    });
    go.addEventListener('click', function () {
        if (shu.value == '') {
            return alert("输入距离");
        } else {
            shu_tan.style.display = 'none';
            kaishi.style.display = 'block';
            setTimeout(function () {
                kaishi.style.display = 'none';
            }, 1600);
            qianmi.innerHTML = shu.value;
        }
    });
    shu_guan.addEventListener('click', function () {
        shu_tan.style.display = 'none';
    })


    wakit()
    setInterval(wakit, 1000);
    function wakit() {
        var times = new Date();

        var ay = times.getMonth() + 1;
        ay = ay < 10 ? '0' + ay : ay;
        mounth.innerHTML = ay;

        var dd = times.getDate();
        dd = dd < 10 ? '0' + dd : dd;
        day.innerHTML = dd;

        if (times.getDay() == 0) zhou.innerHTML = "周日";
        if (times.getDay() == 1) zhou.innerHTML = "周一";
        if (times.getDay() == 2) zhou.innerHTML = "周二";
        if (times.getDay() == 3) zhou.innerHTML = "周三";
        if (times.getDay() == 4) zhou.innerHTML = "周四";
        if (times.getDay() == 5) zhou.innerHTML = "周五";
        if (times.getDay() == 6) zhou.innerHTML = "周六";

        var h = times.getHours();
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h;

        var m = times.getMinutes();
        m = m < 10 ? '0' + m : m;
        menute.innerHTML = m;

        var s = times.getSeconds();
        s = s < 10 ? '0' + s : s;
        secode.innerHTML = s;
    }

    navigator.getBattery().then(function (battery) {
        var kai = function () {
            dian_tan.style.display = 'block';
            zhuangtai.innerHTML = '充电器已插入';
            toksani.innerHTML = battery.level * 100 + "%";
        }
        var guan = function () {
            dian_tan.style.display = 'none';
        }
        var ba = function () {
            dian_tan.style.display = 'block';
            zhuangtai.innerHTML = '充电器已拔出';
            toksani.innerHTML = battery.level * 100 + "%";
        }
        // 是否正在充电
        "Battery charging? " + (battery.charging ? dianchi.className = '' : dianchi.className = 'yok');
        "Battery charging? " + (battery.charging ? setTimeout(kai, 500) : '');
        "Battery charging? " + (battery.charging ? setTimeout(guan, 2000) : setTimeout(guan, 2000));
        // // 当前剩余电量
        battary.innerHTML = + battery.level * 100 + "%";

        battery.addEventListener("chargingchange", function () {
            "Battery charging? " + (battery.charging ? dianchi.className = 'ba' : dianchi.className = 'yok');
            "Battery charging? " + (battery.charging ? setTimeout(kai, 500) : setTimeout(ba, 500));
            "Battery charging? " + (battary.charging ? setTimeout(guan,2000):setTimeout(guan,2000))
        });
    });

})

好了一款简单好看的太空人就搞出来了，希望你们喜欢😎

console.aike
关注
专栏目录
html5 华为 手表 太空人主题 源码
02-15
html5 华为 手表 太空人主题 源码
大二学生《web课程设计》中华英雄人物介绍袁隆平HTML+CSS+JavaScript(期末考核大作业)
qq_38514511的博客
03-26 272
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
致敬页：通过HTML+CSS制作致敬页，致敬袁老先生
VirusScanLog的博客
05-05 742
致敬页 通过 HTML+CSS 制作致敬页，致敬袁老先生！
javascript网页二次元3D小人详细教程
AK Zzz的博客
11-19 2702
javascript二次元卡通网页小人
HTML5与CSS3网页制作
Ghlys的博客
12-28 3198
html5与css3网页制作教程笔记
仿华为商城部分前端界面html+css+js
06-28
在本项目"仿华为商城部分前端界面html+css+js"中，我们主要探讨的是如何利用Web前端技术来构建一个类似华为商城的电子商务网站的用户界面。这个项目着重于实现HTML结构、CSS样式以及JavaScript交互功能，从而为用户...
html+css+js网页设计 华为商城10个页面
最新发布
08-14
预览地址：https://blog.csdn.net/qq_42431718/article/details/141189203 html+css+js网页设计 华为商城10个页面
基于html+css+js实现的模仿华为商城静态网页源码+项目说明（附静态网页效果链接）.zip
12-17
基于html+css+js实现的模仿华为商城静态网页源码+项目说明（附静态网页效果链接）.zip 课程作业 静态网页设计实现 模仿华为商城静态网页源码 附静态网页效果链接 项目说明 html+css+js实现 基于html+css+js实现的...
html+css1仿华为太空人表盘
02-11
【HTML+CSS1仿华为太空人表盘】项目是一个典型的前端网页开发实例，主要利用HTML结构和CSS样式来实现对华为太空人表盘的模拟。在这个项目中，开发者需要掌握和应用一系列HTML和CSS的核心技术。 首先，HTML...
HTML+CSS+JS模仿华为商城首页
06-12
（2）在JS从json获取数据用for循环展示商品列表（原生创建元素写法） （3）在JS从json获取数据用for循环展示商品列表（InnerHTML写法） （4）用户点击商品优惠关键词，商品过滤筛选展示 （5）用户点击商品排序关键词...
html5 svg太空人404动画模板特效代码
03-20
html5 svg太空人404动画模板是一款网站常用的404页面模板下载。
html代码_星空、机器人、贪吃蛇、花瓣.rar
12-18
后缀名为HTML的一些代码，有四个，打开就可以用。 分别是星空，机器人，贪吃蛇，花瓣。
网红华为太空手表太空人表盘代码HTML5编写
03-24
网红华为太空手表太空人表盘代码编写的太空人
HTML5太空黑洞动画代码.zip
05-30
是现代广义相对论中，宇宙空间内存在的一种天体。黑洞的引力很大，使得视界内的逃逸速度大于光速。“黑洞是时空曲率大到光都无法从其事件视界逃脱的天体”，因此前端动态黑洞，你值得拥有
html5 svg太空人404动画模板.zip
07-04
html5 svg太空人404动画模板是一款网站常用的404页面模板下载。
2023 华为太空人表盘GT2 HTML源码
senteym的博客
10-19 123
基于SVG+JavaScript实现网红华为太空人表盘GT2。文件全部本地化不用在担心文件失效。2023 华为太空人表盘GT2 HTML源码。
防华为手表太空人主题界面 | html5 代码实现
洛阳泰山的博客
02-15 1496
HTML、CSS和JavaScript是构建现代网页的核心技术，它们相互配合，共同实现了网页的结构、样式和交互行为。下面将详细解释每种技术的特点和用法。
太空人表盘 html
03-25
用html写了一个最近挺火的太空人表盘
最近很火的太空人源码-哈哈哈
03-26
太空人
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

console.aike

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值