JavaWeb企业实训 简易股市自选查询分析系统(三)前端页面加入highchart及CSS3列表
来源：互联网 发布：三国杀 知乎 编辑：程序博客网 时间：2024/04/28 17:37
目录结构：
界面效果：
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>Stock Plus</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><link rel="icon" href="favicon.ico"><!-- Bootstrap core CSS --> <link href="static/css/bootstrap.min.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="static/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="blog.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="static/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <iframe src="common/header.jsp" width="100%" height="10%" marginwidth="0" marginheight="0" frameborder="0" name="header" id="header"></iframe> <body> <iframe src="common/charts.jsp" width="80%" height="75%" style="margin:0;float:left" marginwidth="0" marginheight="0" frameborder="0" name="header" id="charts"></iframe> <iframe src="common/stockrecommend.jsp" width="20%" height="75%" marginwidth="0" marginheight="0" frameborder="0" name="header" id="stockrecommend"></iframe> </body> <iframe src="common/footer.jsp" width="100%" height="15%" marginwidth="0" marginheight="0" frameborder="0" name="footer" id="footer"></iframe></html>
header.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!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"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="favicon.ico"> <title>Stock Plus</title> <!-- Bootstrap core CSS --> <link href="../static/css/bootstrap.min.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="../static/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="../static/css/dashboard.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="static/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="../static/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-fixed-top navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> </button> --> <!-- <a class="navbar-brand" href="#">欢乐股</a> --> <span class="icon-bar"><img src="../upload/logo.png" width="100" heigh="50"></img></span> </div> <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form text-center"> <input type="text" class="form-control " placeholder="请输入股票代码或名称..."> <ul class="nav navbar-nav navbar-right"> <li><a href="#">登录 |</a></li> <li><a href="#">注册 |</a></li> <li><a href="#">下载客户端 |</a></li> <li><a href="#">关注微信</a></li> </ul> </form> </div> </div> </nav> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="static/js/vendor/jquery.min.js"><\/script>')</script> <script src="../static/js/bootstrap.min.js"></script> <!-- Just to make our placeholder images work. Don't actually copy the next line! --> <script src="../static/js/vendor/holder.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../static/js/ie10-viewport-bug-workaround.js"></script> </body></html>charts.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'charts.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--> </head> <body> <iframe src="common/chartone.jsp" width="100%" height="50%" marginwidth="0" marginheight="0" frameborder="0" name="chartone" id="chartone"> </iframe> <iframe src="common/charttwo.jsp" width="100%" height="50%" marginwidth="0" marginheight="0" frameborder="0" name="chartotwo" id="charttwo"> </iframe> </body></html>
chartone.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Highcharts Example</title><script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><style type="text/css">${demo.css}</style><script type="text/javascript">$(function () { $.getJSON('http://www.hcharts.cn/datas/jsonp.php?filename=usdeur.json&callback=?', function (data) { $('#container').highcharts({ chart: { zoomType: 'x' }, title: { text: '上证指数 (000001) ' }, subtitle: { text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' }, xAxis: { type: 'datetime' }, yAxis: { title: { text: 'Exchange rate' } }, legend: { enabled: false }, plotOptions: { area: { fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] }, marker: { radius: 2 }, lineWidth: 1, states: { hover: { lineWidth: 1 } }, threshold: null } }, series: [{ type: 'area', name: 'USD to EUR', data: data }] }); });});</script></head><body><script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script><div id="container" style="min-width: 155px; height: 200px; margin: 5px"></div></body></html>charttwo.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Highcharts Example</title><script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><style type="text/css">${demo.css}</style><script type="text/javascript">$(function () { $.getJSON('http://www.hcharts.cn/datas/jsonp.php?filename=usdeur.json&callback=?', function (data) { $('#container').highcharts({ chart: { zoomType: 'x' }, title: { text: '国创高新 (002377) ' }, subtitle: { text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' }, xAxis: { type: 'datetime' }, yAxis: { title: { text: 'Exchange rate' } }, legend: { enabled: false }, plotOptions: { area: { fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] }, marker: { radius: 2 }, lineWidth: 1, states: { hover: { lineWidth: 1 } }, threshold: null } }, series: [{ type: 'area', name: 'USD to EUR', data: data }] }); });});</script></head><body><script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script><div id="container" style="min-width: 155px; height: 200px; margin: 5px 5px"></div></body></html>stockrecommend.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!doctype html><html><head><style>body { margin: 8px auto; width: auto;heigh:auto }/* -------------------------------------- */ol { counter-reset: li; list-style: none; *list-style: decimal;font: 10px 'trebuchet MS', 'lucida sans'; padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }ol ol { margin: 0 0 0 2em; }/* -------------------------------------- *//* -------------------------------------- */.circle-list li { padding: 2.5em; border-bottom: 1px dashed #ccc; }.circle-list h2 { position: relative; margin: 0; }.circle-list p { margin: 0; }.circle-list h2:before { content: counter(li); counter-increment: li; position: absolute; z-index: -1; left: -1.3em; top: -.8em; background: #f5f5f5; height: 1.5em; width: 1.5em; border: .1em solid rgba(0, 0, 0, .05); text-align: center; font: italic bold 1em/1.5em Georgia, Serif; color: #ccc; -moz-border-radius: 1.5em; -webkit-border-radius: 1.5em; border-radius: 1.5em; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out;}.circle-list li:hover h2:before { background-color: #ffd797; border-color: rgba(0, 0, 0, .08); border-width: .2em; color: #444; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); }</style></head><body><ol class="circle-list"> <li> <h2>股票1</h2> <p>Morbi sag.</p> </li> <li> <h2>股票2</h2> <p>Morbi sag.</p> </li> <li> <h2>股票</h2> <p>Morbi sag.</p> </li> <li> <h2>股票4</h2> <p>Morbi sag.</p> </li> <li> <h2>股票5</h2> <p>Morbi sag.</p> </li> </ol></body></html>footer.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!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"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <!-- Bootstrap core CSS --> <link href="../static/css/bootstrap.min.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="../static/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="../static/css/cover.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../static/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="../static/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="site-wrapper"> <div class="site-wrapper-inner"> <div class="cover-container"> <div class="mastfoot"> <div class="inner"> <p>Copyright © 2015-2016 BZU StockPlus. All rights reserved.</p> </div> </div> </div> </div> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../dist/js/bootstrap.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> </body></html>iframe样式优化
marginwidth="0" marginheight="0" frameborder="0"页面有些地方写死了，在自己的13寸火狐上是比较美观的。
0 0
- JavaWeb企业实训 简易股市自选查询分析系统(三)前端页面加入highchart及CSS3列表
- JavaWeb企业实训 简易股市自选查询分析系统(二)前端页面布局
- JavaWeb企业实训 简易股市自选查询分析系统(四)数据库角色分工
- JavaWeb企业实训 简易股市自选查询分析系统(五)使用freemarker控制html
- JavaWeb企业实训 简易股市自选查询分析系统(六)使用Shiro控制登录等权限管理与Spring项目整合
- 简易散列表实现电话号码查询系统
- 简易成绩查询系统
- 简易成绩查询系统
- 简易数据库查询系统
- 简易在线投票系统(php)——前端设计（投票页面的源码）
- 简易在线投票系统(php)——前端设计（结果页面的源码）
- 简易在线投票系统(php)——前端设计（发布投票页面的源码）
- 加入信号量的简易卖票系统
- 企业站SEO排名维护及资源利用分析(三)
- 在jsp页面中加入下拉列表
- 简易学生信息查询系统
- 【C++】简易交通查询系统
- DIY一个简易查询系统
- HashMap学习笔记
- Qt学习记录--03 Qt的信号槽的使用
- 原生 js 实现全屏滚动效果
- LeetCode——034
- lintcode之最长公共前缀
- JavaWeb企业实训 简易股市自选查询分析系统(三)前端页面加入highchart及CSS3列表
- 易生活(一)-web---商品上传、smartupload使用、虚拟路径
- Hadoop学习
- 树莓派系统安装教程
- 【笔试/面试】MFC（六）—— 菜单
- win10中使用sqlserver2008r2 SQL Server 配置管理器
- Comparable与Comparator的区别
- spring基础知识详解
- iOS开发中的敏捷方法
