Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”
๐ Author’s home page: Java Li Yangyong
๐ Profile: Java domain quality creator ๐, ใ Java Li Yang Yong ใ commonnumber author โ resume templates, learning materials, interview database
Download the source code for free at ๐
Near the end of the semester, or graduation project, you are still doing Java program network programming, final homework, front-end web design, teacher’s homework requirements feel too big? Don’t know what to do with the graduation project? Are there too many web features? Don’t have the right type or system? And so on. Anything you want to solve here, you can solve here
That will meet your needs. Original Jsp, SSM, SpringBoot, as well as HTML+CSS+JS page design, web college student web page design source code and so on can be referenced to be solved. Without further ado, direct programmers nationwide distributed big data statistics for example
GIF demo: home page white whoring source code
โ
โย ย
โ
The code directory
Main code implementation:
Home page index.html layout
<header> <h1> <div class="showTime"> <span></span></div> </header> <section class="mainbox"> <div class="column"> <div class="panel bar"> <h2> <a href="javascript:;" >2019</a> <a href="javacript:;" > 2020</a> </h2> <div class="chart"></div> <div class="panel-footer"></div> </div> <div class="panel line"> </h2> <div class="panel-footer"></div> <div class="panel pie"> < H2 > Pie chart - Engineer age distribution </h2> <div class="chart"></div> <div class="panel-footer"></div> </div> </div> <div class="column"> <div class="no"> <div class="no-hd"> <ul> <li>125811</li> <li>104563</li> </ul> </div> <div class="no-bd"> <ul> < li > programmer needs number < / li > < li > programmer supply number < / li > < / ul > < / div > < / div > < div class = "map" > < div class = "chart" > < / div > < div class="map1"></div> <div class="map2"></div> <div class="map3"></div> </div> </div> <div class="column"> <div </h2> <div class="chart"></div> <div class="panel-footer"></div> </div> <div </h2> <div class="chart"></div> <div class="panel-footer"></div> </div> <div Class ="panel pie1"> <h2> <div class="chart"></div> </div>Copy the code
Time formatting:
(function(fn) { fn(); setInterval(fn, 1000); })(function() { var dt = new Date(); Document.queryselector (".showtime span").innerhtml = dt.getDate() + "day -" + dt.gethours () +" time "+ dt.getMinutes() +" minute "+ Dt.getseconds () + "seconds "; });Copy the code// Bar chart 1 module — data simulation — specify configuration and data:
Var myChart = echarts.init(document.querySelector(".bar.chart ")); Var option = {color: ["# 2f89CF "], tooltip: {trigger: "axis", axisPointer: {// Coordinate axis trigger valid type: "Shadow" / / default is straight line, optional for: 'the line' | 'shadow'}}, the grid: {left: "0%", top: "10 px", right: "0%", the bottom: "4%", containLabel: True}, xAxis: [{type: "category", data: [" travel industry ", "education and training", "games", "medical industry", "electricity industry", "social business", "financial industry"], axisTick: {alignWithLabel: true}, axisLabel: {textStyle: {color: "rgba(255,255,255,.6)", fontSize: "12"}}, axisLine: {show: false}}], yAxis: [{type: "value", axisLabel: {textStyle: {color: "rgba(255,255,255,.6)", fontSize: }}, axisLine: {lineStyle: {color: "rgba(255,255,255,.1)" // width: 1, // type: "solid"}}, splitLine: LineStyle: {color: "rgba(255,255,255,.1)"}}}], series: [{name: "directly access ", type: "bar", barWidth: "35%", data: [200, 300, 300, 900, 1500, 1200, 600], itemStyle: { barBorderRadius: 5 } }] };Copy the codePage CSS layout:
body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; background-repeat: no-repeat; background-color: #06164A; background-size: cover; / * e ยก Root e ยซ ห รฆ ห ยฏ a - a 1/2 level "a which * / line - height: 1.15 1.15;} header {position: relative; height: 1.25 rem; background: Url (../images/head_bg.png) no-repeat top center; background-size: 100% 100%;} header h1 {font-size: 0.475rem; color: #fff; text-align: center; line-height: 1rem; } header .showTime { position: absolute; top: 0; right: Color: rgba(255, 255, 255, 0.7);}.mainbox {min-width: 0.375rem; margin-top: 1em; margin-top: 1em; Display: flex;}.mainbox. column {flex: Column: NTH -child(2) {flex: 5; margin: 0 0.125rem 0.1875rem; overflow: hidden;}. Panel {position: position: Relative: height: 3.875 REM; border: 1px solid RGBA (25, 186, 139, 0.17); background: Rgba (255, 255, 255, 0.04) URL (../images/line(1).png); padding: 0 0.1875rem 0.5rem; margin-bottom: Panel ::before {position: absolute; top: 0; left: 0; content: ""; width: 10px; height: 10px; border-top: 2px solid #02a6b5; border-left: 2px solid #02a6b5; border-radius: 20%; }Copy the codeWorks from the network collection, infringement stand delete
Get the full source code:
Thumb up, collection, attention, comments, see below ๐ ๐ป ๐ ๐ป ๐ ๐ป homepage free access ๐ ๐ป ๐ ๐ป ๐ ๐ป
Clocked articles updated 74/100 days
โ