基于Echarts+HTML5可視化數據大屏展示-白茶大數據溯源平臺V2

效果展示：
在這里插入圖片描述
代碼結構：
在這里插入圖片描述

主要代碼實現
index.html布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="static/css/bootstrap-3.3.4.css"><link rel="stylesheet" type="text/css" media="all" href="static/css/daterangepicker.css" /><link rel="stylesheet" href="static/css/css.css"><link rel="stylesheet" href="static/css/index2.css"><link rel="stylesheet" href="static/css/daterangepicker.css"><title>福鼎白茶大數據溯源平臺</title><style>@font-face {font-family: 'DINPro';src: url(/fonts/DINPro.woff.ttf);}</style>
</head>
<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: 'd016a95780d3e7402b8d354d2556337b', //密鑰}
</script>
<script type="text/javascript"src="static/js/dc94675363994d37877d674545fccad6.js"></script><body><div class="content" onclick="fun(event)"><div class="header"><div class="header_l"><ul><li class="sel_li"><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/header-3.png" alt=""><span>首頁</span></a></li><li class=""><a href="https://gitee.com/iGaoWei/big-data-view"><span>應用介紹</span></a></li><li class=""><a href="https://gitee.com/iGaoWei/big-data-view"><span>產業介紹</span></a></li></ul></div><div class="header_m"><h1>福鼎白茶大數據溯源平臺</h1></div><div class="header_r"><ul><li class=""><a href="https://gitee.com/iGaoWei/big-data-view"><span>產量產值</span></a></li><li class=""><a href="https://gitee.com/iGaoWei/big-data-view"><span>業務系統</span></a></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/header-1.png" alt=""><span>退出</span></a></li></ul></div></div><div class="main"><div class="main_l"><div class="item mainl1"><div class="title"><h2>交易產量</h2><p><span class="span_c day1_cl">日</span><span class="month1_cl">月</span><spanclass="year1_cl">年</span></p><button id="date1"></button></div><div class="con"><div class="con_t"><p>當日茶青交易產量：<span class="jyl_1" data-ride="numberGrow21" data-value="150.9" data-time="3"data-digit="2">150.9</span><b>公斤</b></p></div><div class="con_f bar1"></div></div></div><div class="item mainl2"><div class="title"><h2>交易產量</h2><p><span class="span_c day2_cl">日</span><span class="month2_cl">月</span><spanclass="year2_cl">年</span></p><button id="date2"></button></div><div class="con"><div class="con_t"><p>當日毛茶交易產量：<span class="jyl_2" data-ride="numberGrow22" data-value="150.9" data-time="3"data-digit="2">150.9</span><b>公斤</b></p></div><div class="con_f bar2"></div></div></div><!-- <img src="static/picture/dot.png" alt=""> --></div><!-- <div class="point"><img src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">福鼎市</span></div> --><!-- <div class="main_m"> --><div class="eject_bigbox"><div class="close2"></div><h2>產業介紹</h2><div class="con_box"><video src="/images/video.mp4" controls></video><div class="textbox"><p>福鼎是中國白茶發源地和核心產區，也是唯一由國家部委授予的“中國白茶之鄉”，素有“世界白茶在中國，中國白茶在福鼎”之美譽。這里三面環山一面臨海，以花崗巖地貌、微酸性砂礫土壤為主，千百年來，獨特的地理氣候條件孕育出福鼎大白茶、福鼎大毫茶兩大國家級茶樹良種。福鼎白茶運用傳統獨特工藝，最大限度地保留了茶葉中的營養和活性，造就了福鼎白茶“毫香蜜韻、歷久彌香、自然健康”的特質。新茶有甜爽之美，老茶有甘醇之韻，廣為世人所推崇。</p><p>福鼎市大力實施基地化生態茶園建設，推行茶園不使用化學農藥全覆蓋，始終堅持做老百姓喝得起的放心茶、健康茶。福鼎白茶大數據溯源系統于2021年3月10日正式啟用，必將更好地維護消費者的權益，確保每一份福鼎白茶都來自福鼎正宗原產地。</p><p>福鼎白茶，讓世界更美好！</p></div></div></div><div class="main_m"><div class="main_m_t"><div class="item1"><p data-ride="numberGrow25" data-value="6551" data-time="3" data-digit="2">6551</p><span>茶農 (戶)</span><p data-ride="numberGrow25" data-value="150.6" data-time="3" data-digit="2">150.6</p><span>經紀人(家)</span></div><div class="item1"><p data-ride="numberGrow25" data-value="85" data-time="3" data-digit="2">85</p><span>茶企 (家)</span><p data-ride="numberGrow25" data-value="65.8" data-time="3" data-digit="2">65.8</p><span>加工點(家)</span></div><div class="item1"><p data-ride="numberGrow25" data-value="14374.64" data-time="3" data-digit="2">14,374.64</p><span>茶園總面積 (萬畝)</span><p data-ride="numberGrow25" data-value="35.40" data-time="3" data-digit="2">35.40</p><span>交易額 (億元)</span></div><div class="item1"><p data-ride="numberGrow25" data-value="338029.51" data-time="3" data-digit="2">338,029.51</p><span>交易產量 (萬噸)</span><p data-ride="numberGrow25" data-value="2.4576" data-time="3" data-digit="2">2.4576</p><span>溯源碼量 (個)</span></div></div></div><div class="eject control"><div class="close"></div><div class="infor"><h2><img src="static/picture/address.png" alt=""><span class="areaname">地區名稱</span></h2><div class="con_text"><p>茶農(戶):<span>152</span></p><p>茶企(家):<span>152</span></p><p>茶園面積(千克):<span>152</span></p><p>預測產量(戶):<span>152</span></p><p>當年實際產量(千克):<span>152</span></p><p>當年溯源產量(千克):<span>152</span></p><p>茶葉產值</p></div></div><div class="line5"></div><!-- <div class="con "></div> --></div><div class="main_m_f"><ul><li class="active"><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-4.png" alt=""> <img src="static/picture/mainm-4h.png" alt=""></a><span>數字溯源</span></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-5.png" alt=""> <img src="static/picture/mainm-5h.png" alt=""></a><span>病蟲害測報</span></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-6.png" alt=""> <img src="static/picture/mainm-6h.png" alt=""></a><span>非化學農藥監管</span></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-7.png" alt=""> <img src="static/picture/mainm-7h.png" alt=""></a><span>茶山地貌</span></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-8.png" alt=""> <img src="static/picture/mainm-8h.png" alt=""></a><span>數字交易</span></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-9.png" alt=""> <img src="static/picture/mainm-9h.png" alt=""></a><span>數字加工</span></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-10.png" alt=""> <img src="static/picture/mainm-10h.png" alt=""></a><span>白茶文旅</span></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-11.png" alt=""> <img src="static/picture/mainm-11h.png" alt=""></a><span>茶文化</span></li></ul></div><!-- </div> --><div class="main_r"><div class="item mainr1"><div class="title"><h2>交易額</h2><p><span class="span_c day3_cl">日</span><span class="month3_cl">月</span><spanclass="year3_cl">年</span></p><button id="date3"></button></div><div class="con"><div class="con_t"><p>當月茶青交易額：<span class="jyl_3" data-ride="numberGrow23" data-value="150.9" data-time="3"data-digit="2">150.9</span><b>萬元</b></p></div><div class="con_f bar3"></div></div></div><div class="item mainr2"><div class="title"><h2>交易額</h2><p><span class="span_c day4_cl">日</span><span class="month4_cl">月</span><spanclass="year4_cl">年</span></p><button id="date4"></button></div><div class="con"><div class="con_t"><p>當月毛茶交易額：<span class="jyl_4" data-ride="numberGrow24" data-value="150.9" data-time="3"data-digit="2">150.9</span><b>公斤</b></p></div><div class="con_f bar4"></div></div></div></div><div class="map3" id="map3"></div></div></div><div class="container"><div class="well configurator" style="display: none;"><form><div class="row"><div class="col-md-4"><div class="form-group"><label for="parentEl">parentEl</label><input type="text" class="form-control" id="parentEl" value="" placeholder="body"></div><div class="form-group"><label for="startDate">startDate</label><input type="text" class="form-control" id="startDate" value="07/01/2015"></div><div class="form-group"><label for="endDate">endDate</label><input type="text" class="form-control" id="endDate" value="07/15/2015"></div><div class="form-group"><label for="minDate">minDate</label><input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY"></div><div class="form-group"><label for="maxDate">maxDate</label><input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY"></div></div><div class="col-md-4"><div class="checkbox"><label><input type="checkbox" id="autoApply"> autoApply</label></div><div class="checkbox"><label><input type="checkbox" id="singleDatePicker"> singleDatePicker</label></div><div class="checkbox"><label><input type="checkbox" id="showDropdowns"> showDropdowns</label></div><div class="checkbox"><label><input type="checkbox" id="showWeekNumbers"> showWeekNumbers</label></div><div class="checkbox"><label><input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers</label></div><div class="checkbox"><label><input type="checkbox" id="timePicker"> timePicker</label></div><div class="checkbox"><label><input type="checkbox" id="timePicker24Hour"> timePicker24Hour</label></div><div class="form-group"><label for="timePickerIncrement">timePickerIncrement (in minutes)</label><input type="text" class="form-control" id="timePickerIncrement" value="1"></div><div class="checkbox"><label><input type="checkbox" id="timePickerSeconds"> timePickerSeconds</label></div><div class="checkbox"><label><input type="checkbox" id="dateLimit"> dateLimit (with example date range span)</label></div><div class="checkbox"><label><input type="checkbox" id="ranges"> ranges (with example predefined ranges)</label></div><div class="checkbox"><label><input type="checkbox" id="locale"> locale (with example settings)</label><label id="rtl-wrap"><input type="checkbox" id="rtl"> RTL (right-to-left)</label></div><div class="checkbox"><label><input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars</label></div></div><div class="col-md-4"><div class="checkbox"><label><input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars</label></div><div class="checkbox"><label><input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput</label></div><div class="checkbox"><label><input type="checkbox" id="showCustomRangeLabel" checked="checked"> showCustomRangeLabel</label></div><div class="form-group"><label for="opens">opens</label><select id="opens" class="form-control"><option value="right" selected>right</option><option value="left">left</option><option value="center">center</option></select></div><div class="form-group"><label for="drops">drops</label><select id="drops" class="form-control"><option value="down" selected>down</option><option value="up">up</option></select></div><div class="form-group"><label for="buttonClasses">buttonClasses</label><input type="text" class="form-control" id="buttonClasses" value="btn btn-sm"></div><div class="form-group"><label for="applyClass">applyClass</label><input type="text" class="form-control" id="applyClass" value="btn-success"></div><div class="form-group"><label for="cancelClass">cancelClass</label><input type="text" class="form-control" id="cancelClass" value="btn-default"></div></div></div></form></div></div><style type="text/css">.demo {position: relative;}.demo i {position: absolute;bottom: 10px;right: 24px;top: auto;cursor: pointer;}footer {text-align: center;font-size: .1rem;color: #4B7EFE;}</style><script src="static/js/main.js"></script><script src="static/js/jquery-1.10.2.js"></script><script src="static/js/bootstrap-3.3.4.js"></script><script src="static/js/echarts.min.js"></script><script src="static/js/flexible.js"></script><script src="static/js/jquery.js"></script><script src="static/js/moment.js"></script><script src="static/js/moment.min.js"></script><script src="static/js/daterangepicker.js"></script><script src="static/js/date.js"></script><script src="static/js/echarts-gl.min.js"></script><script src="static/js/index2.js"></script><script src="static/js/echarts-amap.min.js"></script><script src="static/js/scrolllazyinit.js"></script><!-- <script src="static/js/vue.min.js"></script> --><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: 'd016a95780d3e7402b8d354d2556337b', //密鑰}</script><script type="text/javascript"src="static/js/c704ac907ae64ebe95b77033f819f0dd.js"></script><script language="javascript">var options = {subdistrict: 0,extensions: 'all',level: 'district'};var district = new AMap.DistrictSearch(options);//查詢福鼎市區域console.log(district);district.search('福鼎市', function (status, result) {// var bounds = result.districtList[0]['boundaries'];console.log(status);console.log(result);var bounds = result.districtList[0]['boundaries'];var mask = [];for (var i = 0; i < bounds.length; i++) {mask.push([bounds[i]]);}//實例化地圖var map = new AMap.Map('map3', {mask: mask,zoom: 10, //設置當前顯示級別expandZoomRange: true, //開啟顯示范圍設置zooms: [7, 16], //最小顯示級別為7，最大顯示級別為20center: [120.219761, 27.218884],viewMode: '3D', //這里特別注意，設置為3D則其它地區不顯示zoomEnable: true, //是否可以縮放地圖resizeEnable: true,features: ['bg'],layers: [new AMap.TileLayer.Satellite()],// mapStyle: "amap://styles/light"});console.log(mask, 'mask');//添加描邊for (var i = 0; i < bounds.length; i++) {new AMap.Polyline({path: bounds[i],strokeColor: '#3078AC',strokeWeight: 2,map: map})}// var map = new AMap.Map('container', {//     center: [116.397428, 39.90923],//     layers: [new AMap.TileLayer.Satellite()],//     zoom: 13// });var marker1 = new AMap.Marker({position: new AMap.LngLat(120.17931, 27.18487), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="白琳鎮"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">白琳鎮</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker2 = new AMap.Marker({position: new AMap.LngLat(120.18986, 27.23783), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="點頭鎮"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">點頭鎮</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker3 = new AMap.Marker({position: new AMap.LngLat(120.33273, 27.16229), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="店下鎮" style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">店下鎮</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker4 = new AMap.Marker({position: new AMap.LngLat(120.10877, 27.39024), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="疊石鄉" style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">疊石鄉</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker5 = new AMap.Marker({position: new AMap.LngLat(120.04024, 27.25816), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="管陽鎮"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">管陽鎮</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker6 = new AMap.Marker({position: new AMap.LngLat(120.23642, 27.39734), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="貫嶺鎮"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">貫嶺鎮</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker7 = new AMap.Marker({position: new AMap.LngLat(120.36065, 27.28290), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="佳陽鄉"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">佳陽鄉</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker8 = new AMap.Marker({position: new AMap.LngLat(120.37194, 27.19149), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="龍安開發區"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">龍安開發區</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker9 = new AMap.Marker({position: new AMap.LngLat(120.12456, 27.16098), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="磻溪鎮"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">磻溪鎮</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker10 = new AMap.Marker({position: new AMap.LngLat(120.32633, 27.31061), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="前岐鎮"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">前岐鎮</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker11 = new AMap.Marker({position: new AMap.LngLat(120.42714, 27.16607), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="沙埕鎮"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">沙埕鎮</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker12 = new AMap.Marker({position: new AMap.LngLat(120.22933, 27.33183), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="山前街道"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">山前街道</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker13 = new AMap.Marker({position: new AMap.LngLat(120.25803, 27.10589), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="太姥山鎮"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">太姥山鎮</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker14 = new AMap.Marker({position: new AMap.LngLat(120.22068, 27.33119), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img"  data-name="桐山街道" style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">桐山街道</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker15 = new AMap.Marker({position: new AMap.LngLat(120.21741, 27.33213), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img"  data-name="桐城街道" style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">桐城街道</span></div>`,offset: new AMap.Pixel(15, -20),});var marker16 = new AMap.Marker({position: new AMap.LngLat(120.23491, 27.03605), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="硤門畬族鄉"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">硤門畬族鄉</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker17 = new AMap.Marker({position: new AMap.LngLat(120.33378, 26.96008), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="崳山鎮"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">崳山鎮</span></div>`,offset: new AMap.Pixel(-15, -20),});var markerList = [marker1, marker2, marker3, marker4, marker5, marker6, marker7, marker8, marker9, marker10, marker11, marker12, marker13, marker14, marker15, marker16, marker17]// console.log(marker1);// console.log(markerList);map.add(markerList);});</script><script>var eject1 = document.getElementsByClassName('eject')[0]var eject2 = document.getElementsByClassName('eject_bigbox')[0]eject1.onclick = function () {eject1.classList.add("control")}eject2.onclick = function () {eject2.classList.add("eject_bigbox_control")}function fun(e) {var tar = e.targetconsole.log(tar)if (tar.classList[0] == 'point_child') {// tar.innerHTMLeject1.classList.remove("control")eject1.children[1].children[0].children[1].innerHTML = tar.innerHTML;} else if (tar.classList[0] == 'point_child_img') {eject1.classList.remove("control")eject1.children[1].children[0].children[1].innerHTML = tar.dataset.name;} else {eject1.classList.add("control")}}$('.content .main .main_m_f ul li').click(function () {$(this).addClass('active').siblings().removeClass('active')})</script>
</body></html>

