D3.js X,Y轴正常显示，但是折线显示不出来

var width = 1400, height = 200, margin = 30, g_width = width - margin - margin, g_height = height - margin - margin; var data = [ { x: "2017-11-30", y: 5 }, { x: "2018-12-30", y: 5 }, { x: "2018-1-30", y: 5 }, { x: "2018-2-30", y: 5 }, { x: "2018-3-30", y: 9 }, { x: "2018-4-30", y: 7 }, { x: "2018-5-30", y: 5 }, { x: "2019-6-30", y: 3 }, { x: "2018-7-30", y: 4 }, { x: "2018-8-30", y: 2 }, { x: "2018-9-30", y: 3 }, { x: "2020-10-3", y: 2 } ]; //X,Y比例尺 var datamax = d3.max(data, function (d: { x: any; }) { return d.x; }); var datamin = d3.min(data, function (d: { x: any; }) { return d.x; }); var xscale = d3.scaleBand() .domain([datamin, datamax]) .range([0, width]); var yscale = d3.scaleLinear() .domain([0, 30]) .range([height - 2 * margin, 0]); //svg var svg = d3.select("#container") //选择元素 .append("svg") //添加元素 .attr("width", width) //设置属性 .attr("height", height) .attr("transform", "translate(30,0)") // g var g = d3.select("svg") .append("g") .attr("transform", "translate(" + margin + "," + margin + ")") //X，Y轴 var x_axis = d3.axisBottom(xscale).ticks(12); var y_axis = d3.axisLeft(yscale); //g元素与X轴Y轴绑定 g.append("g") .call(x_axis) .attr("transform", "translate(0," + g_height + ")") g.append("g") .call(y_axis) .append("text") //添加轴标签 .text("price") //创建线生成器 var line = d3.line() .x(function (d: { x: any; }) { return xscale(d.x); }) .y(function (d: { y: any; }) { return yscale(d.y); }) .curve(d3.curveLinear); //绘制折线 svg.selectAll("path.line") .data(data) .enter() .append("path") .attr("class", "line"); svg.selectAll("path.line") .data(data) .attr("d", function (d: any) { return line(d); }); //连接圆圈 data.forEach(function (list) { svg.append("g") .selectAll("circle") .data(list) .enter() .append("circle") .attr("class", "dot") .attr("cx", function (d: { x: any; }) { return xscale(d.x); }) .attr("cy", function (d: { y: any; }) { return yscale(d.y); }) .attr("r", 4.5) });  X,Y轴正常显示，但是折线显示不出来 

WEB前端 SVG 弧形进度条

小白前端，请教一下大神。 这个是我现在写的，想问一下用svg可以把它写成弧形吗？我现在用的是SVG，是不是用canvas会容易一些？能贴一下代码么？ 这个是理想图 这是我HTML代码 ``` <svg id="js-times-svg" > <defs> <linearGradient id="color-gradient" x1="0" y1="0%" x2="99.33%" y2="0%" gradientUnits="userSpaceOnUse"> <stop offset="0%" style="stop-color:#62B220"></stop> <stop offset="100%" style="stop-color:#f6250a"></stop> </linearGradient> </defs> <line x1="0" y1="50" x2="100%" y2="50.001" stroke="#666" stroke-width="30" stroke-dasharray="5 5"></line> <line id = "colorful" x1="0" y1="50" x2="99.33%" y2="50.001" stroke="url(#color-gradient)" stroke-width="30" stroke-dasharray="5 5" style="transition:all .5s ease;" class="prog"></line> </svg> ``` JS： ``` var i = 0; var flag = 1; setInterval(function(){ console.log(document.querySelector("#colorful").setAttribute("x2",i+"%")); if(flag==1){ if(i==100){ flag = 0; } i++; }else{ if(i==0){ flag = 1; } i--; } },50); ```

大家好，问个关于svg的问题

&nbsp;&nbsp;&nbsp;&nbsp; 最近做一个远程监控得项目，需要用到svg，用来配合ajax实时显示，我现在做了个svg动画，在IE、safari中能打开（已装了SVGView插件），反而在火狐中打不开了，这个项目是针对火狐的……这个问题困扰我两天了，上网搜了很多资料，还是不知道为什么火狐中显示不了，希望各位能帮忙看下，附上SVG文件代码。 <br />&nbsp;&nbsp;&nbsp;&nbsp; <pre name="code" class="xml"> &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"&gt; &lt;svg onload="settime(evt)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" a3:scriptImplementation="Adobe"&gt; &lt;defs&gt; &lt;script language="JavaScript" a3:scriptImplementation="Adobe"&gt; &lt;![CDATA[ if (!window) window = this; function settime(evt) { var now=new Date(); var Seconds=now.getSeconds(); var Minutes=now.getMinutes()+Seconds/60; var Hours=now.getHours()+Minutes/60; var SVG_Document; SVG_Document = evt.target.ownerDocument; svgRoot = SVG_Document.rootElement; var sec=SVG_Document.getElementById("seconds"); sec.setAttribute("transform",'rotate('+(Seconds*6)+')'); var min=SVG_Document.getElementById("minutes"); min.setAttribute("transform",'rotate('+(Minutes*6)+')'); var hou=SVG_Document.getElementById("hours"); hou.setAttribute("transform",'rotate('+(Hours*30)+')'); } ]]&gt; &lt;/script&gt; &lt;/defs&gt; &lt;circle cx="100" cy="100" r="80" style="fill:white;stroke:blue;stroke-widt:4"/&gt; &lt;g style="font-family:Times;font-size:15"&gt; &lt;text x="130" y="46"&gt;1&lt;/text&gt; &lt;text x="154" y="71"&gt;2&lt;/text&gt; &lt;text x="165" y="106"&gt;3&lt;/text&gt; &lt;text x="155" y="140"&gt;4&lt;/text&gt; &lt;text x="130" y="166"&gt;5&lt;/text&gt; &lt;text x="96" y="175"&gt;6&lt;/text&gt; &lt;text x="62" y="166"&gt;7&lt;/text&gt; &lt;text x="37" y="140"&gt;8&lt;/text&gt; &lt;text x="27" y="106"&gt;9&lt;/text&gt; &lt;text x="34" y="71"&gt;10&lt;/text&gt; &lt;text x="58" y="46"&gt;11&lt;/text&gt; &lt;text x="92" y="37"&gt;12&lt;/text&gt; &lt;/g&gt; &lt;g transform="translate(100 100)"&gt; &lt;g id="hours"&gt; &lt;line x1="0" y1="0" x2="0" y2="-35" style="stroke-width:4;stroke:black"&gt; &lt;animateTransform attributeName="transform" type="rotate" dur="43200s" values="0;360" repeatCount="indefinite"/&gt; &lt;/line&gt; &lt;/g&gt; &lt;g id="minutes"&gt; &lt;line x1="0" y1="0" x2="0" y2="-55" style="stroke-width:2; stroke:black"&gt; &lt;animateTransform attributeName="transform" type="rotate" dur="3600s" values="0;360" repeatCount="indefinite"/&gt; &lt;/line&gt; &lt;/g&gt; &lt;g id="seconds"&gt; &lt;line x1="0" y1="0" x2="0" y2="-75" style="stroke-width:1; stroke:red"&gt; &lt;animateTransform attributeName="transform" type="rotate" dur="60s" values="0;360" repeatCount="indefinite"/&gt; &lt;/line&gt; &lt;/g&gt; &lt;/g&gt; &lt;circle cs="100" cy="100" r="3" style="fill:black;stroke:black"/&gt; &lt;/svg&gt; </pre>

为什么我的d3js绘制的折线图形是这样的？？？大神求助

 代码如下，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .axis path, .axis line{ fill:none; stroke:black; shape-renderig:crispEdges; } .axis text{ font-family:Tahoma, Geneva, sans-serif; font-size:11px; } .MyRect{ fill:stealblue; } .MyText{ fill:white; text-anchor:middle;} </style> </head> <body> <script src="../d3/d3.min.js" charset="utf-8"></script> <script> var body=d3.select("body"); var width=400; var height=400; var svg=body.append("svg") .attr("width",400) .attr("height",400); //1.读取文件 //(1)d3.text() //(2)d3.json() /*d3.text("example.txt",function(error,txtdata){ if(error) console.log(error); console.log(txtdata); });*/ d3.json("example.json",function(error,jsondata){ if(error) console.log(error); console.log(jsondata); var xmax=d3.max(jsondata.data, function(d){return d.x;}); var ymax=d3.max(jsondata.data, function(d){return d.y;}); var xScale=d3.scale.linear() .domain([0,xmax]) .range([0,300]); var yScale=d3.scale.linear() .domain([0,ymax]) .range([250,0]); //添加坐标轴 var xAxis=d3.svg.axis() .scale(xScale) .orient("bottom"); var gxAxis=svg.append("g") .attr("class","axis") .attr("transform","translate(30,350)") .call(xAxis); var yAxis=d3.svg.axis() .scale(yScale) .orient("left"); var gyAxis=svg.append("g") .attr("class","axis") .attr("transform","translate(30,100)") .call(yAxis); //2.线段生成器 var line=d3.svg.line() .x(function(d){return xScale(d.x);}) .y(function(d){return yScale(d.y);}) .interpolate("basis"); //3.折线图 svg.append("path") .attr("class","MyPath") .attr("d",line(jsondata.data)) .attr("transform","translate(30,100)"); });//根据坐标系进行平移 </script> </body> </html>

D3的力导向图怎么把某些特殊节点半径放大

部分代码如图所示 ``` var force = d3.layout.force() .nodes(root.nodes) .links(root.edges) .size([width,height]) .linkDistance(200) .charge(-1500) .start(); var edges_line = svg.selectAll("line") .data(root.edges) .enter() .append("line") .style("stroke","#660066") .style("stroke-width",1); var edges_text = svg.selectAll(".linetext") .data(root.edges) .enter() .append("text") .attr("class","linetext") .attr("dx",text_dx) .attr("dy",text_dy) .text(function(d){ return d.relation; }); // 圆形图片节点（人物头像） var nodes_img = svg.selectAll("image") .data(root.nodes) .enter() .append("circle") .attr("class", "circleImg") .attr("r", radius) .attr("fill", function(d, i){ //创建圆形图片 var defs = svg.append("defs").attr("id", "imgdefs"); var catpattern = defs.append("pattern") .attr("id", "catpattern" + i) .attr("height", 1) .attr("width", 1) catpattern.append("image") .attr("x", - (img_w / 2 - radius)) .attr("y", - (img_h / 2 - radius)) .attr("width", img_w) .attr("height", img_h) .attr("xlink:href", d.image) return "url(#catpattern" + i + ")"; }) ```

D3力导引图中功能实现与json数据的调用*（程序代码很多是套用的，希望给出代码指点）

