• 基于Echarts实现可视化数据大屏产业大数据指挥舱系统

    前言

    🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。

    本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

    ⚽精彩专栏推荐👇🏻👇🏻👇🏻

    ❤ 【作者主页——🔥获取更多优质源码】

    ❤ 【1000套 毕设项目精品实战案例】

    ❤ 【 20套 VUE+Echarts 大数据可视化源码】

    ❤ 【150套 HTML+ Echarts大数据可视化源码 】

    文章目录

    一、Echart是什么

    ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

    二、ECharts入门教程

    5 分钟上手ECharts

    三、作品演示

    在这里插入图片描述

    四、代码实现

    1.HTML

    
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>监测指挥舱title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/new_index.css">
head>
<style>
    /* ---public---- */

    .centerBox {
        width: 75%;
        margin-right: 15px;
        background: transparent;
    }

    .boxFont {
        font-size: 1.2vw;
    }

    .centerMainBox1 {
        width: 100%;
        height: 60.5%;
    }

    .centerMainBox2 {
        width: 100%;
        height: 38%;
        position: relative;
        margin-top: 15px;
    }

    .centerMainBox2 .first_border {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .boxTitle2 {
        width: 100%;
        height: 10%;
        font-size: .6vw;
        text-align: center;
        line-height: 10%;
        margin-top: 1vw;
        color: #0efcff;
    }

    .contList {
        position: relative;
        width: 70%;
        height: 8vw;
        margin: 1vw auto 0;
    }

    .content1 li {
        display: none;
    }

    .baseBox {
        width: 100%;
        border: none;
        background: none;
    }

    .boxTitle {
        font-size: .8vw;
        width: 38%;
        margin-top: 1vw;
        text-align: center;
    }

    .right {
        float: right;
    }

    .baseBoxLeft {
        width: 30%;
        height: 95%;
        position: relative;
    }

    .baseBoxRight {
        width: 68%;
        height: 100%;
    }

    .baseBoxLeft .first_border {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .baseBox1,
    .baseBox2,
    .baseBox3 {
        position: relative;
    }

    .baseBox1 .hardware,
    .baseBox2 img,
    .baseBox3 img {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .csbaseBox1 {
        position: relative;
        z-index: 999;
    }

    #canvas {
        display: block;
        margin: 0 auto;
        width: 10vw;
        height: 5vw;
    }

    .progress {
        position: relative;
    }

    .progress img {
        width: 12.5vw;
        height: 2vw;
        position: absolute;
        top: .4vw;
        right: -.2vw;
    }

    .progress .disease {
        position: absolute;
        top: .7vw;
        left: .5vw;
        color: #fff;
        font-size: .8vw;
    }

    .progress .similar {
        position: absolute;
        top: .8vw;
        left: 3vw;
        color: #0efcff;
        font-size: .5vw;
    }

    /* 返回图标 */

    .navLeft {
        position: absolute;
        top: 5%;
        left: 35%;
        width: 3.5%;
        height: 8%;
        z-index: 999;
    }

    .navLeft>img {
        width: 100%;
        height: 100%;
    }
style>

<body>
    <div class="main">
        <div class="nav">XXXXX产业大数据指挥舱div>
        <div class="nav_btn">
            <div class="btn_left">
                <a href="#">
                    <div class="btn_list listActive">主页div>
                a>
                <a href="#">
                    <div class="btn_list">土地流转div>
                a>
                <a href="#">
                    <div class="btn_list">空天地div>
                a>
                <a href="#">
                    <div class="btn_list">生长监测div>
                a>
            div>
            <div class="btn_right">
                <a href="#">
                    <div class="btn_list">生产加工div>
                a>
                <a href="#">
                    <div class="btn_list">仓储管理div>
                a>
                <a href="#">
                    <div class="btn_list">流通销售div>
                a>
                <a href="#">
                    <div class="btn_list">数据中心div>
                a>
            div>
        div>
        <div class="content">
            <div class="centerBox">
                <div class="baseBox centerMainBox1" style="height:70%">
                    <div class="baseBoxLeft left">
                        <div class="boxTitle">茶叶病虫害预警div>
                        <img src="./img/left.png" class="first_border" alt="">
                        <div class="firstBox">
                            <div class="pic">
                                <img src="img/demo_pic.png" class="first_top1" alt="">
                                <img src="img/data_pic.png" class="first_top2" alt="">
                            div>
                            <div class="picText">
                                <span>样本图片span>
                                <span class="text_second">茶叶病虫害大数据库span>
                            div>
                            <div class="voice_animation">
                                <canvas id="canvas">Your browser can not support canvascanvas>
                            div>
                            <div class="progress">
                                <span class="disease">茶饼病span>

                                <span class="similar">相似度:85%span>
                                <img src="./img/progress.gif" alt="">
                            div>
                            <div class="about_illness">
                                <div class="symptom">
                                    <div class="symptom_title">病症症状div>
                                    <div class="symptom_content">如需合作，请联系qq:863512936
                                    div>
                                div>
                                <div class="prevent">
                                    <div class="prevent_title">防治方法div>
                                    <div class="prevent_content">
                                        1.如需合作，请联系qq:863512936 2.如需商用，请联系qq:863512936
                                    div>
                                div>
                            div>
                        div>
                    div>
                    <div class="baseBoxRight right">
                        <a class="navLeft" href="#"><img style="" src="./img/fanhui.png" alt="">a>

                        <div class="maps">
                            <img class="land_level" src="img/landLevel.png" alt="">
                            <img class="wifi_gif" src="img/wifi.gif">img>
                            <img class="sun_pic" src="img/sun.png" alt="">
                            <img class="wrj_pic" src="img/wrj.png" alt="">
                            <img class="wind_gif" src="img/wind_shape.gif" alt="">
                            <img class="plant_pic display_box" src="img/plant.png" alt="">
                            <div class="windows display_box">
                                <ul>
                                    <li>土地信息li>
                                    <li>如需商用：li>
                                    <li>qq：863512936li>
                                    <li>如需合作：li>
                                    <li>qq：863512936li>
                                    <li>qq：863512936li>
                                ul>
                            div>
                            <div class="window_two display_box">
                                <ul>
                                    <li>刘新武li>
                                    <li>年龄：41岁li>
                                    <li>农事活动：6次li>
                                    <li>信用等级：良好li>
                                ul>
                            div>
                            <div class="window_three display_box">
                                <ul>
                                    <li>土壤数据li>
                                    <li>湿度:63%li>
                                    <li>酸碱度：PH4.8li>
                                    <li>肥沃度：56%li>
                                ul>
                            div>
                            <div class="window_four display_box">
                                <ul>
                                    <li>气象信息li>
                                    <li>温度:19℃li>
                                    <li>湿度：52%li>
                                    <li>风速：2m/sli>
                                    <li>降水：0mmli>
                                ul>
                            div>
                            <div class="window_five display_box">
                                <ul>
                                    <li>植被信息li>
                                    <li>品种名称:云台山大叶良种li>
                                    <li>植株数量：76000株li>
                                    <li>所属生长周期：幼年期li>
                                    <li>长势情况：良好li>
                                ul>
                            div>
                            <div class="window_six display_box">
                                <ul>
                                    <li>设备信息li>
                                    <li>设备名称:无人机li>
                                    <li>所属人：安化云台八角有限公司li>
                                    <li>持续工作：3hli>
                                    <li>连接状态：正常li>
                                ul>
                            div>
                            <a href="#">
                                <div class="peasant">div>
                            a>
                            <div class="land_box1">div>
                            <div class="land_box2">div>
                            <div class="land_box3">div>
                            <div class="land_box4">div>
                            <div class="plant">div>
                            <div class="soil_data">div>
                            <div class="weather_info">div>

                        div>
                    div>
                div>

                <div class="baseBox centerMainBox2" style="height:30%;">
                    <img src="./img/down2.png" class="first_border" alt="">
                    <div class="boxTitle2" style="width:26%;">统计数据div>
                    <div class="boxTitle2" style="width:26%;margin-left:22vw;margin-top: -1.4vw;">生长数据div>
                    <div class="boxTitle2" style="width:26%;margin-left:53vw;margin-top: -1.4vw;">气象数据div>
                    <div class="leftBottom">
                        <div class="land_data">
                            <p>10cm 温度30湿度67p>
                            <p>20cm 温度30湿度67p>
                            <p>30cm 温度30湿度67p>
                        div>
                    div>
                    <div class="right_box">
                        <div class="grow_data">
                            <img src="img/tree_pic.png" alt="">
                            <p>生长周期：8周p>
                            <p>黏土p>
                            <p>10cm茶土：22.88p>
                            <span>未来5天降水量：0mmspan>
                            <i>i>
                            <div class="specialistSuggest">
                                <div>专家建议：div>
                                <div>如需商用，请联系qq:863512936div>
                            div>
                            <div class="fertilizationSuggest">
                                <div>该生长周期施肥建议：div>
                                <div>氮肥含量：1.3-1.5kgdiv>
                                <div>钾肥含量：1.5-1.7kgdiv>
                            div>
                        div>
                        <div class="weather_data">
                            <div class="weather_text text_one">
                                <span>温度：19℃span>
                                <span>湿度：52%span>
                                <span>风向：东南风span>
                                <span>风速：2m/sspan>
                            div>
                            <div class="weather_text text_two">
                                <span>降雨量：0mmspan>
                                <span>蒸发量：0.326mm/hspan>
                                <span>气压：0.326MPaspan>
                            div>
                        div>
                    div>
                div>
            div>
            <div class="leftBox right" style="width:22%">
                <div class="baseBox baseBox1" style="margin-bottom:15px;height:40%">
                    <img src="./img/right.png" class="hardware" alt="">
                    <div class="csbaseBox1">
                        <div class="boxTitle">硬件设备展示div>
                        <ul class="boxLis">
                            <li class="left active">农业无人机li>
                            <li class="left">田间控制器li>
                            <li class="left">监控摄像头li>
                            <li class="left">土壤检测仪li>
                        ul>
                        <div class="content1">
                            <ul>
                                <li style="display: block;" class="contList">

                                    <div class="leftTopLine1">div>
                                    <div class="leftTopLine2">div>
                                    <div class="rightTopLine1">div>
                                    <div class="rightTopLine2">div>
                                    <div class="leftBottomLine1">div>
                                    <div class="leftBottomLine2">div>
                                    <div class="rightBottomLine1">div>
                                    <div class="rightBottomLine2">div>
                                    <div class="equipment_pic">
                                        <img class="first" src="img/uva.png" alt="">
                                        <img class="second" src="img/control.png" alt="">
                                        <img class="third" src="img/camera.png" alt="">
                                        <img class="fourth" src="img/detector.png" alt="">
                                    div>
                                li>
                            ul>
                        div>
                        <div class="liSpan">介绍div>
                        <p class="liP">
                            如需商用，请联系qq:863512936p>
                    div>
                div>
                <div class="baseBox baseBox2" style="margin-bottom:15px;height:29.5%">
                    <img src="./img/right2.png" alt="">

                    <div class="boxTitle2">灌溉数据div>
                    <div class="irrigate_data">
                        <div class="irrigate_top">
                            <div class="centerList">
                                <div class="centerListFont">累计灌溉水量（m2）div>
                                <div class="centerListNum">
                                    <span class="">23678span>
                                div>
                            div>
                            <div class="centerList">
                                <div class="centerListFont">灌溉压力（MPa）div>
                                <div class="centerListNum">
                                    <span class="">0.29span>
                                div>
                            div>
                        div>
                        <div class="irrigate_bottom">
                            <div class="every_line">
                                <span>当前灌溉流量（m²/h）span>
                                <i class="">0.78i>
                            div>
                            <div class="every_line">
                                <span>当前灌溉阀门数量span>
                                <i class="counter-value">49i>
                                <i class="counter-value">2i>
                            div>
                            <div class="every_line">
                                <span>茶园水池液位span>
                                <i>2.30i>
                            div>
                        div>
                    div>
                div>
                <div class="baseBox baseBox3" style="height:28%">
                    <img src="./img/right3.png" alt="">

                    <div class="boxTitle2">数据日志div>

                    <div class="data_day" id="demo" style="width:100%;overflow:hidden;height: 75%;">
                        <table style="text-align: left;margin-left:10%;height:80%;">
                            <tbody id="demo1">

                                <tr>
                                    <td>u78td>
                                    <td>传感器数据td>
                                    <td>163.28td>
                                    <td>2019年10月26日td>
                                tr>
                                <tr>
                                    <td>006td>
                                    <td>无人机数据td>
                                    <td>130.67td>
                                    <td>2019年10月25日td>
                                tr>
                                <tr>
                                    <td>s07td>
                                    <td>控制器数据td>
                                    <td>163.28td>
                                    <td>2019年10月25日td>
                                tr>
                                <tr>
                                    <td>872td>
                                    <td>监视器数据td>
                                    <td>130.67td>
                                    <td>2019年10月24日td>
                                tr>
                                <tr>
                                    <td>d59td>
                                    <td>土壤仪数据td>
                                    <td>163.28td>
                                    <td>2019年10月23日td>
                                tr>
                                <tr>
                                    <td>299td>
                                    <td>灌溉阀数据td>
                                    <td>130.67td>
                                    <td>2019年10月23日td>
                                tr>
                                <tr>
                                    <td>256td>
                                    <td>传感器数据td>
                                    <td>163.28td>
                                    <td>2019年10月22日td>
                                tr>
                                <tr>
                                    <td>026td>
                                    <td>无人机数据td>
                                    <td>130.67td>
                                    <td>2019年10月20日td>
                                tr>
                                <tr>
                                    <td>037td>
                                    <td>传感器数据td>
                                    <td>163.28td>
                                    <td>2019年10月22日td>
                                tr>
                            tbody>
                            <tbody id="demo2" style="text-align: left;margin-left:10%">tbody>
                        table>
                    div>
                div>
            div>
        div>
    div>
body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js">script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js">script>
<script src="js/dataScoll.js">script>

<script language="javascript" type="text/javascript">
    var demo = document.getElementById("demo");
    var demo1 = document.getElementById("demo1");
    var demo2 = document.getElementById("demo2");
    var speed = 15; //滚动速度值，值越大速度越慢
    demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1
    function Marquee() {
        if (demo2.offsetTop - demo.scrollTop <= 45) {
            // console.log('77777')  //当滚动至demo1与demo2交界时
            demo.scrollTop -= demo1.offsetHeight //demo跳到最顶端
        } else {
            //console.log('88888')
            demo.scrollTop++
        }
    }
    var MyMar = setInterval(Marquee, speed); //设置定时器
    demo.onmouseover = function() {
        clearInterval(MyMar)
    } //鼠标经过时清除定时器达到滚动停止的目的
    demo.onmouseout = function() {
        MyMar = setInterval(Marquee, speed)
    } //鼠标移开时重设定时器
script>

<script>
    var doublePI = Math.PI * 2;
    var canvas;
    var ctx;

    //画布的高度的一半
    var halfCanvasHeight = 100;
    //水平边距
    var horizontalMargin = 150;

    //衰减系数(越大, 边缘衰减的就越多, 震动宽度相应也越窄)
    var attenuationCoefficient = 2;
    //半波长个数-1
    var halfWaveCount = 20;
    //振幅是画布高度的一般的百分比[0,1]
    var amplitudePercentage = 0.3;
    //每帧增加的弧度[0,2PI](作用于sin曲线, 正值相当于原点右移, 曲线左移)
    var radianStep = 0.4;

    //当前弧度的偏移
    var radianOffset = 0;
    //画布宽度
    var canvasWidth;

    function init() {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        window.addEventListener("resize", onResize);

        canvas.height = halfCanvasHeight * 2;
        onResize();
        loop();
    }

    function onResize() {
        //元素的大小不能加单位, 单位默认就是像素, 而style中的长度要加单位
        canvasWidth = canvas.width = window.innerWidth - horizontalMargin;
    }

    //设K=attenuationCoefficient, 计算信号衰减 (4K/(4K+x^4))^2K<=1 (x belong [-K,K])
    function calcAttenuation(x) {
        return Math.pow(4 * attenuationCoefficient / (4 * attenuationCoefficient + Math.pow(x, 4)), 2 * attenuationCoefficient);
    }

    //heightPercentage为振幅的显示比例
    function drawAcousticWave(heightPercentage, alpha, lineWidth) {
        ctx.strokeStyle = "white";
        ctx.globalAlpha = alpha;
        ctx.lineWidth = lineWidth || 1;
        ctx.beginPath();
        ctx.moveTo(0, halfCanvasHeight);
        var x, y;
        for (var i = -attenuationCoefficient; i <= attenuationCoefficient; i += 0.01) {
            //i是当前位置相对于整个长度的比率( x=width*(i+K)/(2*K))
            x = canvasWidth * (i + attenuationCoefficient) / (2 * attenuationCoefficient);
            //加offset相当于把sin曲线向右平移
            y = halfCanvasHeight + halfCanvasHeight * amplitudePercentage * calcAttenuation(i) * heightPercentage * Math.sin(halfWaveCount * i + radianOffset);
            ctx.lineTo(x, y);
        }
        ctx.stroke();
    }

    function loop() {
        radianOffset = (radianOffset + radianStep) % doublePI;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawAcousticWave(1, 1, 2);
        for (var i = 2; i < 4; i++) {
            var reciprocal = 1 / i;
            drawAcousticWave(reciprocal, reciprocal / 4);
            drawAcousticWave(-reciprocal, reciprocal / 4);
        }
        requestAnimationFrame(loop);
    }

    init();
    setInterval(function() {
        numInit();
    }, 6500)

    // mark center display
    $('.peasant').mouseenter(function() {
        console.log(111)
        console.log($('.window_two'))
        $('.window_two').removeClass('display_box')
    })
    $('.peasant').mouseout(function() {
        $('.window_two').addClass('display_box')
    })



    $('.land_box1').mouseenter(function() {
        console.log(15556)
        $('.windows').removeClass('display_box')
    })
    $('.land_box2').mouseenter(function() {
        console.log(15556)
        $('.windows').removeClass('display_box')
    })
    $('.land_box3').mouseenter(function() {
        console.log(15556)
        $('.windows').removeClass('display_box')
    })
    $('.land_box4').mouseenter(function() {
        console.log(15556)
        $('.windows').removeClass('display_box')
    })

    $('.land_box1').mouseout(function() {
        $('.windows').addClass('display_box')
    })
    $('.land_box2').mouseout(function() {
        $('.windows').addClass('display_box')
    })
    $('.land_box3').mouseout(function() {
        $('.windows').addClass('display_box')
    })
    $('.land_box4').mouseout(function() {
        $('.windows').addClass('display_box')
    })


    $('.plant').mouseenter(function() {
        $('.plant_pic').removeClass('display_box')
        $('.window_five').removeClass('display_box')
    })
    $('.plant').mouseout(function() {
        $('.plant_pic').addClass('display_box')
        $('.window_five').addClass('display_box')
    })

    $('.soil_data').mouseenter(function() {
        $('.window_three').removeClass('display_box')
    })
    $('.soil_data').mouseout(function() {
        $('.window_three').addClass('display_box')
    })

    $('.weather_info').mouseenter(function() {
        $('.window_four').removeClass('display_box')
    })
    $('.weather_info').mouseout(function() {
        $('.window_four').addClass('display_box')
    })

    $('.wrj_pic').mouseenter(function() {
        $('.window_six').removeClass('display_box')
    })
    $('.wrj_pic').mouseout(function() {
        $('.window_six').addClass('display_box')
    })



    $('.boxLis').on('mouseenter', 'li', function() {

        var that = $(this);

        that.addClass('active').siblings().removeClass('active');

        $('.equipment_pic img').hide();

        $('.equipment_pic img').eq(that.index()).show()


    })

    setInterval(function() {
        numInit();
        numInit1();
        numInit2();
    }, 6000)
script>

html>





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363
    • 364
    • 365
    • 366
    • 367
    • 368
    • 369
    • 370
    • 371
    • 372
    • 373
    • 374
    • 375
    • 376
    • 377
    • 378
    • 379
    • 380
    • 381
    • 382
    • 383
    • 384
    • 385
    • 386
    • 387
    • 388
    • 389
    • 390
    • 391
    • 392
    • 393
    • 394
    • 395
    • 396
    • 397
    • 398
    • 399
    • 400
    • 401
    • 402
    • 403
    • 404
    • 405
    • 406
    • 407
    • 408
    • 409
    • 410
    • 411
    • 412
    • 413
    • 414
    • 415
    • 416
    • 417
    • 418
    • 419
    • 420
    • 421
    • 422
    • 423
    • 424
    • 425
    • 426
    • 427
    • 428
    • 429
    • 430
    • 431
    • 432
    • 433
    • 434
    • 435
    • 436
    • 437
    • 438
    • 439
    • 440
    • 441
    • 442
    • 443
    • 444
    • 445
    • 446
    • 447
    • 448
    • 449
    • 450
    • 451
    • 452
    • 453
    • 454
    • 455
    • 456
    • 457
    • 458
    • 459
    • 460
    • 461
    • 462
    • 463
    • 464
    • 465
    • 466
    • 467
    • 468
    • 469
    • 470
    • 471
    • 472
    • 473
    • 474
    • 475
    • 476
    • 477
    • 478
    • 479
    • 480
    • 481
    • 482
    • 483
    • 484
    • 485
    • 486
    • 487
    • 488
    • 489
    • 490
    • 491
    • 492
    • 493
    • 494
    • 495
    • 496
    • 497
    • 498
    • 499
    • 500
    • 501
    • 502
    • 503
    • 504
    • 505
    • 506
    • 507
    • 508
    • 509
    • 510
    • 511
    • 512
    • 513
    • 514
    • 515
    • 516
    • 517
    • 518
    • 519
    • 520
    • 521
    • 522
    • 523
    • 524
    • 525
    • 526
    • 527
    • 528
    • 529
    • 530
    • 531
    • 532
    • 533
    • 534
    • 535
    • 536
    • 537
    • 538
    • 539
    • 540
    • 541
    • 542
    • 543
    • 544
    • 545
    • 546
    • 547
    • 548
    • 549
    • 550
    • 551
    • 552
    • 553
    • 554
    • 555
    • 556
    • 557
    • 558
    • 559
    • 560
    • 561
    • 562
    • 563
    • 564
    • 565
    • 566
    • 567
    • 568
    • 569
    • 570
    • 571
    • 572
    • 573
    • 574
    • 575
    • 576
    • 577
    • 578
    • 579
    • 580
    • 581
    • 582
    • 583
    • 584
    • 585
    • 586
    • 587
    • 588
    • 589
    • 590
    • 591
    • 592
    • 593
    • 594
    • 595
    • 596
    • 597
    • 598
    • 599
    • 600
    • 601
    • 602
    • 603
    • 604
    • 605
    • 606
    • 607
    • 608
    • 609
    • 610
    • 611
    • 612
    • 613
    • 614
    • 615
    • 616
    • 617
    • 618
    • 619
    • 620
    • 621
    • 622
    • 623
    • 624
    • 625
    • 626
    • 627
    • 628
    • 629
    • 630
    • 631
    • 632
    • 633
    • 634
    • 635
    • 636
    • 637
    • 638
    • 639
    • 640
    • 641
    • 642
    • 643
    • 644
    • 645
    • 646
    • 647
    • 648
    • 649
    • 650
    • 651
    • 652
    • 653
    • 654
    • 655
    • 656
    • 657
    • 658
    • 659
    • 660
    • 661
    • 662
    • 663
    • 664
    • 665
    • 666
    • 667
    • 668
    • 669
    • 670
    • 671
    • 672
    • 673
    • 674
    • 675
    • 676
    • 677
    • 678
    • 679
    • 680
    • 681
    • 682
    • 683
    • 684
    • 685
    • 686
    • 687
    • 688
    • 689
    • 690
    • 691
    • 692
    • 693
    • 694
    • 695
    • 696
    • 697
    • 698
    • 699
    • 700
    • 701
    • 702
    • 703
    • 704
    • 705
    • 706
    • 707
    • 708
    • 709
    • 710
    • 711
    • 712
    • 713
    • 714
    • 715
    • 716
    • 717
    • 718
    • 719

    2.CSS

    

html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
input,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
textarea,
article,
aside,
audio,
canvas,
figure,
footer,
header,
mark,
menu,
nav,
section,
time,
video {
    margin: 0;
    padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: 400
}

article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
blockquote {
    display: block
}

ul,
ol {
    list-style: none
}

img {
    border: 0;
    vertical-align: top
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

strong,
em,
i {
    font-style: normal;
    font-weight: 400
}

ins {
    text-decoration: underline
}

del {
    text-decoration: line-through
}

mark {
    background: 0 0
}

input::-ms-clear {
    display: none !important
}

body {
    font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif;
    background: #fff
}

a {
    text-decoration: none;
    color: #333
}

a:hover {
    text-decoration: underline
}

body,
html,
.main {
    width: 100%;
    height: 100%
}

.main {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #0d0e31
}

.nav {
    position: relative;
    top: .5vw;
    width: 100%;
    height: 5vw;
    background: url(../img/top.png) no-repeat;
    background-size: 100%;
    text-align: center;
    line-height: 4vw;
    color: #0efcff;
    font-size: 1.4vw;
    letter-spacing: .4vw
}

.nav_btn {
    position: absolute;
    top: 1.5vw;
    width: 100%;
    height: 2vw
}

.btn_left {
    float: left;
    width: 25%;
    margin-left: 5%;
    height: 100%
}

.btn_right {
    float: right;
    width: 25%;
    margin-right: 5%;
    height: 100%
}

.btn_list {
    position: relative;
    float: left;
    width: 5.5vw;
    height: 1.6vw;
    text-align: center;
    line-height: 1.6vw;
    font-size: .9vw;
    color: #0efcff;
    letter-spacing: .1vw;
    cursor: pointer
}

.btn_left a,
.btn_right a {
    display: inline-block
}

.btn_left a:nth-child(2) {
    margin: 0 .6vw
}

.btn_left a:nth-child(4) {
    margin-left: .6vw
}

.btn_right a:nth-child(2) {
    margin: 0 .6vw
}

.btn_right a:nth-child(4) {
    margin-left: .6vw
}

.btn_list:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #6176af;
    transform: skewX(-38deg)
}

.btn_list:hover::before {
    border-color: #0efcff;
    box-shadow: 1px 1px 3px 1px #0efcff inset
}

.listActive:before {
    border-color: #0efcff;
    box-shadow: 1px 1px 3px 1px #0efcff inset
}

.content {
    position: relative;
    width: 97%;
    height: 87%;
    margin: auto
}

.baseBox {
    position: relative;
    float: left;
    width: 48.8%;
    height: 32.3%;
    border: 1px solid #6176af;
    background: rgba(11, 21, 44, .6);
    border-radius: 5px
}

.baseHeightBox {
    height: 100%
}

.baseCenterBox {
    margin: 1.5% 0
}

.leftBox {
    float: left;
    height: 100%;
    width: 34.5%
}

.rightBox {
    float: left;
    height: 100%;
    width: 34.5%
}

.centerBox {
    position: relative;
    float: left;
    width: 30%;
    height: 100%;
    margin: 0 .5%
}

.marginLeft {
    margin-left: 1.5%
}

.leftTopLine1 {
    position: absolute;
    top: 0;
    left: -1px;
    height: 1vw;
    width: 2px;
    background: #0efcff
}

.leftTopLine2 {
    position: absolute;
    top: -1px;
    left: 0;
    height: 2px;
    width: 1vw;
    background: #0efcff
}

.rightTopLine1 {
    position: absolute;
    top: 0;
    right: -1px;
    height: 1vw;
    width: 2px;
    background: #0efcff
}

.rightTopLine2 {
    position: absolute;
    top: -1px;
    right: 0;
    height: 2px;
    width: 1vw;
    background: #0efcff
}

.leftBottomLine1 {
    position: absolute;
    bottom: 0;
    left: -1px;
    height: 1vw;
    width: 2px;
    background: #0efcff
}

.leftBottomLine2 {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    width: 1vw;
    background: #0efcff
}

.rightBottomLine1 {
    position: absolute;
    bottom: 0;
    right: -1px;
    height: 1vw;
    width: 2px;
    background: #0efcff
}

.rightBottomLine2 {
    position: absolute;
    bottom: -1px;
    right: 0;
    height: 2px;
    width: 1vw;
    background: #0efcff
}

.boxTitle {
    font-size: 1vw;
    color: #0efcff;
    width: 80%;
    margin-left: .8vw;
    margin-top: .5vw
}

.left {
    float: left
}

.right {
    font: right
}

.video-js .vjs-control {
    width: 1vw !important
}

.vjs-volume-panel {
    display: none !important
}

.vjs-live-display {
    display: none !important
}

.vjs-audio-button {
    display: none !important
}




    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363
    • 364
    • 365
    • 366
    • 367
    • 368
    • 369
    • 370
    • 371
    • 372
    • 373
    • 374
    • 375
    • 376
    • 377
    • 378
    • 379
    • 380
    • 381
    • 382
    • 383
    • 384
    • 385
    • 386
    • 387
    • 388
    • 389
    • 390
    • 391
    • 392
    • 393
    • 394
    • 395

    3.JavaScript

    
function numInit() {
    $('.counter-value').each(function() {
        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 2500,
            easing: 'swing',
            step: function(now) {
                $(this).text(now.toFixed(0));
            }
        });
    });
}

function numInit1() {
    $('.counter-value1').each(function() {
        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 2500,
            easing: 'swing',
            step: function(now) {
                $(this).text(now.toFixed(1));
            }
        });
    });
}

function numInit2() {
    $('.counter-value2').each(function() {
        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 2500,
            easing: 'swing',
            step: function(now) {
                $(this).text(now.toFixed(2));
            }
        });
    });
}
numInit();
numInit1();
numInit2();





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    五、更多干货

    1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

    2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！

    3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

  • 相关阅读:
    用springsecurity去代替拦截器
    CAD中的超级修剪功能、使用CAD旋转命令绘制图形
    Spring Cloud Netflix微服务组件-Eureka
    深入理解计算机网络-9IP地址和子网2
    【PAT甲级】1015 Reversible Primes
    前端构建工具 代码优化压缩 模块管理 依赖管理 资源处理转换 自动化任务 流程优化 高级特性 Webpack Parcel Rollup Gulp 静态资源
    xpath 高级用法
    Deno完整教程
    【学生个人网页设计作品】使用HMTL制作一个超好看的保护海豚动物网页
    智能化“竞赛下半场”，什么才是可量产的最佳实践？
  • 原文地址：https://blog.csdn.net/bigwhiteshark/article/details/126343576