作品來自于網絡收集、侵權立刪

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/923681.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/923681.shtml
英文地址，請注明出處：http://en.pswp.cn/news/923681.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Linux 系統網絡配置及 IP 地址相關知識匯總

Linux 系統網絡配置及 IP 地址相關知識匯總

Linux 系統網絡配置及 IP 地址相關知識匯總 一、IP地址基礎 IP地址&#xff1a;在計算機網絡中用來唯一標識一臺設備的一組數字。 二、IPv4相關知識 1. IPv4的表示方法 采用點分十進制表示&#xff0c;即由4個0-255的十進制數通過點分隔組成&#xff08;如192.168.1.1&#xff…
閱讀更多...
百度股價突破120美元創年內新高，AI云成為增長新引擎

百度股價突破120美元創年內新高，AI云成為增長新引擎

美東時間9月16日&#xff0c;百度&#xff08;NASDAQ: BIDU&#xff09;美股大漲近8%&#xff0c;收盤價突破120美元&#xff0c;站上124美元高位&#xff0c;創2023年10月以來新高。北京時間9月17日港股開盤&#xff0c;百度&#xff08;09888.HK&#xff09;港股再次暴漲&…
閱讀更多...
《彩虹六號：圍攻》“Siege X”發布會3月14日舉行！