利用D3做一个人物关系图，如图所示，要实现三个功能：1.怎样让关系直接显示在连线上 2.点击中间人物，弹出其简单介绍信息（弹窗） 3.点击边缘人物，跳转至新的人物关系图..................关键是这些节点的数据是利用json数据存储，以上的操作怎么用json呢 ```<html> <head> <meta charset="utf-8"> <title>Force</title> <style type="text/css"> body { background-image: url(image/a.jpg); } span.highlight { background-color: yellow } #left{ width: 50%; height: 100%; float: left; clear: left; border: 1px solid gray; border-radius: 5px; } #right{ width: 40%; height: 100%; float: right; clear: right; text-align: center; border: 1px solid gray; border-radius: 5px; font-size: 30px; } } </style> </head> <style> .nodetext { font-size: 12px; font-family: SimSun; fill: #000000; } .linetext { font-size: 12px; font-family: SimSun; fill: red; fill-opacity: 0.0; } </style> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> var width = 600; var height = 600; var img_w = 77; var img_h = 80; var radius = 30; //圆形半径 var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",height); d3.json("relation.json",function(error,root){ if( error ){ return console.log(error); } console.log(root); var force = d3.layout.force() .nodes(root.nodes) .links(root.edges) .size([width,height]) .linkDistance(200) .charge(-1500) .start(); var edges_line = svg.selectAll("line") .data(root.edges) .enter() .append("line") .style("stroke","#660066") .style("stroke-width",1); var edges_text = svg.selectAll(".linetext") .data(root.edges) .enter() .append("text") .attr("class","linetext") .text(function(d){ return d.relation; }); // 圆形图片节点（人物头像） var nodes_img = svg.selectAll("image") .data(root.nodes) .enter() .append("circle") .attr("class", "circleImg") .attr("r", radius) .attr("fill", function(d, i){ //创建圆形图片 var defs = svg.append("defs").attr("id", "imgdefs") var catpattern = defs.append("pattern") .attr("id", "catpattern" + i) .attr("height", 1) .attr("width", 1) catpattern.append("image") .attr("x", - (img_w / 2 - radius)) .attr("y", - (img_h / 2 - radius)) .attr("width", img_w) .attr("height", img_h) .attr("xlink:href", d.image) return "url(#catpattern" + i + ")"; }) .on("mouseover",function(d,i){ //显示连接线上的文字 edges_text.style("fill-opacity",function(edge){ if( edge.source === d || edge.target === d ){ return 1.0; } }); }) .on("mouseout",function(d,i){ //隐去连接线上的文字 edges_text.style("fill-opacity",function(edge){ if( edge.source === d || edge.target === d ){ return 0.0; } }); }) .call(force.drag); var text_dx = -20; var text_dy = 20; var nodes_text = svg.selectAll(".nodetext") .data(root.nodes) .enter() .append("text") .attr("class","nodetext") .attr("dx",text_dx) .attr("dy",text_dy) .text(function(d){ return d.name; }); force.on("tick", function(){ //限制结点的边界 root.nodes.forEach(function(d,i){ d.x = d.x - img_w/2 < 0 ? img_w/2 : d.x ; d.x = d.x + img_w/2 > width ? width - img_w/2 : d.x ; d.y = d.y - img_h/2 < 0 ? img_h/2 : d.y ; d.y = d.y + img_h/2 + text_dy > height ? height - img_h/2 - text_dy : d.y ; }); //更新连接线的位置 edges_line.attr("x1",function(d){ return d.source.x; }); edges_line.attr("y1",function(d){ return d.source.y; }); edges_line.attr("x2",function(d){ return d.target.x; }); edges_line.attr("y2",function(d){ return d.target.y; }); //更新连接线上文字的位置 edges_text.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; }); edges_text.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; }); //更新结点图片和文字 nodes_img.attr("cx",function(d){ return d.x }); nodes_img.attr("cy",function(d){ return d.y }); nodes_text.attr("x",function(d){ return d.x }); nodes_text.attr("y",function(d){ return d.y + img_w/2; }); }); }); </script> </body> </html> ```

JQuery插件-HighCharts 一个令我蛋疼的事 求教、、