《彩虹六號：圍攻》“Siege X”發布會3月14日舉行！

使用jQuery的常用方法與返回值分析 jQuery是一個輕量級的JavaScript庫&#xff0c;旨在簡化HTML文檔遍歷和操作、事件處理以及動畫效果的創建。本文將介紹一些常用的jQuery方法及其返回值&#xff0c;幫助開發者更好地理解和運用這一強大的庫。 1. 選擇器方法 jQuery提供了多種…
閱讀更多...
[從青銅到王者] Spring Boot+Redis+Kafka電商場景面試全解析

[從青銅到王者] Spring Boot+Redis+Kafka電商場景面試全解析

互聯網大廠Java開發崗技術面試實錄&#xff1a;嚴肅面試官VS搞笑程序員謝飛機 文章內容 第一輪&#xff1a;基礎框架與并發控制&#xff08;電商系統基礎能力&#xff09; 面試官&#xff08;嚴肅&#xff09;&#xff1a;歡迎進入面試環節&#xff0c;首先請用3句話總結Spring…
閱讀更多...
【DMA】DMA架構解析

【DMA】DMA架構解析

目錄 1 DMA架構 1. 芯片架構圖一覽 2. AHB總線矩陣掛載 3. AHB1/APB1的橋和AHB1/APB2的橋 4. DMA1 和 DMA2 的區別 2 AHB總線矩陣 1 DMA架構 1. 芯片架構圖一覽 2. AHB總線矩陣掛載 stm32F411 芯片的 AHB 總線矩陣上共掛載了 6 主 5 從 六主&#xff1a; Icode-bus、D…
閱讀更多...
GPS 定位器：精準追蹤的“隱形守護者”

GPS 定位器：精準追蹤的“隱形守護者”

GPS 定位器&#xff1a;精準追蹤的“隱形守護者” 一、什么是 GPS 定位器&#xff1f; GPS 定位器是一種基于 全球定位系統&#xff08;Global Positioning System, GPS&#xff09; 的智能追蹤設備。 通過接收衛星信號并結合通信模塊&#xff08;如 4G、NB-IoT&#xff09;&am…
閱讀更多...
前端拖拽排序實現

前端拖拽排序實現

1. 使用 HTML5 事件 觸發時機 核心任務 dragstart 開始拖拽時 準備數據&#xff0c;貼上標簽 dragover 經過目標上方時 必須 preventDefault()&#xff0c;發出“允許放置”的信號 dragleave 離開目標上方時 清理高亮等臨時視覺效果 drop 在目標上松手時 接收數據…
閱讀更多...
arm coresight

arm coresight

這是一個arm設計的調試基礎架構&#xff0c;我們常用的debug基本都包含在內。比如ETM、PTM、ITM、HTM、ETB等。 注意ETM、PTM、ITM、HTM、ETB是coresight的子集。這些工具相比普通debug的斷點調試&#xff0c;需要更高的專業水平&#xff0c;因此也用于復雜軟件故障定位、性能…
閱讀更多...
《華為基本法》 —— 企業發展的導航儀