<div class="quote_title">引用</div><div class="quote_div"> <br />&nbsp; 最近在做一个监控系统，需要制作两个图形，一个度盘，一个波形图，最先开始使用了JFreeChart绘制图形，但是在服务器端绘制图形鸭梨很大，占用带宽多，浏览图形不畅快，抛弃之。 <br />&nbsp;&nbsp;&nbsp; 然后觉得可以使用Java Applet在客户端绘制图形，但是这个要求JRE环境，于是也被无情的抛弃了。 <br />&nbsp;&nbsp;&nbsp; 然后在网上找了会，发现一个HighCharts类库，一个JQuery插件，使用这个绘制出来的图形挺好看的，效果也令人满意，但是目前跟AJAX结合之后，highcharts制造出来的内存一直没有删除，PF使用率以每秒3MB的速度网上猛涨，令人大感鸭梨、、、（波形图现在困到这一个内存问题了） <br />&nbsp;&nbsp; 最后的度盘，在刚开始采用的Highcharts画的饼图，弄的一块一块的 效果也差，所以在GOOGLE了把JS绘图技术，搜出了 令我大感兴奋的矢量绘图技术，SVG AND VML，SVG支持除ＩＥ外大部分的浏览器，ＶＭＬ仅支持IE5以上的浏览器器，所以采用了SVG+VML结合在浏览器中绘图，图形不错，最后结合AJAX也没有发现内存问题。 <br />&nbsp;&nbsp; 所以现在在这想跟大家讨论一下HighCharts的使用、、请各位发表意见 <br /> <br /></div>自己要做一个实时的监控数据的图形，但是跟AJAX结合的时候，内存增长的速度 比较快，谁能帮我看看怎么回事，谢谢了！<img src="/images/smiles/icon_redface.gif"/> <br /><pre name="code" class="java"> waveLineImage = { chart: { renderTo: 'waveImage', //绘制到DIV容器中，根据ID defaultSeriesType: 'line', //绘制类型 目前是曲线 plotBorderWidth: 1, plotBorderColor: '#99CC99', marginRight: 12, showAxes: true }, title: { text: '', x: -20 //center }, xAxis: { tickWidth: 0, tickInterval: 5, gridLineWidth: 1, gridLineColor: '#99CC99', categories: [] }, yAxis: { title: { text: '' }, min: -1, tickInterval: 5, gridLineWidth: 1, gridLineColor: '#99CC99' }, plotOptions: { series: { animation: false, marker: { enabled: false } } }, tooltip: { enabled:false, formatter: function(){ return null; } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: "monitor", data: [] }, { name: "temp", data: [] }] }</pre> <br /> <br />上面是 初始化曲线图的实例 <br /> <br /><pre name="code" class="java"> var tempArray = null; function drawOscillogram(waveData){ if (waveData) { //传输过来的JSON数据 var dataArray = new Array(); var array = null, point = null, num = null,item = null; var waveDataLength = waveData.length; for (var i = 0; i &lt; waveDataLength; i++) { array = waveData[i].split(","); point = 1 / array.length; for (var j = 0; j &lt; array.length; j++) { num = i + Math.round((point * j) * 10) / 10; item = parseFloat(array[j]); dataArray.push([num, item]); num = null; } array = null; item = null; point = null; } if (waveDataLength &lt; 60) { //当不足60个点时，创建一个临时的数据，绑定到temp当中 if (tempArray == null) { tempArray = new Array(); for (var i = 0; i &lt; 61; i++) { tempArray.push([i, -6]); } } if(!waveLineImage.series[1]) waveLineImage.addSeries("",true,false); waveLineImage.series[1].data = tempArray; } else { tempArray = null; waveLineImage.series[1].remove(); } waveLineImage.series[0].data = dataArray; dataArray = null; waveDataLength = null; waveLineImage.redraw(); //重新绘制HighCharts图形 new Highcharts.Chart(waveLineImage); //绘制HIghcharts图形，这一句会生成大内 //存，想直接调用redraw重绘方法，完成绘图，这样不用重新刷新区域，而是在旧的基础上绘制，会减少内存，但 //是曲线什么都显示不出来 } } </pre> <br /> <br />waveData 是 传过来的 数据，把他绑定到图形中 ，内存长的飞快，每秒3MB，怎么修改，怀疑是//new Highcharts.Chart(waveLineImage);这句话增长的内存，然后调用 highCharts 的redraw 方法，重画，可是没有效果出来 求高手 提错！！！！<br/><strong>问题补充</strong><br/>上面有做出来的效果图，可以下载出来看一下、、 <br /> <br />另外HighCharts有一个redraw重绘方法，但是应该怎么调用呢，我调用无效！<br/><strong>问题补充</strong><br/>主要就是内存的方面了，也看了好多的JavaScript方面性能问题，内存释放问题，但是都不太理想，<br/><strong>问题补充</strong><br/> <br /><table class="bbcode"><tr><td>怎么没人回复啊 泪奔、、</td><td>太遗憾了吧</table><br/><strong>问题补充</strong><br/><div class="quote_title">引用</div><div class="quote_div"><ul> <li>用不用我加点注释 、、 汗 </li><li>哪一点有问题啊 泪奔中、、 </li><li>不回复也得顶起来啊 呜呜、 </li><li>大家都来探讨一下啊 呵呵 </li><li>大家在客户端都用什么方法绘制图表呢 </li></ul></div><br/><strong>问题补充</strong><br/><img src="/images/smiles/icon_sad.gif"/>&nbsp;<img src="/images/smiles/icon_surprised.gif"/>&nbsp;<img src="/images/smiles/icon_lol.gif"/>&nbsp;<img src="/images/smiles/icon_cool.gif"/>&nbsp;<img src="/images/smiles/icon_confused.gif"/>&nbsp;<img src="/images/smiles/icon_eek.gif"/>&nbsp;<img src="/images/smiles/icon_mad.gif"/>&nbsp;<img src="/images/smiles/icon_razz.gif"/>&nbsp;<img src="/images/smiles/icon_redface.gif"/>&nbsp;<img src="/images/smiles/icon_cry.gif"/> <br/><strong>问题补充</strong><br/><div class="quote_title">引用</div><div class="quote_div"><ul> <li><span style="color: #00ff00">咱么是顶起呢？还是顶起呢？呵呵</span> </li><li><span style="color: #0000ff">咱么是顶起呢？还是顶起呢？呵呵</span> </li><li><span style="color: red">顶顶顶 力压千钧</span> </li><li><span style="color: black">虽说晚上不上班 也不至于吧</span> </li><li><span style="color: #adefaa">有哪一点会是不好的 大大们都去哪了</span> </li></ul></div><br/><strong>问题补充</strong><br/><div class="quote_title">奥义之舞 写道</div><div class="quote_div"><div class="quote_title">引用</div><div class="quote_div"><ul> <li><span style="color: #00ff00">咱么是顶起呢？还是顶起呢？呵呵</span> </li><li><span style="color: #0000ff">看帖不回帖 很不给力啊</span> </li><li><span style="color: red">顶顶顶 力压千钧</span> </li><li><span style="color: black">虽说晚上不上班 也不至于吧</span> </li><li><span style="color: #adefaa">有哪一点会是不好的 大大们都去哪了</span> </li></ul></div></div> <br />+1<br/><strong>问题补充</strong><br/><div class="quote_title">引用</div><div class="quote_div">在highcharts官网http://www.highcharts.com/ref/#chart-object查了很久，经过测试，发现一个方法可行，很给力的时刻，修改了点代码，现在使用这种代码之后，可以保持在120KB/s左右的增长率</div> <br />修改后的代码：<pre name="code" class="java">waveLineImage = new Highcharts.Chart({ chart: { renderTo: 'waveImage', //绘制到DIV容器中，根据ID defaultSeriesType: 'line', //绘制类型 目前是曲线 plotBorderWidth: 1, plotBorderColor: '#99CC99', marginRight: 12, showAxes: true }, title: { text: '', x: -20 //center }, xAxis: { tickWidth: 0, tickInterval: 5, gridLineWidth: 1, gridLineColor: '#99CC99', categories: [] }, yAxis: { title: { text: '' }, min: -1, tickInterval: 5, gridLineWidth: 1, gridLineColor: '#99CC99' }, plotOptions: { series: { animation: false, marker: { enabled: false } } }, tooltip: { enabled:false, formatter: function(){ return null; } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: "monitor", data: [] }, { name: "temp", data: [] }] });</pre> 直接实例化绘图对象 <br /><pre name="code" class="java"> var tempArray = null; function drawOscillogram(waveData){ if (waveData) { //传输过来的JSON数据 var dataArray = new Array(); var array = null, point = null, num = null,item = null; var waveDataLength = waveData.length; for (var i = 0; i &lt; waveDataLength; i++) { array = waveData[i].split(","); point = 1 / array.length; for (var j = 0; j &lt; array.length; j++) { num = i + Math.round((point * j) * 10) / 10; item = parseFloat(array[j]); dataArray.push([num, item]); num = null;item=null; } array = null; item = null; point = null; } array = null; item = null; point = null; num = null; item=null; if (waveDataLength &lt; 60) { //当不足60个点时，创建一个临时的数据，绑定到temp当中 if (tempArray == null) { tempArray = new Array(); for (var i = 0; i &lt; 61; i++) { tempArray.push([i, -6]); } } if(!waveLineImage.series[1]) waveLineImage.addSeries("",true,false); waveLineImage.series[1].setData(tempArray); } else { tempArray = null; waveLineImage.series[1].remove(); } waveLineImage.series[0].setData(dataArray); //在这里通过setData方法设置数据 dataArray = null; waveDataLength = null; waveLineImage.redraw(); //这样调用图例对象的重绘方法可以找的到数据，以前数 //据是设置到JSON里面了，这个对象的数据应该没有更新 } } </pre> <br />不过这种现在仍然有100多KB的增长率，对于一个长期停留在页面中不刷新的局面，仍然是一个问题，各位老大们，有没有一个很好的意见提出来，让我继续改进，thank you<br/><strong>问题补充</strong><br/><div class="quote_title">tanqimin 写道</div><div class="quote_div">这个图表真的很蛋痛！</div> <br />哥们这个图表怎么了，很好看啊 呵呵 就是性能有点扯淡，不过性能是决定页面技术的优先选择、、 <br />很惆怅&nbsp;<img src="/images/smiles/icon_eek.gif"/> <br/><strong>问题补充</strong><br/><div class="quote_title">夜之son 写道</div><div class="quote_div">想让大家说什么呢，图太少，不给力。</div> <br />ok 上图 <br/><strong>问题补充</strong><br/>另外这个是VML画的度盘，跟AJAX结合 也不卡，很给力啊 呵呵 推荐 SVG + VML 结合 一秒 10多KB的增长量<br/><strong>问题补充</strong><br/>发现看英文文档狠让人蛋疼的事，有木有，中文帮助文档在哪里 呜呜 <br /> <br /><div class="quote_title">引用</div><div class="quote_div"> <br />希望对我的循环提出哪里可以优化点在、、感觉这里面也会浪费点性能 <br />希望最后能把PF增长率 控制在 10KB以内 <br />希望告我一个 JS代码 控制页面刷新的 代码 <br />这样我可以再内存增长到一定程度的时候 刷新释放内存 <br /></div><br/><strong>问题补充</strong><br/><div class="quote_title">hyj1254 写道</div><div class="quote_div">highChart我也在用，倒是没深究内存增长的问题。它也是vml+svg。内存不释放跟js代码和浏览器自身实现方式都有关系，有些情况你是无法有效释放内存的：比如在ie中，希望刷新释放内存是无法实现的，你可以到taobao、google地图等网站验证下，它默认将所有的页面元素都缓存起来，因此即使js完全没有问题它所占的内存也会越来越大。但chrome就好得多，每次刷新都显著地释放一些内存。至于highChart你可以到官网上反映下，看是否是内存泄露导致的。</div>+1 <br /><div class="quote_title">引用</div><div class="quote_div">用的浏览器 IE 和 火狐的 ，谷歌到没有看，不过同事通过谷歌浏览器访问了一下，正常，内存这块到没有看，这个浏览器的问题一直在关注， IE 和 FireFox的 掐架 一直没有停止 、、、</div> <br /><div class="quote_title">引用</div><div class="quote_div"> <br />&nbsp;&nbsp; 另外JS代码构造对象和释放对象之间，这个度由于刚开始关注性能问题，也没能做的很好，大家看到哪一点可以优化的，可以提出来、、 <br />over&nbsp;<img src="/images/smiles/icon_cry.gif"/>&nbsp;<img src="/images/smiles/icon_lol.gif"/>&nbsp;<img src="/images/smiles/icon_surprised.gif"/> <br /></div> <br /> <br /><br/><strong>问题补充</strong><br/><div class="quote_title">clue 写道</div><div class="quote_div">哦哦。。。原来是HighCharts <br />官方声称是有解决内存泄漏问题，但关键是。。。它指的泄漏是关闭浏览器仍不释放的泄漏，而非运行中释放 <br /> <br />基本上，想要解决难度很大，几乎底层代码都要过一遍，加上清理事件、解除Dom引用的逻辑。 <br />好像excanvas也需要一同改进 <br /> <br />HighCharts代码不便放出（就算放出也没用，版本低，改动大），但还是能做到将近0增长的。 <br /> <br />P.S. 推荐使用sIEve查看IE下Dom节点释放情况，JS本身的GC是很完善的，但与Dom循环引用就无能为力了。所以查看Dom节点的释放情况就知道是哪里有泄漏了。</div> <br />高手、、那按照你这样说，我要想做到内存0增长或近0增长，必须修改highcharts的源代码是么？ <br />期待回答/// <br />对于上SIEVE这个软件，下载了也是用了 ，还有一个 火狐里面可以查看内存的软件，也使用了，但是 但是很头疼， <br />还没有找到解决的办法、 <br />还是经验少啊<br/><strong>问题补充</strong><br/><div class="quote_title">纪红玉 写道</div><div class="quote_div">JavaEye/ItEye <br />1号群 现招人 QQ 群号：39211996 <br />女程序员群7736086 <br />发完帖子我的号就没了，哎！ <br /></div> <br />找女程序员群，貌似很难吧，估计你这个也是新创的、<br/><strong>问题补充</strong><br/><div class="quote_title">yintingbird 写道</div><div class="quote_div">我建议你用FusionCharts，你可以在网上搜一下，他的图表显示就很好，我用的就是这个，很简单的，你可以再往上找一个破解版的，但是破解版的柯南找的时候有点不好找。</div> <br />这个项目 已经基本完成了，这时候在动这个技术不太可可能，有可能到最后的时候 换成 ＳＶＧ　＋　ＶＭＬ了， <br />觉得这个　可以　控制，但是　ＡＪＡＸ　刷新时，内存也是嗖嗖的网上长啊，一秒１０几KB 这还只是 小图形。 <br /> <br /> <br />不过应该比当年用DIV时候强吧、、<img src="/images/smiles/icon_cool.gif"/> <br/><strong>问题补充</strong><br/>很奇怪，为什么要投隐呢，难道我发的板块不对 晕、、<br/><strong>问题补充</strong><br/>偷偷的用 到时候 还得改 先拿着个练练手啊！<br/><strong>问题补充</strong><br/><div class="quote_title">conanca 写道</div><div class="quote_div"><div class="quote_title">奥义之舞 写道</div><div class="quote_div"><div class="quote_title">yintingbird 写道</div><div class="quote_div">我建议你用FusionCharts，你可以在网上搜一下，他的图表显示就很好，我用的就是这个，很简单的，你可以再往上找一个破解版的，但是破解版的柯南找的时候有点不好找。</div> <br />这个项目 已经基本完成了，这时候在动这个技术不太可可能，有可能到最后的时候 换成 ＳＶＧ　＋　ＶＭＬ了， <br />觉得这个　可以　控制，但是　ＡＪＡＸ　刷新时，内存也是嗖嗖的网上长啊，一秒１０几KB 这还只是 小图形。 <br /> <br /> <br />不过应该比当年用DIV时候强吧、、<img src="/images/smiles/icon_cool.gif"/> </div> <br /> <br />HighCharts 商业用的话要收费吧。 <br />你们买了授权还是做的是国内项目？</div> <br />先拿这个练手，到时候重新换一个 <br />准备用raphael 谁用过这个，这个性能怎么样呢，封装的SVG+ＶＭＬ<br/><strong>问题补充</strong><br/><div class="quote_title">红四团 写道</div><div class="quote_div">HighCharts所renderer出来的每个Element都是可以destroy的，每个element都有destroy方法。HighCharts封装了VML和SVG，基本上能够跨浏览器。</div> <br />这个还真不知道，只知道总的有个释放的对象，结果一 释放，悲剧的事情发生了，整个图形都没有了<img src="/images/smiles/icon_cry.gif"/> <br /> <br /> <br />另外想知道 highcharts商用要上交多少money啊 <br /><br/><strong>问题补充</strong><br/><div class="quote_title">sunofsummer 写道</div><div class="quote_div">我以前和你遇到过同样的问题，amcharts可以解决。</div> <br />性能方面可以解决么，内存长的快不，和AJAX交互怎么样，<br/><strong>问题补充</strong><br/><div class="quote_title">kiven 写道</div><div class="quote_div">http://www.open-lib.com/Type/164-1.jsp <br /> <br />这里面或许有你要找的。大家都共享一下自己项目用的图标组件吧。</div> <br />thank you <br /> <br /> <br /> <br /> <br /> <br /> <br />不知道who用过Flex么 他生成的swf文件是在客户端生成的，还是服务器生成之后传输过来的呢，如果我要对他进行定时刷新，速度怎么样<br/><strong>问题补充</strong><br/><div class="quote_title">ahzzhen2 写道</div><div class="quote_div">用过Flex as3脚本写过一个监控的，内存占用是用仪表盘形式做的。也试过用pushlet+highchart写过（不是很理想，抛弃）</div> <br />貌似没理解我的意思，我说的是Flex监控 实时刷新 内存部分长的块么， 是在客户端 或者 服务器端绘图，绘制出来的图形传递速度怎么样，占用带宽多么<br/><strong>问题补充</strong><br/><div class="quote_title">sunofsummer 写道</div><div class="quote_div"><div class="quote_title">奥义之舞 写道</div><div class="quote_div"><div class="quote_title">sunofsummer 写道</div><div class="quote_div">我以前和你遇到过同样的问题，amcharts可以解决。</div> <br />性能方面可以解决么，内存长的快不，和AJAX交互怎么样，</div> <br /> <br />amcharts是基于flash实现的 如果网页游戏不存在内存问题的话 它也不会有的。 <br /></div> <br />额 这种的是不是刚开始都要进行加载等待一下啊

vue-cli 打包文件报错

# vue-cli 打包文件报错 报错代码如下 ```shell > canteen@1.0.0 build D:\桌面\workPlace\07.items\06..canteen > node build/build.js / building for production...Error processing file: static/css/app.9e1b2591f3911ed3227be61dd300833e.css (node:1908) UnhandledPromiseRejectionWarning: postcss-svgo: Error in parsing SVG: Unquoted attribute value Line: 0 Column: 14 Char: \ (node:1908) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3) (node:1908) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. ``` - 也修改了 config/index.js 下面的 build ```js build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', /** * Source Maps */ productionSourceMap: false, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report } ``` 但是还是报错，有没有大佬支招

hexo博客无法显示背景图片

hexo框架写的博客，主题是next，本地预览可以看到背景，但是真实网站看不到，已经试过先hexo c之后再上传，还是没有用 hexo的配置文件 ``` # Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: subtitle: description: 这是一个搞着玩的博客，功能暂未完全完善，将就着看吧您内~！ keywords: author: 肖肖 language: zh-Hans timezone: # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://yoursite.com root: / permalink: :year/:month/:day/:title/ permalink_defaults: # Directory source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: # Writing new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: true relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: # Home page setting # path: Root path for your blogs index page. (default = '') # per_page: Posts displayed per page. (0 = disable pagination) # order_by: Posts order. (Order by date descending by default) index_generator: path: '' per_page: 10 order_by: -date # Category & Tag default_category: uncategorized category_map: tag_map: # Date / Time format ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ date_format: YYYY-MM-DD time_format: HH:mm:ss # Pagination ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: branch: master ``` 然后是next的配置文件 ``` # =============================================================== # ========================= ATTENTION! ========================== # =============================================================== # NexT repository is moving here: https://github.com/theme-next # =============================================================== # It's rebase to v6.0.0 and future maintenance will resume there # =============================================================== # --------------------------------------------------------------- # Theme Core Configuration Settings # --------------------------------------------------------------- # Set to true, if you want to fully override the default configuration. # Useful if you don't want to inherit the theme _config.yml configurations. override: false # --------------------------------------------------------------- # Site Information Settings # --------------------------------------------------------------- # To get or check favicons visit: https://realfavicongenerator.net # Put your favicons into `hexo-site/source/` (recommend) or `hexo-site/themes/next/source/images/` directory. # Default NexT favicons placed in `hexo-site/themes/next/source/images/` directory. # And if you want to place your icons in `hexo-site/source/` root directory, you must remove `/images` prefix from pathes. # For example, you put your favicons into `hexo-site/source/images` directory. # Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo. favicon: small: /images/favicon-16x16-next.png medium: /images/favicon.ico apple_touch_icon: /images/apple-touch-icon-next.png safari_pinned_tab: /images/logo.svg #android_manifest: /images/manifest.json #ms_browserconfig: /images/browserconfig.xml # Set default keywords (Use a comma to separate) keywords: "Hexo, NexT" # Set rss to false to disable feed link. # Leave rss as empty to use site's feed link. # Set rss to specific value if you have burned your feed already. rss: footer: # Specify the date when the site was setup. # If not defined, current year will be used. since: 2019 # Icon between year and copyright info. icon: user # If not defined, will be used `author` from Hexo main config. copyright: # ------------------------------------------------------------- # Hexo link (Powered by Hexo). powered: true theme: # Theme & scheme info link (Theme - NexT.scheme). enable: true # Version info of NexT after scheme info (vX.X.X). version: true # ------------------------------------------------------------- # Any custom text can be defined here. #custom_text: Hosted by <a target="_blank" href="https://pages.github.com">GitHub Pages</a> # --------------------------------------------------------------- # SEO Settings # --------------------------------------------------------------- # Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog. # See: https://support.google.com/webmasters/answer/139066 # Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com ) canonical: true # Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization. seo: false # If true, will add site-subtitle to index page, added in main hexo config. # subtitle: Subtitle index_with_subtitle: false # --------------------------------------------------------------- # Menu Settings # --------------------------------------------------------------- # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives). # Usage: `Key: /link/ || icon` # Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive. # Value before `||` delimeter is the target link. # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded. menu: home: / || home #about: /about/ || user #tags: /tags/ || tags #categories: /categories/ || th archives: /archives/ || archive #schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap #commonweal: /404/ || heartbeat # Enable/Disable menu icons. menu_icons: enable: true # --------------------------------------------------------------- # Scheme Settings # --------------------------------------------------------------- # Schemes #scheme: Muse #scheme: Mist #scheme: Pisces scheme: Gemini # --------------------------------------------------------------- # Sidebar Settings # --------------------------------------------------------------- # Social Links. # Usage: `Key: permalink || icon` # Key is the link label showing to end users. # Value before `||` delimeter is the target permalink. # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded. #social: #GitHub: https://github.com/yourname || github #E-Mail: mailto:yourname@gmail.com || envelope #Google: https://plus.google.com/yourname || google #Twitter: https://twitter.com/yourname || twitter #FB Page: https://www.facebook.com/yourname || facebook #VK Group: https://vk.com/yourname || vk #StackOverflow: https://stackoverflow.com/yourname || stack-overflow #YouTube: https://youtube.com/yourname || youtube #Instagram: https://instagram.com/yourname || instagram #Skype: skype:yourname?call|chat || skype social_icons: enable: true icons_only: false transition: false # Blog rolls links_icon: link links_title: Links links_layout: block #links_layout: inline #links: #Title: http://example.com/ # Sidebar Avatar # in theme directory(source/images): /images/avatar.gif # in site directory(source/uploads): /uploads/avatar.gif avatar: /images/avatar.png # Table Of Contents in the Sidebar toc: enable: true # Automatically add list number to toc. number: true # If true, all words will placed on next lines if header width longer then sidebar width. wrap: false # Creative Commons 4.0 International License. # http://creativecommons.org/ # Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero #creative_commons: by-nc-sa #creative_commons: sidebar: # Sidebar Position, available value: left | right (only for Pisces | Gemini). position: left #position: right # Sidebar Display, available value (only for Muse | Mist): # - post expand on posts automatically. Default. # - always expand for all pages automatically # - hide expand only when click on the sidebar toggle icon. # - remove Totally remove sidebar including sidebar toggle. display: post #display: always #display: hide #display: remove # Sidebar offset from top menubar in pixels (only for Pisces | Gemini). offset: 12 # Back to top in sidebar (only for Pisces | Gemini). b2t: false # Scroll percent label in b2t button. scrollpercent: true # Enable sidebar on narrow view (only for Muse | Mist). onmobile: true # --------------------------------------------------------------- # Post Settings # --------------------------------------------------------------- # Automatically scroll page to section which is under <!-- more --> mark. scroll_to_more: true # Automatically saving scroll position on each post/page in cookies. save_scroll: false # Automatically excerpt description in homepage as preamble text. excerpt_description: true # Automatically Excerpt. Not recommend. # Please use <!-- more --> in the post to control excerpt accurately. auto_excerpt: enable: true length: 0 # Post meta display settings post_meta: item_text: true created_at: true updated_at: false categories: true # Post wordcount display settings # Dependencies: https://github.com/willin/hexo-wordcount post_wordcount: item_text: true wordcount: true min2read: true totalcount: false separated_meta: true # Wechat Subscriber #wechat_subscriber: #enabled: true #qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg #description: ex. subscribe to my blog by scanning my public wechat account # Reward #reward_comment: Donate comment here #wechatpay: /images/wechatpay.jpg #alipay: /images/alipay.jpg #bitcoin: /images/bitcoin.png # Declare license on posts post_copyright: enable: false license: CC BY-NC-SA 3.0 license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/ # --------------------------------------------------------------- # Misc Theme Settings # --------------------------------------------------------------- # Reduce padding / margin indents on devices with narrow width. mobile_layout_economy: false # Android Chrome header panel color ($black-deep). android_chrome_color: "#222" # Custom Logo. # !!Only available for Default Scheme currently. # Options: # enabled: [true/false] - Replace with specific image # image: url-of-image - Images's url custom_logo: enabled: true image: # Code Highlight theme # Available value: # normal | night | night eighties | night blue | night bright # https://github.com/chriskempson/tomorrow-theme highlight_theme: normal # --------------------------------------------------------------- # Font Settings # - Find fonts on Google Fonts (https://www.google.com/fonts) # - All fonts set here will have the following styles: # light, light italic, normal, normal italic, bold, bold italic # - Be aware that setting too much fonts will cause site running slowly # - Introduce in 5.0.1 # --------------------------------------------------------------- # CAUTION! Safari Version 10.1.2 bug: https://github.com/iissnan/hexo-theme-next/issues/1844 # To avoid space between header and sidebar in Pisces / Gemini themes recommended to use Web Safe fonts for `global` (and `logo`): # Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS # --------------------------------------------------------------- font: enable: true # Uri of fonts host. E.g. //fonts.googleapis.com (Default). host: # Font options: # `external: true` will load this font family from `host` above. # `family: Times New Roman`. Without any quotes. # `size: xx`. Use `px` as unit. # Global font settings used on <body> element. global: external: true family: Lato size: # Font settings for Headlines (h1, h2, h3, h4, h5, h6). # Fallback to `global` font settings. headings: external: true family: size: # Font settings for posts. # Fallback to `global` font settings. posts: external: true family: # Font settings for Logo. # Fallback to `global` font settings. logo: external: true family: size: # Font settings for <code> and code blocks. codes: external: true family: size: # --------------------------------------------------------------- # Third Party Services Settings # --------------------------------------------------------------- # MathJax Support mathjax: enable: false per_page: false cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML # Han Support docs: https://hanzi.pro/ han: false # Swiftype Search API Key #swiftype_key: # Baidu Analytics ID #baidu_analytics: # Duoshuo ShortName #duoshuo_shortname: # Disqus disqus: enable: false shortname: count: true # Hypercomments #hypercomments_id: # changyan changyan: enable: false appid: appkey: # Valine. # You can get your appid and appkey from https://leancloud.cn # more info please open https://valine.js.org valine: enable: true appid: appkey: notify: false # mail notifier , https://github.com/xCss/Valine/wiki verify: false # Verification code placeholder: 高冷的你说点什么吧( ´･･)ﾉ(._.`) avatar: mm # gravatar style guest_info: nick,mail,link # custom comment header pageSize: 10 # pagination size # Support for youyan comments system. # You can get your uid from http://www.uyan.cc #youyan_uid: your uid # Support for LiveRe comments system. # You can get your uid from https://livere.com/insight/myCode (General web site) #livere_uid: your uid # Gitment # Introduction: https://imsun.net/posts/gitment-introduction/ # You can get your Github ID from https://api.github.com/users/<Github username> gitment: enable: false mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway count: true # Show comments count in post meta area lazy: false # Comments lazy loading with a button cleanly: false # Hide 'Powered by ...' on footer, and more language: # Force language, or auto switch by theme github_user: # MUST HAVE, Your Github ID github_repo: # MUST HAVE, The repo you use to store Gitment comments client_id: # MUST HAVE, Github client id for the Gitment client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled # Baidu Share # Available value: # button | slide # Warning: Baidu Share does not support https. #baidushare: ## type: button # Share # This plugin is more useful in China, make sure you known how to use it. # And you can find the use guide at official webiste: http://www.jiathis.com/. # Warning: JiaThis does not support https. #jiathis: ##uid: Get this uid from http://www.jiathis.com/ #add_this_id: # Share duoshuo_share: true # NeedMoreShare2 # This plugin is a pure javascript sharing lib which is useful in China. # See: https://github.com/revir/need-more-share2 # Also see: https://github.com/DzmVasileusky/needShareButton # iconStyle: default | box # boxForm: horizontal | vertical # position: top / middle / bottom + Left / Center / Right networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit, # Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,Slashdot, # Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine, # Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru needmoreshare2: enable: false postbottom: enable: false options: iconStyle: box boxForm: horizontal position: bottomCenter networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook float: enable: false options: iconStyle: box boxForm: horizontal position: middleRight networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook # Google Webmaster tools verification setting # See: https://www.google.com/webmasters/ #google_site_verification: # Google Analytics #google_analytics: # Bing Webmaster tools verification setting # See: https://www.bing.com/webmaster/ #bing_site_verification: # Yandex Webmaster tools verification setting # See: https://webmaster.yandex.ru/ #yandex_site_verification: # CNZZ count #cnzz_siteid: # Application Insights # See https://azure.microsoft.com/en-us/services/application-insights/ # application_insights: # Make duoshuo show UA # user_id must NOT be null when admin_enable is true! # you can visit http://dev.duoshuo.com get duoshuo user id. duoshuo_info: ua_enable: true admin_enable: false user_id: 0 #admin_nickname: Author # Post widgets & FB/VK comments settings. # --------------------------------------------------------------- # Facebook SDK Support. # https://github.com/iissnan/hexo-theme-next/pull/410 facebook_sdk: enable: false app_id: #<app_id> fb_admin: #<user_id> like_button: #true webmaster: #true # Facebook comments plugin # This plugin depends on Facebook SDK. # If facebook_sdk.enable is false, Facebook comments plugin is unavailable. facebook_comments_plugin: enable: false num_of_posts: 10 # min posts num is 1 width: 100% # default width is 550px scheme: light # default scheme is light (light or dark) # VKontakte API Support. # To get your AppID visit https://vk.com/editapp?act=create vkontakte_api: enable: false app_id: #<app_id> like: true comments: true num_of_posts: 10 # Star rating support to each article. # To get your ID visit https://widgetpack.com rating: enable: false id: #<app_id> color: fc6423 # --------------------------------------------------------------- # Show number of visitors to each article. # You can visit https://leancloud.cn get AppID and AppKey. leancloud_visitors: enable: false app_id: #<app_id> app_key: #<app_key> # Another tool to show number of visitors to each article. # visit https://console.firebase.google.com/u/0/ to get apiKey and projectId # visit https://firebase.google.com/docs/firestore/ to get more information about firestore firestore: enable: false collection: articles #required, a string collection name to access firestore database apiKey: #required projectId: #required bluebird: false #enable this if you want to include bluebird 3.5.1(core version) Promise polyfill # Show PV/UV of the website/page with busuanzi. # Get more information on http://ibruce.info/2015/04/04/busuanzi/ busuanzi_count: # count values only if the other configs are false enable: true # custom uv span for the whole site site_uv: true site_uv_header: 本站访问人数 site_uv_footer: 人次 # custom pv span for the whole site site_pv: true site_pv_header: 本站访问量 site_pv_footer: 次 # custom pv span for one page only page_pv: true page_pv_header: 本文阅读量 page_pv_footer: 次 # Tencent analytics ID # tencent_analytics: # Tencent MTA ID # tencent_mta: # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO baidu_push: false # Google Calendar # Share your recent schedule to others via calendar page # # API Documentation: # https://developers.google.com/google-apps/calendar/v3/reference/events/list calendar: enable: false calendar_id: <required> api_key: <required> orderBy: startTime offsetMax: 24 offsetMin: 4 timeZone: showDeleted: false singleEvents: true maxResults: 250 # Algolia Search algolia_search: enable: false hits: per_page: 10 labels: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" hits_stats: "${hits} results found in ${time} ms" # Local search # Dependencies: https://github.com/flashlab/hexo-generator-search local_search: enable: true # if auto, trigger search by changing input # if manual, trigger search by pressing enter key or search button trigger: auto # show top n results per article, show all results by setting to -1 top_n_per_article: 1 # --------------------------------------------------------------- # Tags Settings # --------------------------------------------------------------- # External URL with BASE64 encrypt & decrypt. # Usage: {% exturl text url "title" %} # Alias: {% extlink text url "title" %} exturl: false # Note tag (bs-callout). note: # Note tag style values: # - simple bs-callout old alert style. Default. # - modern bs-callout new (v2-v3) alert style. # - flat flat callout style with background, like on Mozilla or StackOverflow. # - disabled disable all CSS styles import of note tag. style: simple icons: false border_radius: 3 # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6). # Offset also applied to label tag variables. This option can work with disabled note tag. light_bg_offset: 0 # Label tag. label: true # Tabs tag. tabs: enable: true transition: tabs: false labels: true border_radius: 0 #! --------------------------------------------------------------- #! DO NOT EDIT THE FOLLOWING SETTINGS #! UNLESS YOU KNOW WHAT YOU ARE DOING #! --------------------------------------------------------------- # Use velocity to animate everything. motion: enable: true async: false transition: # Transition variants: # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut post_block: fadeIn post_header: slideDownIn post_body: slideDownIn coll_header: slideLeftIn # Only for Pisces | Gemini. sidebar: slideUpIn # Fancybox fancybox: true # Progress bar in the top during page loading. pace: true # Themes list: #pace-theme-big-counter #pace-theme-bounce #pace-theme-barber-shop #pace-theme-center-atom #pace-theme-center-circle #pace-theme-center-radar #pace-theme-center-simple #pace-theme-corner-indicator #pace-theme-fill-left #pace-theme-flash #pace-theme-loading-bar #pace-theme-mac-osx #pace-theme-minimal # For example # pace_theme: pace-theme-center-simple pace_theme: pace-theme-minimal # Canvas-nest canvas_nest: true # three_waves three_waves: false # canvas_lines canvas_lines: false # canvas_sphere canvas_sphere: false # Only fit scheme Pisces # Canvas-ribbon # size: The width of the ribbon. # alpha: The transparency of the ribbon. # zIndex: The display level of the ribbon. canvas_ribbon: enable: false size: 300 alpha: 0.6 zIndex: -1 # Script Vendors. # Set a CDN address for the vendor you want to customize. # For example # jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js # Be aware that you should use the same version as internal ones to avoid potential problems. # Please use the https protocol of CDN files when you enable https on your site. vendors: # Internal path prefix. Please do not edit it. _internal: lib # Internal version: 2.1.3 jquery: # Internal version: 2.1.5 # See: http://fancyapps.com/fancybox/ fancybox: fancybox_css: # Internal version: 1.0.6 # See: https://github.com/ftlabs/fastclick fastclick: # Internal version: 1.9.7 # See: https://github.com/tuupola/jquery_lazyload lazyload: # Internal version: 1.2.1 # See: http://VelocityJS.org velocity: # Internal version: 1.2.1 # See: http://VelocityJS.org velocity_ui: # Internal version: 0.7.9 # See: https://faisalman.github.io/ua-parser-js/ ua_parser: # Internal version: 4.6.2 # See: http://fontawesome.io/ fontawesome: # Internal version: 1 # https://www.algolia.com algolia_instant_js: algolia_instant_css: # Internal version: 1.0.2 # See: https://github.com/HubSpot/pace # Or use direct links below: # pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js # pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css pace: pace_css: # Internal version: 1.0.0 # https://github.com/hustcc/canvas-nest.js canvas_nest: # three three: # three_waves # https://github.com/jjandxa/three_waves three_waves: # three_waves # https://github.com/jjandxa/canvas_lines canvas_lines: # three_waves # https://github.com/jjandxa/canvas_sphere canvas_sphere: # Internal version: 1.0.0 # https://github.com/zproo/canvas-ribbon canvas_ribbon: # Internal version: 3.3.0 # https://github.com/ethantw/Han han: # needMoreShare2 # https://github.com/revir/need-more-share2 needMoreShare2: # Assets css: css js: js images: images # Online contact daovoice: true daovoice_app_id: # 这里填你刚才获得的 app_id # Theme version live2d: enable: false model: z16 bottom: -30 version: 5.1.4 ``` 已经折腾了两天了，就差回档了，感觉回档也没有用，小白在此感谢各位大佬了 然后我修改背景图片修改的是Blog\themes\next\source\css\_custom\custom.styl文件 ``` // Custom styles. // 主页文章添加阴影效果 .post { margin-top: 60px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); } .site-meta { background: $orange; //天空的颜色，和我的眼镜是绝配 } // 鼠标样式 * { cursor: url(""),auto!important } :active { cursor: url(""),auto!important } // Custom styles. body { background-image: url(/images/background.jpg); background-attachment: fixed; background-repeat: no-repeat; background-size: cover； //改变背景色和透明度 .main-inner { padding: 25px; opacity: 0.85; border-radius: 10px; right: 0 !important; top: 0 !important; bottom: 0 !important; } } body .main { margin-bottom: 0px; } ```

关于ajax和ssm框架之间传值的问题

这里是jsp中的代码 <script type="text/javascript"> $().ready(function() { $(".caidandanhang").mouseover(function(){ $(this).css("color", "#900"); $(".fenlei").css("display", "block"); var id=$(this).data("id"); $.ajax({ type:"post", url:"changetype", data:"id="+id+"", dataType:"json", success:function(data){ } }); }); $(".caidandanhang").mouseout(function(){ $(this).css("color", "#fff"); $(".fenlei").css("display", "none"); }); }); </script> 这里是controller的代码 @RequestMapping(value="/changetype",method={RequestMethod.POST,RequestMethod.GET}) public void changetype(Integer id){ List<YiCeng> list = bs.searchType(id); JSONArray json = JSONArray.fromObject(list); PrintWriter out=null; out.print(json); } 现在想实现的功能是 在我鼠标移上的时候展示这个分类里面所有的小分类 现在list拿到了我想展示的小分类 但是不知道怎么传到前台 然后前台怎么处理放到页面????求大神。。！！！！！！！！ 附上 前台jsp 的完整代码：想把找到的list在id为fenlei的div中展示 <body bgcolor="#f6f6f6"> <!-- 可隐藏栏 --> <div id="yincangtiao"> <div id="yincang"> <a id="yincangtupian" target="_blank"></a> <div id="guanbi"> <a>&times;</a> </div> </div> </div> <div style="width: 100%;height: 30px;background-color: #e3e4e5;z-index:-1;position:absolute;"></div> <div style="width:1190px;margin:0 auto;position:relative;"> <div style="width:1190px;height:170px;margin:0 auto;overflow:hidden;"> <div id="selectChengShi"> <div>北京</div> <div>上海</div> <div>天津</div> <div>重庆</div> <div>河北</div> <div>山西</div> <div>河南</div> <div>辽宁</div> <div>吉林</div> <div>黑龙江</div> <div>内蒙古</div> <div>江苏</div> <div>山东</div> <div>安徽</div> <div>浙江</div> <div>福建</div> <div>湖北</div> <div>湖南</div> <div>广东</div> <div>广西</div> <div>江西</div> <div>四川</div> <div>海南</div> <div>贵州</div> <div>云南</div> <div>西藏</div> <div>陕西</div> <div>甘肃</div> <div>青海</div> <div>宁夏</div> <div>新疆</div> <div>港澳</div> <div>台湾</div> <div>钓鱼岛</div> <div>海外</div> </div> <div id="fuzhudiv1"></div> <!-- 图标 --> <div id="logo"> <a href="zhuye"><img src="images/logo.v2.png"> </a> </div> <!-- 横向登陆注册菜单等等 --> <div id="dingbu"> <div id="weizhi"> <a>北京</a> </div> <div id="dingbuyou"> <div id="dingbuyou1"> <div class="dingbuc1" style="width:135px;text-align: right;"> <% if (user == null) { %> <a id="nihaodenglu" href="login" style="color:#999999;"> 你好，请登录</a> &nbsp; <a id="zhuce" href="zhuce" style="color:#ed6463;">免费注册</a> <% } else { %><%=user.getUsername()%>，你好&nbsp; <a href="exit">注销</a> <% } %> </div> </div> <div id="dingbuyou1"> <div class="dingbuc1"> <a id="wodedingdan" href="wodedingdan" style="color:#999999;">我的订单</a> </div> </div> <div id="dingbuyou1"> <div class="dingbuc1"> <a>我的京东 <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-moreunfold"></use> </svg> </a> </div> </div> <div id="dingbuyou1"> <div class="dingbuc1"> <a id="jingdonghuiyuan" href="" style="color:#999999;">京东会员</a> </div> </div> <div id="dingbuyou1"> <div class="dingbuc1"> <a id="qiyecaigou" href="" style="color:#999999;">企业采购</a> </div> </div> <div id="dingbuyou1"> <div class="dingbuc1"> <a>客户服务 <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-moreunfold"></use> </svg> </a> </div> </div> <div id="dingbuyou1"> <div class="dingbuc1"> <a>网站导航 <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-moreunfold"></use> </svg> </a> </div> </div> <div id="dingbuyou1"> <div class="dingbuc1" style="margin-right:0px;border-width:0;"> <a>手机京东</a> </div> </div> </div> </div> <div id="zonghebox"> <div id="zongheboxshang"> <div style="width:686px;height:80px;float:left;"> <div id="sousuokuang"> <div id="shurukuang"> <input type="text" style="width:500px;height:32px;border:0px;font-size:14px;" /> </div> <div id="huizhaoxiangji"></div> <div id="sousuo"> <a><img src="images/sss.png" /> </a> </div> </div> <div id="redianci"> <a>买1送1</a><a>感恩母亲</a><a>低至5折</a><a>阿玛尼</a><a>2件199</a><a>儿童睡衣</a><a>妈妈鞋</a><a>吃货嘉年华</a><a>蓝牙键盘</a> </div> </div> <div id="wodegouwuche" onclick="location='gouwuche'"> <div id="gouwuchetubiao"></div> <div id="wodegouwuchezi"> <a>我的购物车</a> </div> </div> <div id="shoujierweima"> <img src="images/5912d52dNd0e40612.png" width="60px" height="60px"> </div> </div> <div id="zongheboxxia"> <div id="caidan"> <div class="caidanyoubiankuang" style="margin-left:25px;"> <a>秒杀</a> <a>优惠券</a> <a>闪购</a> <a>拍卖</a> </div> <div class="caidanyoubiankuang"> <a>服装城</a> <a>京东超市</a> <a>生鲜</a> <a>全球购</a> </div> <div class="caidanyoubiankuang" style="border:0px;"> <a>京东金融</a> </div> </div> <div id="guanggao1"> <a><img src="images/59154db4N9e9c2fa7.jpg" width="190px" height="40px"> </a> </div> </div> </div> </div> <div style="width:1190px;margin:0 auto;"> <div id="shangpinliebiao"> <div id="fenleikuang"></div> <div style="width:190px;height:450px;margin-top:15px;"> <%List<YiCeng> yicenglist=(List<YiCeng>)request.getAttribute("list"); for(int i=0;i<yicenglist.size();i++){ %> <div onclick="location.href='bookhomepage'" data-id=<%=yicenglist.get(i).getId()%> class="caidandanhang"><%=yicenglist.get(i).getName() %></div> <%} %> </div> </div> <div class="fenlei" style="width:700px;height:400px;display:none;z-index:1;background-color:#fff;border:1px black solid;position: absolute;left:200px;"> <% List<BigType> list = (List<BigType>) request .getAttribute("typelist"); for (int i = 0; i <list.size(); i++) { %> <div style="width:700px;height:50px;"> <div style="width:150px;height:50px;color:#666;font-size:14px;font-weight:bold;float: left;"> <%= list.get(i).getB_typename() %> </div> <ul style="list-style:none"> <%List<SmallType> slist=list.get(i).getList(); for(SmallType st:slist){ %> <li style="list-style:none;width:160px;height:50px;color:#666;font-size:14px;float: left;"> <%= st.getS_typename() %> </li> <%} %> </ul> </div> <%} %> </div> <div id="zhutu"> <div id="lunbotu"> <ul id="lunboimgUl"> <li><a href=""><img src="images/586b49bcNd786cb33.jpg" /> </a></li> <li><a href=""><img src="images/591011e4N103be08a.jpg" /> </a></li> <li><a href=""><img src="images/591015bdN4dc555a0.jpg" /> </a></li> <li><a href=""><img src="images/591048a4N7dd3f530.jpg" /> </a></li> <li><a href=""><img src="images/590bf9f9N4b166d34.jpg" /> </a></li> <li><a href=""><img src="images/590bf9f9N4b166d34.jpg" /> </a></li> <li><a href=""><img src="images/590bf9f9N4b166d34.jpg" /> </a></li> <li><a href=""><img src="images/590bf9f9N4b166d34.jpg" /> </a></li> </ul> <div id="icon"> <ul id="iconUl"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div id="zuojiantou" style="color:#FFF"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-back"></use> </svg> </div> <div id="youjiantou" style="color:#FFF"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-more"></use> </svg> </div> </div> <div id="zuotu"> <a><img src="images/59118ba6N72b56d4e.jpg!q90" /> </a> </div> <div id="youtu"> <a><img src="images/5914035bN928a1a08.jpg" /> </a> </div> </div> <div id="kuaijietongdao"> <div id="yonghu"> <div id="huanyingyonghu"> <div id="yonghutouxiang"> <img src="images/no_login.jpg" width="40px;" height="40px;" style="border-radius:40px;" /> </div> <div id="dengluzhuce"> <a>Hi，欢迎来到京东..</a><br /> <a href="">登录</a> <a href="">注册</a> </div> </div> <div id="xinrenfuli"> <a>新人福利</a> </div> <div id="PULShuiyuan">PULS会员</div> </div> <div id="cuxiaoguanggao"> <div style="width:160px;height:22px;margin:7px auto;font-size:12px;border-bottom:1px solid #e6e6e6;"> <div id="cuxiao"> <a>促销</a> </div> <div style="width:9px;height:16px;float:left;border-right:1px solid #dfe0e1;"></div> <div id="guanggao"> <a>广告</a> </div> <div id="gengduo"> <a href="">更多</a> </div> </div> <div style="font-size:12px;line-height:25px;margin-left:15px;"> <p> <a>爆款秒杀 低至五折</a> </p> <p> <a>京东健康母亲节关爱不打折</a> </p> <p> <a>抢4999，爆款手机买1送1</a> </p> <p> <a>母亲节，有爱就“购”了</a> </p> </div> </div> <div id="richangshenghuo"> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:0px -86px;"></div> <div class="shenghuowenzi"> <a href="">话费</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:0px -43px;"></div> <div class="shenghuowenzi"> <a href="">机票</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:-44px -86px;"></div> <div class="shenghuowenzi"> <a href="">酒店</a> </div> </div> <div class="shenghuotubiao" style="border-right:0px;"> <div class="shenghuotu" style="background-position:-88px 0px;"></div> <div class="shenghuowenzi"> <a href="">游戏</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:-88px -43px;"></div> <div class="shenghuowenzi"> <a href="">企业购</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:0px 0px;"></div> <div class="shenghuowenzi"> <a href="">加油卡</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:-44px -43px;"></div> <div class="shenghuowenzi"> <a href="">电影票</a> </div> </div> <div class="shenghuotubiao" style="border-right:0px;"> <div class="shenghuotu" style="background-position:-88px -86px;"></div> <div class="shenghuowenzi"> <a href="">火车票</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:-132px 0px;"></div> <div class="shenghuowenzi"> <a href="">众筹</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:-132px -43px;"></div> <div class="shenghuowenzi"> <a href="">理财</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:-132px -86px;"></div> <div class="shenghuowenzi"> <a href="">礼品卡</a> </div> </div> <div class="shenghuotubiao" style="border-right:0px;"> <div class="shenghuotu" style="background-position:-44px 0px;"></div> <div class="shenghuowenzi"> <a href="">白条</a> </div> </div> </div> </div> </div> </div> <div style="width:100%;background-color:#eaeaea;margin-top:0px;"> <div style="width:1190px;margin:0 auto;"> <img src="images/di.png" width="1190px;" height="500px;"> </div> </div> </body>

如何实现子菜单的滚动样式

这是一个仿微信菜单的页面，先上代码 jsp页面代码： <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>New Document</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> *{padding:0; margin:0;} .bg { position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.8; } ul, ol, li, dl { list-style-type: none; } .box { width: 100%; display: -webkit-box; display: -moz-box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .box > * { -webkit-box-flex: 1; -moz-box-flex: 1; } a:link, a:visited { color: #575757; text-decoration: none; } a { text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.35); } a:link, a:visited { color: #575757; text-decoration: none; } a { text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.35); } .nav4{ height:45px; } .nav4 ul{ position:fixed; z-index:200; bottom:0; left:0; width:100% } .nav4 li{ border:1px solid rgba(190,190,190,1); height:45px; border-bottom:0; border-right:0; position:relative; -webkit-box-shadow:inset 0 0 3px #fff; } .nav4 li:nth-of-type(1){border-left;0;} .nav4 li>a{ font-size:15px; -webkit-box-sizing:border-box; box-sizing:border-box; /*border:1px solid #f9f8f9;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); border-bottom:0; display:block; line-height:45px; text-align:center; background:-webkit-gradient(linear, 0 0, 0 100%, from(#f1f1f1), to(#dcdcdc), color-stop(35% ,#ededed), color-stop(50%, #e3e3e3) ); } .nav4 li>a:only-child span{ background:none; padding-left:0; } .nav4 li>a.on + dl{ display: block; } .nav4 li>a span{ color: #4f4d4f; display: inline-block; padding-left: 15px; background: url(images/1.svg#2) no-repeat 4px 18px; -webkit-background-size: 9px auto; text-shadow:0px 1px 0px #ffffff; } /***********************/ .nav4 dl{ display:none; position:absolute; z-index:220; bottom:60px; left:50%; width:100px; margin-left:-50px; background:red; /*min-height:100px;*/ background:#e4e3e2; /*border:1px solid #afaeaf;*/ border-radius:5px; -webkit-box-shadow:inset 0 0 3px #fff; background:url(images/2.svg#3) no-repeat center center; -webkit-background-size:100%; background-size:100%; } /*, .nav4 dl:after*/ .nav4 dl:before{ content:""; display:inline-block; position:absolute; z-index:240; bottom:0; left:50%; /*width:0; height:0; border:8px solid red; border-color:#afaeaf transparent transparent transparent; margin-left:-8px; margin-bottom:-16px;*/ width:10px; height:8px; background: url(images/1.svg#2) no-repeat center -55px; -webkit-background-size: 10px auto; bottom: -7px; margin-left: -5px; } /*.nav4 dl:after{ z-index:241; border-color:#e4e3e2 transparent transparent transparent; margin-bottom:-15px; }*/ .nav4 dl dd{ line-height:45px; text-align:center; background:-webkit-gradient(linear, 0 0, 100% 0, from(rgba(194,194,194,0.8)), to(rgba(194,194,194,0.8)), color-stop(50%, rgba(194,194,194,0.8))); background-size:80% 1px; background-repeat:no-repeat; background-position: center bottom; /*background: url(images/3.svg#4) no-repeat center bottom; -webkit-background-size:100px 1px;*/ } .nav4 dl dd:last-of-type{ background:none; } .nav4 dl dd a{ font-size: 15px; display:block; color:#4f4d4f; text-shadow:0px 1px 0px #ffffff; white-space: pre; overflow: hidden; text-overflow: ellipsis; } .nav4 .masklayer_div{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 180; background: rgba(0,0,0,0); } .nav4 .masklayer_div.on{display: block;} </style> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <script src="js/nav4.js"></script> <body> <div class="bg"> </div> <div data-role="widget" data-widget="nav4" class="nav4"> <nav> <div id="nav4_ul" class="nav_4"> <ul class="box"> <li><a href="javascript:;" class=""><span>微信菜单</span></a> <dl> <dd> <a href="#"><span>子菜单1</span></a> </dd> <dd> <a href="#"><span>子菜单2</span></a> </dd> <dd> <a href="#"><span>子菜单3</span></a> </dd> <dd> <a href="#"><span>子菜单4</span></a> </dd> <dd> <a href="#"><span>子菜单5</span></a> </dd> <dd> <a href="#"><span>子菜单6</span></a> </dd> <dd> <a href="#"><span>子菜单7</span></a> </dd> <dd> <a href="#"><span>子菜单8</span></a> </dd> <dd> <a href="#"><span>子菜单9</span></a> </dd> <dd> <a href="#"><span>子菜单10</span></a> </dd> <dd> <a href="#"><span>子菜单11</span></a> </dd> <dd> <a href="#"><span>子菜单12</span></a> </dd> <dd> <a href="#"><span>子菜单13</span></a> </dd> <dd> <a href="#"><span>子菜单14</span></a> </dd> <dd> <a href="#"><span>子菜单15</span></a> </dd> <dd> <a href="#"><span>子菜单16</span></a> </dd> <dd> <a href="#"><span>子菜单17</span></a> </dd> <dd> <a href="#"><span>子菜单18</span></a> </dd> <dd> <a href="#"><span>子菜单19</span></a> </dd> <dd> <a href="#"><span>子菜单20</span></a> </dd> </dl></li> </ul> </div> </nav> <div id="nav4_masklayer" class="masklayer_div on">&nbsp;</div> <script type="text/javascript"> nav4.bindClick(document.getElementById("nav4_ul").querySelectorAll( "li>a"), document.getElementById("nav4_masklayer")); </script> </div> </body> </html> nav4.js代码： var nav4 =(function(){ bindClick = function(els, mask){ if(!els || !els.length){return;} var isMobile = "ontouchstart" in window; for(var i=0,ci; ci = els[i]; i++){ ci.addEventListener("click", evtFn, false); } function evtFn(evt, ci){ ci =this; for(var j=0,cj; cj = els[j]; j++){ if(cj != ci){ console.log(cj); cj.classList.remove("on"); } } if(ci == mask){mask.classList.remove("on");return;} switch(evt.type){ case "click": var on = ci.classList.toggle("on"); mask.classList[on?"add":"remove"]("on"); break; } } mask.addEventListener(isMobile?"touchstart":"click", evtFn, false); } return {"bindClick":bindClick}; })(); 当一个菜单上有20个子菜单，点击后只能看到11-20的子菜单，1-10 的子菜单无法看到，请问如何实现一个滚动的样式，让他全部显示

highcharts怎么后台查询数据库赋值到前台

``` <script type="text/javascript"> Highcharts.chart('container1', { chart: { type: 'spline', animation: Highcharts.svg, marginRight: 10, backgroundColor: '#f8f8f8', type: 'line', events: { load: function () { //设置更新 var proR_id = $("#proR_id").val(); var series = this.series[0]; setInterval(function () { $.ajax({ url:"/HighSupportModel/detectionEngineering/selectShishi?proR_id="+proR_id, type:"post", dataType:"json", success : function(data){ for(var i=0;i<data.length;i++){ alert(data[i].test_date1); var x = (new Date()).getTime(), // 当前时间 //y = Math.random(); y = data[i].test_date1; series.addPoint([x, y], true, true); } } }); }, 3000); } } }, credits : { enabled: false }, time: { useUTC: false }, title: { text: '立杆倾斜曲线' }, xAxis: { type: 'datetime', tickPixelInterval: 150 }, yAxis: { title: { text:'' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { headerFormat: '<b>{series.name}</b><br/>', pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}' }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: '数据', data: (function () { // generate an array of random data var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i += 1) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; }()) }] }); </script> 我这里数据可以接收到 alert有值 但就是add不进去 自己瞎写了点 不太明白 提前谢谢大佬回答！ ```

大学四年自学走来，这些私藏的实用工具/学习网站我贡献出来了

大学四年，看课本是不可能一直看课本的了，对于学习，特别是自学，善于搜索网上的一些资源来辅助，还是非常有必要的，下面我就把这几年私藏的各种资源，网站贡献出来给你们。主要有：电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意：文中提到的所有资源，文末我都给你整理好了，你们只管拿去，如果觉得不错，转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...

【JSON解析】浅谈JSONObject的使用

简介 在程序开发过程中，在参数传递，函数返回值等方面，越来越多的使用JSON。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，同时也易于机器解析和生成、易于理解、阅读和撰写，而且Json采用完全独立于语言的文本格式，这使得Json成为理想的数据交换语言。 JSON建构于两种结构： “名称/值”对的集合(A Collection of name/va...

程序员请照顾好自己，周末病魔差点一套带走我。

程序员在一个周末的时间，得了重病，差点当场去世，还好及时挽救回来了。

卸载 x 雷某度！GitHub 标星 1.5w+，从此我只用这款全能高速下载工具！

作者 | Rocky0429 来源 | Python空间 大家好，我是 Rocky0429，一个喜欢在网上收集各种资源的蒟蒻… 网上资源眼花缭乱，下载的方式也同样千奇百怪，比如 BT 下载，磁力链接，网盘资源等等等等，下个资源可真不容易，不一样的方式要用不同的下载软件，因此某比较有名的 x 雷和某度网盘成了我经常使用的工具。 作为一个没有钱的穷鬼，某度网盘几十 kb 的下载速度让我...

只因接了一个电话，程序员被骗 30 万！

今天想给大家说一个刚刚发生在我身边的一起真实的诈骗经历，我的朋友因此被骗走30万。注：为了保护当事人隐私，部分情节进行了修改。1平安夜突来的电话开始以为就像普通的诈骗一样，想办法让你把钱...

我一个37岁的程序员朋友

周末了，人一旦没有点事情干，心里就瞎想，而且跟几个老男人坐在一起，更容易瞎想，我自己现在也是 30 岁了，也是无时无刻在担心自己的职业生涯，担心丢掉工作没有收入，担心身体机能下降，担心突...

python自动下载图片

近日闲来无事，总有一种无形的力量萦绕在朕身边，让朕精神涣散，昏昏欲睡。 可是，像朕这么有职业操守的社畜怎么能在上班期间睡瞌睡呢，我不禁陷入了沉思。。。。 突然旁边的IOS同事问：‘嘿，兄弟，我发现一个网站的图片很有意思啊，能不能帮我保存下来提升我的开发灵感？’ 作为一个坚强的社畜怎么能说自己不行呢，当时朕就不假思索的答应：‘oh， It’s simple. Wait for me for a ...

一名大专同学的四个问题

【前言】 　　收到一封来信，赶上各种事情拖了几日，利用今天要放下工作的时机，做个回复。 　　2020年到了，就以这一封信，作为开年标志吧。 【正文】 　　您好，我是一名现在有很多困惑的大二学生。有一些问题想要向您请教。 　　先说一下我的基本情况，高考失利，不想复读，来到广州一所大专读计算机应用技术专业。学校是偏艺术类的，计算机专业没有实验室更不用说工作室了。而且学校的学风也不好。但我很想在计算机领...

复习一周，京东+百度一面，不小心都拿了Offer

京东和百度一面都问了啥，面试官百般刁难，可惜我全会。

Java 14 都快来了，为什么还有这么多人固守Java 8？

从Java 9开始，Java版本的发布就让人眼花缭乱了。每隔6个月，都会冒出一个新版本出来，Java 10 , Java 11, Java 12, Java 13， 到2020年3月份，...

达摩院十大科技趋势发布：2020 非同小可！

【CSDN编者按】1月2日，阿里巴巴发布《达摩院2020十大科技趋势》，十大科技趋势分别是：人工智能从感知智能向认知智能演进；计算存储一体化突破AI算力瓶颈；工业互联网的超融合；机器间大规模协作成为可能；模块化降低芯片设计门槛；规模化生产级区块链应用将走入大众；量子计算进入攻坚期；新材料推动半导体器件革新；保护数据隐私的AI技术将加速落地；云成为IT技术创新的中心 。 新的画卷，正在徐徐展开。...

轻松搭建基于 SpringBoot + Vue 的 Web 商城应用

首先介绍下在本文出现的几个比较重要的概念： 函数计算（Function Compute）: 函数计算是一个事件驱动的服务，通过函数计算，用户无需管理服务器等运行情况，只需编写代码并上传。函数计算准备计算资源，并以弹性伸缩的方式运行用户代码，而用户只需根据实际代码运行所消耗的资源进行付费。Fun: Fun 是一个用于支持 Serverless 应用部署的工具，能帮助您便捷地管理函数计算、API ...

讲真，这两个IDE插件，可以让你写出质量杠杠的代码

周末躺在床上看《拯救大兵瑞恩》 周末在闲逛的时候，发现了两个优秀的 IDE 插件，据说可以提高代码的质量，我就安装了一下，试了试以后发现，确实很不错，就推荐给大家。 01、Alibaba Java 代码规范插件 《阿里巴巴 Java 开发手册》，相信大家都不会感到陌生，其 IDEA 插件的下载次数据说达到了 80 万次，我今天又贡献了一次。嘿嘿。 该项目的插件地址： https://github....

Python+OpenCV实时图像处理

目录 1、导入库文件 2、设计GUI 3、调用摄像头 4、实时图像处理 4.1、阈值二值化 4.2、边缘检测 4.3、轮廓检测 4.4、高斯滤波 4.5、色彩转换 4.6、调节对比度 5、退出系统 初学OpenCV图像处理的小伙伴肯定对什么高斯函数、滤波处理、阈值二值化等特性非常头疼，这里给各位分享一个小项目，可通过摄像头实时动态查看各类图像处理的特点，也可对各位调参、测试...

2020年一线城市程序员工资大调查

人才需求 一线城市共发布岗位38115个，招聘120827人。 其中 beijing 22805 guangzhou 25081 shanghai 39614 shenzhen 33327 工资分布 2020年中国一线城市程序员的平均工资为16285元，工资中位数为14583元，其中95%的人的工资位于5000到20000元之间。 和往年数据比较： yea...

为什么猝死的都是程序员，基本上不见产品经理猝死呢？

相信大家时不时听到程序员猝死的消息，但是基本上听不到产品经理猝死的消息，这是为什么呢？ 我们先百度搜一下：程序员猝死，出现将近700多万条搜索结果： 搜索一下：产品经理猝死，只有400万条的搜索结果，从搜索结果数量上来看，程序员猝死的搜索结果就比产品经理猝死的搜索结果高了一倍，而且从下图可以看到，首页里面的五条搜索结果，其实只有两条才是符合条件。 所以程序员猝死的概率真的比产品经理大，并不是错...

害怕面试被问HashMap？这一篇就搞定了！

声明：本文以jdk1.8为主！ 搞定HashMap 作为一个Java从业者，面试的时候肯定会被问到过HashMap，因为对于HashMap来说，可以说是Java集合中的精髓了，如果你觉得自己对它掌握的还不够好，我想今天这篇文章会非常适合你，至少，看了今天这篇文章，以后不怕面试被问HashMap了 其实在我学习HashMap的过程中，我个人觉得HashMap还是挺复杂的，如果真的想把它搞得明明白...

毕业5年，我问遍了身边的大佬，总结了他们的学习方法

我问了身边10个大佬，总结了他们的学习方法，原来成功都是有迹可循的。

python爬取百部电影数据，我分析出了一个残酷的真相

2019年就这么匆匆过去了，就在前几天国家电影局发布了2019年中国电影市场数据，数据显示去年总票房为642.66亿元，同比增长5.4%；国产电影总票房411.75亿元，同比增长8.65%，市场占比 64.07%；城市院线观影人次17.27亿，同比增长0.64%。 看上去似乎是一片大好对不对？不过作为一名严谨求实的数据分析师，我从官方数据中看出了一点端倪：国产票房增幅都已经高达8.65%了，为什...

推荐10个堪称神器的学习网站

每天都会收到很多读者的私信，问我：“二哥，有什么推荐的学习网站吗？最近很浮躁，手头的一些网站都看烦了，想看看二哥这里有什么新鲜货。” 今天一早做了个恶梦，梦到被老板辞退了。虽然说在我们公司，只有我辞退老板的份，没有老板辞退我这一说，但是还是被吓得 4 点多都起来了。（主要是因为我掌握着公司所有的核心源码，哈哈哈） 既然 4 点多起来，就得好好利用起来。于是我就挑选了 10 个堪称神器的学习网站，推...

这些软件太强了，Windows必装！尤其程序员！

Windows可谓是大多数人的生产力工具，集娱乐办公于一体，虽然在程序员这个群体中都说苹果是信仰，但是大部分不都是从Windows过来的，而且现在依然有很多的程序员用Windows。 所以，今天我就把我私藏的Windows必装的软件分享给大家，如果有一个你没有用过甚至没有听过，那你就赚了????，这可都是提升你幸福感的高效率生产力工具哦！ 走起！???? NO、1 ScreenToGif 屏幕，摄像头和白板...

阿里面试，面试官没想到一个ArrayList，我都能跟他扯半小时

我是真的没想到，面试官会这样问我ArrayList。

曾经优秀的人，怎么就突然不优秀了。

职场上有很多辛酸事，很多合伙人出局的故事，很多技术骨干被裁员的故事。说来模板都类似，曾经是名校毕业，曾经是优秀员工，曾经被领导表扬，曾经业绩突出，然而突然有一天，因为种种原因，被裁员了，...

大学四年因为知道了这32个网站，我成了别人眼中的大神！

依稀记得，毕业那天，我们导员发给我毕业证的时候对我说“你可是咱们系的风云人物啊”，哎呀，别提当时多开心啦????，嗯，我们导员是所有导员中最帅的一个，真的???? 不过，导员说的是实话，很多人都叫我大神的，为啥，因为我知道这32个网站啊，你说强不强????，这次是绝对的干货，看好啦，走起来！ PS：每个网站都是学计算机混互联网必须知道的，真的牛杯，我就不过多介绍了，大家自行探索，觉得没用的，尽管留言吐槽吧???? 社...

良心推荐，我珍藏的一些Chrome插件

上次搬家的时候，发了一个朋友圈，附带的照片中不小心暴露了自己的 Chrome 浏览器插件之多，于是就有小伙伴评论说分享一下我觉得还不错的浏览器插件。 我下面就把我日常工作和学习中经常用到的一些 Chrome 浏览器插件分享给大家，随便一个都能提高你的“生活品质”和工作效率。 Markdown Here Markdown Here 可以让你更愉快的写邮件，由于支持 Markdown 直接转电子邮...

【程序人生】程序员接私活常用平台汇总

00. 目录 文章目录00. 目录01. 前言02. 程序员客栈03. 码市04. 猪八戒网05. 开源众包06. 智城外包网07. 实现网08. 猿急送09. 人人开发10. 开发邦11. 电鸭社区12. 快码13. 英选14. Upwork15. Freelancer16. Dribbble17. Remoteok18. Toptal19. AngelList20. Topcoder21. ...

看完这篇HTTP，跟面试官扯皮就没问题了

我是一名程序员，我的主要编程语言是 Java，我更是一名 Web 开发人员，所以我必须要了解 HTTP，所以本篇文章就来带你从 HTTP 入门到进阶，看完让你有一种恍然大悟、醍醐灌顶的感觉。 最初在有网络之前，我们的电脑都是单机的，单机系统是孤立的，我还记得 05 年前那会儿家里有个电脑，想打电脑游戏还得两个人在一个电脑上玩儿，及其不方便。我就想为什么家里人不让上网，我的同学 xxx 家里有网，每...

史上最全的IDEA快捷键总结

现在Idea成了主流开发工具，这篇博客对其使用的快捷键做了总结，希望对大家的开发工作有所帮助。

阿里程序员写了一个新手都写不出的低级bug，被骂惨了。

这种新手都不会范的错，居然被一个工作好几年的小伙子写出来，差点被当场开除了。

谁是华为扫地僧？

是的，华为也有扫地僧！2020年2月11-12日，“养在深闺人不知”的华为2012实验室扫地僧们，将在华为开发者大会2020（Cloud）上，和大家见面。到时，你可以和扫地僧们，吃一个洋...

Idea 中最常用的10款插件（提高开发效率），一定要学会使用！

学习使用一些插件，可以提高开发效率。对于我们开发人员很有帮助。这篇博客介绍了开发中使用的插件。

AI 没让人类失业，搞 AI 的人先失业了

最近和几个 AI 领域的大佬闲聊 根据他们讲的消息和段子 改编出下面这个故事 如有雷同 都是巧合 1. 老王创业失败，被限制高消费 “这里写我跑路的消息实在太夸张了。” 王葱葱哼笑一下，把消息分享给群里。 阿杰也看了消息，笑了笑。在座几位也都笑了。 王葱葱是个有名的人物，21岁那年以全额奖学金进入 KMU 攻读人工智能博士，累计发表论文 40 余篇，个人技术博客更是成为深度学习领域内风向标。 ...

2020年，冯唐49岁：我给20、30岁IT职场年轻人的建议

点击“技术领导力”关注∆每天早上8:30推送 作者|Mr.K 编辑| Emma 来源|技术领导力(ID：jishulingdaoli) 前天的推文《冯唐：职场人35岁以后，方法论比经验重要》，收到了不少读者的反馈，觉得挺受启发。其实，冯唐写了不少关于职场方面的文章，都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯...

作为一名大学生，如何在B站上快乐的学习？

B站是个宝，谁用谁知道???? 作为一名大学生，你必须掌握的一项能力就是自学能力，很多看起来很牛X的人，你可以了解下，人家私底下一定是花大量的时间自学的，你可能会说，我也想学习啊，可是嘞，该学习啥嘞，不怕告诉你，互联网时代，最不缺的就是学习资源，最宝贵的是啥？ 你可能会说是时间，不，不是时间，而是你的注意力，懂了吧！ 那么，你说学习资源多，我咋不知道，那今天我就告诉你一个你必须知道的学习的地方，人称...

木兰编程语言，当事人最新回复来了

同行12年，不知Python是木兰，当事人回应来了

那些年，我们信了课本里的那些鬼话

教材永远都是有错误的，从小学到大学，我们不断的学习了很多错误知识。 斑羚飞渡 在我们学习的很多小学课文里，有很多是错误文章，或者说是假课文。像《斑羚飞渡》： 随着镰刀头羊的那声吼叫，整个斑羚群迅速分成两拨，老年斑羚为一拨，年轻斑羚为一拨。 就在这时，我看见，从那拨老斑羚里走出一只公斑羚来。公斑羚朝那拨年轻斑羚示意性地咩了一声，一只半大的斑羚应声走了出来。一老一少走到伤心崖，后退了几步，突...

一个程序在计算机中是如何运行的？超级干货！！！

强烈声明：本文很干，请自备茶水！???? 开门见山，咱不说废话！ 你有没有想过，你写的程序，是如何在计算机中运行的吗？比如我们搞Java的，肯定写过这段代码 public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World!"); } ...