《華為基本法》 —— 企業發展的導航儀

當一家企業從 “小作坊” 向 “規模化組織” 跨越時&#xff0c;最需要的是什么&#xff1f;華為的答案&#xff0c;藏在 1998 年出臺的《華為基本法》里。1998 年&#xff0c;《華為基本法》正式頒布&#xff0c;這部凝結華為早期經營智慧的綱領性文件&#xff0c;不僅為華為從…
閱讀更多...
【完整源碼+數據集+部署教程】傳統韓文化元素分割系統： yolov8-seg-GFPN

【完整源碼+數據集+部署教程】傳統韓文化元素分割系統： yolov8-seg-GFPN

背景意義 研究背景與意義 隨著全球化的加速&#xff0c;傳統文化的保護與傳承面臨著前所未有的挑戰。尤其是韓國的傳統文化&#xff0c;作為東亞文化的重要組成部分&#xff0c;蘊含著豐富的歷史、藝術和哲學內涵。然而&#xff0c;隨著現代化進程的推進&#xff0c;許多傳統文…
閱讀更多...
構建AI智能體：三十五、決策樹的核心機制（一）：刨根問底鳶尾花分類中的參數推理計算

構建AI智能體：三十五、決策樹的核心機制（一）：刨根問底鳶尾花分類中的參數推理計算

一、初識決策樹想象一個生活中的場景&#xff0c;我們去水果店買一個西瓜&#xff0c;該怎么判斷一個西瓜是不是又甜又好的呢&#xff1f;我們可能會問自己一系列問題&#xff1a;首先看看它的紋路清晰嗎&#xff1f;如果“是”&#xff0c;那么它可能是個好瓜。如果“否“&…
閱讀更多...
c語言中實現線程同步的操作

c語言中實現線程同步的操作

線程 常見問題 同步權限 在多線程 / 多進程并發時&#xff0c;為避免共享資源&#xff08;如內存變量、硬件設備、文件&#xff09;被同時修改導致的數據不一致&#xff0c;需要通過 “同步機制” 控制誰能訪問資源 ——“獲取同步權限” 就是線程 / 進程申請這種訪問資格的過程…
閱讀更多...
一臺設備管理多個 GitHub 賬號：從配置到切換的完整指南

一臺設備管理多個 GitHub 賬號：從配置到切換的完整指南

一臺設備管理多個 GitHub 賬號&#xff1a;從配置到切換的完整指南 在日常開發中&#xff0c;我們經常需要在同一臺電腦上使用多個 GitHub 賬號&#xff08;比如個人賬號和工作賬號&#xff09;。但默認情況下&#xff0c;Git 會優先使用全局配置的賬號&#xff0c;導致推送代…
閱讀更多...
即插即用，秒入虛擬：TouchDIVER Pro 觸覺手套 賦能 AR/VR 高效交互

即插即用，秒入虛擬：TouchDIVER Pro 觸覺手套 賦能 AR/VR 高效交互

一、即插即用&#xff0c;零門檻開啟沉浸之旅 在XR&#xff08;擴展現實&#xff09;技術高速發展的今天&#xff0c;用戶對“真實感”的追求愈發迫切。Weart公司旗下旗艦產品TouchDIVER Pro觸覺手套&#xff0c;憑借無需適配器、無需復雜設置的極簡設計&#xff0c;打破傳統觸…
閱讀更多...
GitHub熱榜項目 - 日榜之應用場景與未來發展趨勢

GitHub熱榜項目 - 日榜之應用場景與未來發展趨勢

一、引言GitHub熱榜項目 - 日榜呈現出豐富多樣的技術成果&#xff0c;這些項目蘊含著巨大的應用潛力&#xff0c;并且對未來數智化技術的發展有著重要的指示作用。深入探究其應用場景以及未來發展趨勢&#xff0c;能讓我們更好地把握技術發展方向&#xff0c;將這些前沿技術應用…
閱讀更多...
Linux網絡：socket編程TCP

Linux網絡：socket編程TCP

文章目錄前言一&#xff0c;服務器端流程1-1 綁定協議1-2 綁定IP和端口1-3 監聽客戶端1-4 接收連接1-5 收發數據1-6 關閉連接1-7 服務端整體代碼二&#xff0c;客戶端流程2-1 指定地址和端口2-2 連接服務器2-3 發送消息2-4 客戶端整體代碼前言 TCP 的通信過程就像兩個人打電話…
閱讀更多...
飛書智能查詢機器人搭建說明文檔

飛書智能查詢機器人搭建說明文檔

飛書智能查詢機器人搭建說明文檔 一、使用手冊 1. 創建飛書機器人應用 如果僅需對接已有機器人應用則可跳過該步驟&#xff08;建議各業務部門獨立使用各自的機器人應用&#xff09;。在飛書開發者后臺中創建企業自建應用&#xff0c;添加機器人應用能力并申請對應的身份權限…
閱讀更多...
藍色系列包裝行業網站 適合企業站，帶手機版自適應

藍色系列包裝行業網站 適合企業站，帶手機版自適應

內容目錄一、詳細介紹二、效果展示1.部分代碼2.效果圖展示三、學習資料下載一、詳細介紹 藍色通用企業網站是基于SDCMS四合一企業網站管理系統開發的模板&#xff0c;適合企業站&#xff0c;帶手機版。 四網合一企業網站管理系統是一個以PHPMySQL/Sqlite進行開發的四網合一網…
閱讀更多...
【大模型:知識圖譜】--6.Neo4j DeskTop安裝+使用

【大模型:知識圖譜】--6.Neo4j DeskTop安裝+使用

上一期講了圖知識庫的安裝&#xff0c; 【圖數據庫】--Neo4j 安裝_neo4j安裝-CSDN博客 現在來看看可視化管理程序&#xff1a;Neo4j DeskTop的安裝. 需要先安裝java環境&#xff0c;具體看上面 目錄 1.Neo4j DeskTop版下載 2.Neo4j DeskTop版安裝 3.Neo4j DeskTop版使用 …
閱讀更多...
Python爬蟲實戰——使用NetNut網頁解鎖器獲取亞馬遜電商數據

Python爬蟲實戰——使用NetNut網頁解鎖器獲取亞馬遜電商數據

文章目錄一、電商數據的作用1.1 支撐科學決策&#xff0c;降低試錯成本1.2 提升運營效率&#xff0c;實現降本增效1.3 深化用戶理解&#xff0c;驅動個性化服務1.4 監測競品動態&#xff0c;制定差異化策略1.5 驅動產品創新&#xff0c;滿足用戶需求二、爬取目標三、環境準備四…
閱讀更多...
最新文章

Copyright @ 2022~2023