border设置了1px的宽度,但是在网页中浏览显示没有宽度

图片说明
图片说明

我在另一个页面里面是一样的设置,另一个页面显示正常,有border,这个页面不行
border的宽度是0

css

3个回答

是不是其他地方遮住了,看不见,你的右边源代码里面不是都有了吗,把他加大一点试试

从上图就看到 图一没有规定边框的样式 图二就有为solid

border 是有常用三个属性的。border-width定义border的宽度。border-color定义border的颜色。border-style定义border的风格。是直线还是点点。这三个常用属性中border-style是不能或缺的。你可以用火狐下的firebug中的计算样式。试试看。如果你定义了border:solid。浏览器会自动补全boder-width.border-color会有默认的值。但是当你少了border-style属性的时候。边框就会没有。border:3px solid ;这也是可以的、也会默认补全你剩下没写的。我没测试IE。谷歌。我建议是写齐这三个基本属性。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
火狐与 谷歌等其他浏览器,对tbody的position和border属性反应不一样我该怎么办
做项目遇到一个问题,其实很简单,但是只有火狐浏览器达到了我想要的效果,其他的都没有!不说废话了,直接上图 下面这个是**在火狐浏览器**上面打开,效果正常,是我想要的结果 就是给tbody绝对定位,然后给它里面的第二个tr(灰色背景的)相对定位,第二个tr的宽度设的是100%,想要的这个tr继承他父级tbody的宽度,但是在谷歌和ie等其他的浏览器打开效果就变了,接着往下看 ![图片说明](https://img-ask.csdn.net/upload/201711/25/1511601371_457274.png) 下面这个**是在谷歌浏览器上**打开的,存在2个问题, 第一个,我给tbody设了10px的上边框,在火狐上边有作用,导致第二个tr往上折叠了一点,这个在谷歌等其他浏览器上面都没有用。 第二个,就是开始我说的,第二个tr的宽度没有继承他父级tbody的宽度。 关于这个问题,我也研究了,之所以是这样的,是因为我给tbody的css修饰没起到作用,我在谷歌浏览器上操作了一下,把tbody的这个position:relative;和border这两个属性去掉不去掉是一样的效果 在火狐浏览器上面把position:relative;这个属性去掉加上就有区别。 然后我确定给tbody修饰的css属性,火狐浏览器识别并渲染了,但是谷歌等其他浏览器都没有就识别,但是就是不明白为什么,有没有大神帮我解释一下呀,然后我该怎么办才能让第二个tr的宽度跟tbody的是一样的, **最后说明一点**,不能说给tbody和tr设置一个固定像素的宽度,因为我是让他跟着屏幕的分辨率而改变他自己的宽度,所以是要用百分比作为宽度的单位的哦; 有没有大神帮我这个单双轮休的苦逼解决一下呀,已经苦恼我好多天了,也查了很多资料,貌似没有找到关于这个问题的的,所以只能。。。。 最后最后最后,十分感谢呀!!这是我第一次发帖呀呀呀呀!!!还有一个小时就下班儿,俺在线等,希望下周一能把这个问题解决了呀 ![图片说明](https://img-ask.csdn.net/upload/201711/25/1511601395_630686.png) 最后看我写的这一部分代码 ``` <table class="table table_list mt20"> <tbody> <tr class=""> <td>dsfsd<label class="selectBeautiful"><input type="checkbox" /><i>✓</i></label></td> <td>{{items.billNo}}</td> <td>{{items.billDate}}</td> <td>{{items.nodeOrgDesc}}</td> <td>{{items.disCount}}</td> <td>{{items.ioAmt}}</td> <td>{{items.actualAmt}}</td> <td>{{items.transDesc}}</td> </tr> <tr class="sales_trbj"> <td colspan="8"> <span class=""><i class="iconfont icon-zaicilinmo" title=""></i>再次下单</span> <span class=""><i class="iconfont icon-xiangqing" title="编辑"></i>编辑</span> <span class=""><i class="iconfont icon-yidayin" title=""></i>打印</span> </td> </tr> <style type="text/css"> /*table{position:relative;}*/ table tbody{border-top:10px solid blue;position:relative;} .sales_trbj{position:absolute;background:rgba(0,0,0,.5);width:100%;} </style> </tbody> </table> ```
easyui 表头宽度超出容器宽度,怎么解决
H5代码如下 ``` <div class="choise_content"> <table id="express"></table> </div> ``` CSS代码如下 ``` .choise_content{ width: 800px; height: 200px; margin: 0 auto; margin-top: 30px; border-bottom: 1px solid #D4D4D4; padding-bottom: 15px; } ``` JS代码如下 ``` function expressList(){ $('#express').datagrid({ // url : urlNew // rownumbers : true,//行号 // pagination : true,//分页空间 pageSize : 1, pageNumber : 1, fitColumns : true, fixed: true, fit : true, nowrap: true, singleSelect : true, striped : true, // toolbar: , columns : [[ {field : 'ltd',title : '22',width : '15%',align : 'center'}, {field : 'p',title : '33',width : '30%',align : 'center'}, {field : 'sever',title : '44',width : '35%',align : 'center'}, {field : 'time',title : '66',width : '15%',align : 'center'}, ]] }); }; ``` 在谷歌浏览器的控制台上显示的问题是 类名为class="datagrid-header-inner 的宽度10000px 求解 怎么解决 不用CSS解决能行不?
两个div和为100%,但是却出现换行情况
(1)div { display:inline-block; } (2)他们的父亲宽度100% (3)所有元素margin,padding,border设置为0 (4)子元素div分别为30%和70% (5)浏览器捕获元素查看两个div宽度数据和正好等于父亲宽度 疑问:为什么两个div不会同一行,总得少那么1px才可以,不是刚刚好一行展示?
div中table100%宽度的浏览器兼容性问题
<p>先上代码,请看:</p> <p> </p> <pre name="code" class="html">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div style="width:300px;height:100px;overflow:auto;"&gt; &lt;table border="1" style="table-layout:fixed;width:100%;"&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p> </p> <p>这个例子的大意是给table外面套个div,如果table的高度过高,就显示一个垂直滚动条,而里面的table是100%宽度的</p> <p>据我观察,例子在IE8,FF,CHROME下能如预期般工作</p> <p>但是在IE6/7下面,div会显示出一个水平滚动条,因为IE6/7下面100%宽度是包含垂直滚动条的宽度的</p> <p>如果将table的width:100%样式拿掉,在IE6/7下工作就正常了,不过在其他浏览器下又不正常,这是因为对于table-layout:fixed的理解不同浏览器有差异</p> <p>这个问题太烦人了,不知道有没有好的解决办法</p><br/><strong>问题补充</strong><br/>目前我的方法是用CSS HACK <br />给table的样式加上个&gt;width:auto <br />这样在IE6/7下table的width就不是100%了 <br />不过这样的方法太丑陋了,不知道有啥好点的方法没<br/><strong>问题补充</strong><br/><div class="quote_title">zbm2001 写道</div><div class="quote_div">IE的老问题了,目前没有太好的解决方法,内嵌套一个分区元素 Layout一下吧 <br /> <br />&lt;div style="width:300px;height:100px;overflow:auto;"&gt; <br />&lt;div style="+zoom:1;"&gt; <br />&lt;table border="1" style="table-layout:fixed;width:100%;"&gt;&nbsp; <br />…… <br />&lt;/table&gt;&nbsp; <br />&lt;/div&gt; <br />&lt;/div&gt; </div> <br />这个不错,比CSS里面写HACK语法舒服点,非常感谢
轮播图在火狐浏览器上时快时慢
代码如下,我用的是移动定位盒子的left,在火狐上很明显,不知道为什么,在谷歌和IE下没有时快时慢,可有时会有些卡顿,谢谢指教! ``` // 创建一个对象,DigsurGallery; DigsurGallery = {}; // 为对象 DigsurGallery,创造一个属性 Rolling; DigsurGallery.Rolling = function() { // 定义变量 speed,作用为速度; this.speed = 1; // 定义变量 timer ,作用为定时器名字; this.timer = null; } // initConfig 是对象下的一个方法,需要传入三个参数,盒子的id,数组的名字,是否需要滚动,是否需要点击按钮; DigsurGallery.Rolling.prototype.initConfig = function(Container, picArray, HasSlider, HasButton) { // 声明一个变量接收 Container; var ContainerName = $("#" + Container); // 声明变量 oBox,创建一个div,id名称为"DigsurFallery-Rolling-box"; var oBox = $("<div id='DigsurFallery-Rolling-box'></div>"); // 将 oBox 拼接到oName中; ContainerName.append(oBox); // 为 DigsurFallery-Rolling-box 设置样式; $("#DigsurFallery-Rolling-box").css({ "position": "relative", "width": "100%", "overflow": "hidden", "top": "20%", "border-radius": "5px", "-moz-user-select": "none", "-webkit-user-select": "none", "-ms-user-select": "none", "user-select": "none", }) // 声明变量 oBox,创建一个div,id名称为"DigsurFallery-Rolling-content"; var oContent = $("<div id='DigsurFallery-Rolling-content'></div>"); // 将 oContent 拼接到 oBox中; oBox.append(oContent); // 为 DigsurFallery-Rolling-content 设置样式; $("#DigsurFallery-Rolling-content").css({ "position": "absolute", "left": 0, "overflow": "hidden", "height": "100%", }) // 循环创建 img标签,将picArray中的值传入每一个img的src中,拼接到 oContent中; for(var i = 0; i < picArray.length; i++) { var oimg = $("<img />") $(oimg).attr('src', picArray[i]); oContent.append(oimg); } // 为 img加样式 ; $("#DigsurFallery-Rolling-box img").css({ "float": "left", "height": "90%", "box-shadow": "0px 0px 11px #211f1f", "-webkit-box-shadow": "0px 0px 11px #211f1f", "-moz-box-shadow": "0px 0px 11px #211f1f", "border-radius": "5px", "margin-top":"5px", }) // 为 DigsurFallery-Rolling-box 设置高度,高度为'window'宽度的35%; $("#DigsurFallery-Rolling-box").css("height", $(window).width() * 0.35); // 声明 BoxoffsetWidth,接收 DigsurFallery-Rolling-box的可视宽度; var BoxoffsetWidth = $("#DigsurFallery-Rolling-box")[0].offsetWidth; // 为DigsurFallery-Rolling-box下的img标签设置 margin-right,值为: DigsurFallery-Rolling-box的可视宽度的3%; $("#DigsurFallery-Rolling-box img").css("margin-right", BoxoffsetWidth / 100 * 3); // 声明变量,获取 DigsurFallery-Rolling-content下img的margin-right的 值; var ImgMarginRight = parseFloat($("#DigsurFallery-Rolling-content img").css('marginRight')); // 设置 DigsurFallery-Rolling-conten 下的img的宽度 为 DigsurFallery-Rolling-box的可视宽度; $("#DigsurFallery-Rolling-content img").css("width", BoxoffsetWidth); // 设置 DigsurFallery-Rolling-content 的宽度,值为 picArray的个数 乘 (DigsurFallery-Rolling-box的可视宽度+ DigsurFallery-Rolling-content下img的margin-right的 值); $("#DigsurFallery-Rolling-content").css("width", picArray.length * (BoxoffsetWidth + ImgMarginRight)); // 设置 speed的速度为1; this.speed = 1; // 判断 HasSlider 的值; if(HasSlider == true) { // 声明 _this = this,作用为指向 DigsurGallery.Rolling ; var _this = this; // 创造函数 move ; function move() { // 创建定时器timer; _this.timer = setInterval(function() { // 设置 DigsurFallery-Rolling-content 的left 为DigsurFallery-Rolling-content的做偏移量 - speed的值; $("#DigsurFallery-Rolling-content").css("left", $("#DigsurFallery-Rolling-content").offset().left - _this.speed); // 做判断,如果 DigsurFallery-Rolling-content 的左偏移量 小于picArray的个数-1乘以图片的可视宽度加上marginright的值 在乘以-1的值; if($("#DigsurFallery-Rolling-content").offset().left < (picArray.length - 1) * (oimg[0].offsetWidth + ImgMarginRight) * -1) { // DigsurFallery-Rolling-content 的left为0; $("#DigsurFallery-Rolling-content").css("left", 0); } }, 1) } // 启动定时器; move(); // 鼠标放上或者离开 容器 'DigsurFallery-Rolling-box'时清除或打开定时器; $("#DigsurFallery-Rolling-box").mouseenter(function() { clearInterval(_this.timer); }).mouseleave(function() { move(); }); } // 判断 HasButton的值; if(HasButton == true) { // 声明 oRetreat 创建 id为 'retreat' 的div; var oRetreat = $("<div id='retreat'></div>"); // 将 oRectreat 拼接到oBox中; oBox.append(oRetreat); // 声明 RetreatSpan,创建 span标签,内容为 < ,后退; var RetreatSpan = $("<span> < </span>") // 将RetreatSpan拼接到oRetreat中; oRetreat.append(RetreatSpan); // 声明oAdvance,创建 id为'advance'的div; var oAdvance = $("<div id='advance'></div>"); // 将oAdvance拼接到oBox中; oBox.append(oAdvance); // 声明AdvanceSpan,创建 span标签,内容为 > ,前进; var AdvanceSpan = $("<span> > </span>") // 将AdvanceSpan拼接到oAdvance中; oAdvance.append(AdvanceSpan); // retreat 的点击函数; $("#retreat").click(function() { // 声明index,获取 DigsurFallery-Rolling-content 的做偏移量 除以 图片的可视宽度的负值; var index = parseInt($("#DigsurFallery-Rolling-content").offset().left / -oimg[0].offsetWidth); // index 的值减1; index--; // 判断 如果index的值小于0的; if(index < 0) { // index 的值 等于 picArrat 的长度减去1; index = picArray.length - 1; } // 声明 temp 等于 图片的可视宽度加上图片的marginright的值 乘 index的 负值 ; var temp = (oimg[0].offsetWidth + ImgMarginRight) * index * -1; // 设置 DigsurFallery-Rolling-content 的left值为 temp的值 $("#DigsurFallery-Rolling-content").css("left", temp); }); // advance 的点击函数 $("#advance").click(function() { // 声明index,获取 DigsurFallery-Rolling-content 的做偏移量 除以 图片的可视宽度的负值; var index = parseInt($("#DigsurFallery-Rolling-content").offset().left / -oimg[0].offsetWidth); // index 的值加1 index++; // 判断 如果index的值大于 picArray的长度; if(index >= picArray.length) { // index 的值为 0; index = 0; } // 声明 temp 等于 图片的可视宽度加上图片的marginright的值 乘 index的 负值 var temp = (oimg[0].offsetWidth + ImgMarginRight) * index * -1; // 设置 DigsurFallery-Rolling-content 的left值为 temp的值 $("#DigsurFallery-Rolling-content").css("left", temp); }); } // 设置点击按钮的大小,需要传入三个值,分别为 最小值 min,和最大值max 和 中间值mid $.fn.fontFlex = function(min, max, mid) { // $this 指向调用的this var $this = this; // 窗口大小改变时函数 $(window).resize(function() { // 为 retreat 设置样式 $("#retreat").css({ "width": "7%", "height": $("#retreat").width() * 2.3, "position": "absolute", "left": 0, "top": "30%", "background-color": "rgba(0, 0, 0, 0.3)", "text-align": "center", "color": "rgba(255,255,255,0.5)", "cursor": "pointer", }).hover(function() { $("#retreat").css("color", "rgba(255,255,255,1)") }, function() { $("#retreat").css("color", "rgba(255,255,255,0.5)") }); // 为 retreat 下的span标签设置 line-height $("#retreat span").css("line-height", $("#retreat").height() + "px"); // 为 advance 设置样式 $("#advance").css({ "width": "7%", "height": $("#advance").width() * 2.3, "position": "absolute", "right": 0, "top": "30%", "background-color": "rgba(0, 0, 0, 0.3)", "text-align": "center", "color": "rgba(255,255,255,0.5)", "cursor": "pointer", }).hover(function() { $("#advance").css("color", "rgba(255,255,255,1)") }, function() { $("#advance").css("color", "rgba(255,255,255,0.5)") }); // 为 advance 下的span标签设置 line-height $("#advance span").css("line-height", $("#advance").height() + "px"); // 声明size,用window的宽度 除以 mid var size = window.innerWidth / mid; // 判断 如果 size的值 小于 min的值 if(size < min) { // size 的值 等于 min的值 size = min; } // 判断 如果size的值大于 max的值 if(size > max) { // size的值等于 max的值 size = max; } // 为调用的的标签设置 'font-size' $this.css("font-size", size + "px"); // 触发函数的时候执行 resize事件 }).trigger('resize'); }; $("#retreat span").fontFlex(23, 60, 20); $("#advance span").fontFlex(23, 60, 20); } ```
在ie 7或ie 6里如何让超出td宽度的内容浮动显示在后面的td里
<pre name="code" class="html">&lt;html&gt; &lt;body style="font:16px Arial;"&gt; &lt;style type="text/css"&gt; .table { border-collapse: collapse; table-layout: fixed; font: normal 11px arial; } .row { height:25px; } .cell { background-color:#ECF4FE; font-family:Arial,Verdana,sans-serif; font-size: 11px; border-bottom-width: 1px; border-bottom-color: #ECF4FE; border-bottom-style: dotted; border-top: none; border-left: 1px solid #EC0000; border-right: 1px solid #EC0000; vertical-align: middle; padding-left: 3px; padding-right: 3px; } &lt;/style&gt; &lt;div style="width: 250px"&gt; &lt;table width="100%" class="table"&gt; &lt;tr class="row"&gt; &lt;td class="cell"&gt; &lt;div style="white-space:nowrap;"&gt;Text Text Text Text Text Text Text Text&lt;/div&gt; &lt;/td&gt; &lt;td class="cell"&gt; &lt;/td&gt; &lt;td class="cell"&gt; &lt;/td&gt; &lt;td class="cell"&gt; &lt;/td&gt; &lt;td class="cell"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p> </p> <p> 如题和上述代码,在ie7标准模式下。</p> <p> </p> <p><span style="font-size: small;">情形一:</span></p> <p><span style="white-space: pre;"> </span>如果表格上面有 <span style="white-space: pre; background-color: #fafafa;">table-layout: fixed; 这个样式,上述代码在页面上显示的效果是</span></p> <p><img src="/problems/C:%5CDocuments%20and%20Settings%5Cfelix_li%5CDesktop" alt=""></p> <p><img src="http://dl.iteye.com/upload/attachment/561033/18d689de-63e4-3dcd-a322-b933f5cff09c.jpg" alt=""></p> <div><br></div> <div> <p><span style="font-size: small;">情形二:</span></p> <p><span style="white-space: pre;"> </span>如果表格上面没有 <span style="white-space: pre; background-color: #fafafa;">table-layout: fixed; 这个样式,上述代码在页面上显示的效果是</span></p> <p><br><img src="http://dl.iteye.com/upload/attachment/561035/758bb8fa-f43a-3042-a532-5ca2ddefe925.jpg" alt=""><br> 很显然这两种结果都不理想。</p> <p>在我现在的需求里,限于总体设计的因素,table标签上的<span style="white-space: pre; background-color: #fafafa;">table-layout: fixed;</span> 是必须要有的。但是我又需要把单元格里超出单元格的那些内容浮动显示在它后面的各个单元格里,不能像情形二里那样直接把第一个单元格拉宽。理想效果如下</p> <p><br><img src="http://dl.iteye.com/upload/attachment/561037/27865694-4a5c-3b07-ace2-301a9bc9e1ce.jpg" alt=""><br> 上面的理想效果目前在IE 8,Firefox,Chrome,Safari,Opera这几款浏览器里都实现了,就差ie 7,也许还有ie 6。</p> <p><span><br></span></p> <p><span>忘好心人指点。</span></p> </div>
请教:Table标签的浏览器兼容性问题
>>目标 1. 建立3列的Table。Table宽度根据内容自适应。 2. 3列的宽度都是根据内容长度自适应,最后一列宽度由Table总宽度决定 >>课题 执行如下代码, Chrome以外的浏览器: 满足上述目标 Chrome: 第二列,第三列的宽度不符合目标要求(第二第三列的宽度不是自适应,而是看起来像平分了剩余宽度) 请朋友们指点指点! ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <table style="border: 2px solid;"> <caption>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</caption> <tr> <td>1</td> <td>aaa</td> <td>aaaaaaaaa</td> </tr> <tr> <td>1</td> <td>aaaaaaaaa</td> <td>aaaa</td> </tr> </table> </body> </html> ``` ![图片说明](https://img-ask.csdn.net/upload/201708/31/1504147395_737742.png) ![图片说明](https://img-ask.csdn.net/upload/201708/31/1504147449_990329.png)
CSS布局,有个细节求助
![图片说明](https://img-ask.csdn.net/upload/201704/27/1493303340_917152.png) ``` <html> <head> <style> .container1{ position:absolute; left:15%; right:15%; width:70%; height:300px; background-color:#333333; margin-top:50px; padding:0px; border-width:0px; border-collapse:collapse; } .div_1{ display:inline-block; position:relative; margin:0px; width:100%; height:50px; background-color:#555555; } .div_2{ display:inline-block; position:relative; margin:0px; width:100%; height:50px; background-color:#555555; } .container2{ display:inline-block; width:100%; height:200px; float:left; padding-left:0px; padding-right:0px; background-color:#880088; border-width:0px; border-collapse:collapse; } .c_t_1{ display:inline-block; width:50%; height:200px; background-color:#118822; margin-left:0px; margin-right:0px; border-width:0px; border-collapse:collapse; } .c_t_2{ display:inline-block; width:49%; height:200px; background-color:#ffff22; margin-left:0px; margin-right:0px; border-width:0px; border-collapse:collapse; } </style> </head> <body> <div class="container1"> <div class="div_1"><p>div_1</p></div> <div class="container2"> <div class="c_t_1">c_t_1</div> <div class="c_t_2">c_t_2</div> </div> <div class="div_2"><p>div_2</p></div> </div> </body> </html> ``` 如何让class=c_d_2的DIV充满container2的后50%的宽度, 即使c_d_2的width=50%而不会不会产生布局错乱。我是用的360浏览器打开的。
Vue.js页面渲染生命周期问题
使用Vue.js做瀑布流布局时,在mounted中直接调用waterFall函数,页面上图片布局是乱的,设置了setTimeout延迟0ms渲染也不起作用。 在safari和chrome上页面正常了,设置延迟100ms,页面加载后布局正常,但是明显的可以看到布局的变化过程,效果不好,延迟值再设置低一些,就不起作用; 在火狐浏览器,要设置延迟150ms以上才起作用,而且也是可以看到页面布局的变化过程,体验不好。 求各位大师指点明路。 ```, <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../../vue.js"></script> <style> *{margin: 0;padding: 0} #main{position: relative;margin:0 auto;} #main::after{content: '';display: block;height: 0;clear: both;visibility: hidden;} .pic{float: left;padding: 15px 0 0 15px;} .pic img{padding: 10px;width: 165px;height: auto;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc;} </style> </head> <body> <div id="main"> <div class="pic" v-for='img in images'> <img :src="img"> </div> </div> <script type="text/javascript"> var vm = new Vue({ el : '#main' , data : { images:[ 'images/0.jpg','images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg','images/8.jpg','images/9.jpg', 'images/10.jpg','images/11.jpg','images/12.jpg','images/13.jpg','images/14.jpg','images/15.jpg','images/16.jpg','images/17.jpg','images/18.jpg','images/19.jpg', 'images/20.jpg','images/21.jpg','images/22.jpg','images/23.jpg','images/24.jpg','images/25.jpg','images/26.jpg','images/27.jpg','images/28.jpg','images/29.jpg', 'images/30.jpg','images/31.jpg','images/32.jpg','images/33.jpg','images/34.jpg','images/35.jpg','images/36.jpg' ] }, mounted:function(){ var _this = this ; setTimeout(function(){ _this.waterFall('main','pic'); },0); //safari浏览器下必须迟延30ms执行waterFall,布局才会正常渲染,其他浏览器下设置为0即可。 }, methods:{ getByClass:function(oParent,clsName){ return oParent.getElementsByClassName(clsName); }, waterFall:function(Parent,clsName){ var _this = this ; var oParent = document.getElementById(Parent); var oBoxs = _this.getByClass(oParent,clsName); var oBoxW = oBoxs[0].offsetWidth ; //获取每列的宽度 var pageW = document.documentElement.clientWidth ; var cols = Math.floor(pageW / oBoxW) ; //判断页面列数 oParent.style.cssText = 'width:' + cols*oBoxW +'px;'; //设定main的宽度并居中 var arr = [] ; //用于存放每列的高度 for(var i=0;i<oBoxs.length;i++){ if( i<cols ){ arr.push(oBoxs[i].offsetHeight); }else { var minH = Math.min.apply('null',arr); //求出高度最低列的值 var index = _this.getMinIndex(arr,minH) ; //高度最低列的索引值 oBoxs[i].style.position = 'absolute' ; oBoxs[i].style.top = minH + 'px' ; oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px' ; arr[index] += oBoxs[i].offsetHeight ; //更新数组中每列的高度 } } }, getMinIndex:function(arr,value){ //获取数组arr中,值为value的索引值 for(var i=0;i<arr.length;i++){ if(arr[i] == value){ return i ;} } } }, }); </script> </body> </html> ```
如何用JavaScript实现方位角计算并且调用指针指示角度?
``` ```<!DOCTYPE html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta content="always" name="referrer"> <meta name="theme-color" content="#2932e1"> <title>RCP For A320NG</title> </head> <body> <style> .shu { width: 2px; font-size: 15px; word-wrap: break-word; } @font-face{ font-family: digital-display; src: url('digital-display.ttf'), url('digital-display.eot'); /* IE9+ */ } .Digits{ position:absolute; top:120px;left:10px; height:60px;width:230px; line-height:60px; color:white; font-size:70px;font-family:digital-display; display:block; float:left; text-align:right; } .to_top { width: 0; height: 0; border-bottom: 30px solid white; border-left: 20px solid transparent; border-right: 20px solid transparent; } .top{ width: 0; height: 0; border-bottom: 30px solid white; border-left: 20px solid transparent ; border-right: 20px solid transparent ; } </style> <div id="DME1" class = "Digits" style="">1.300</div> <div id="DME2" class = "Digits" style="left:260px;">----</div> <div id="asd"style="position: absolute; top:600px;left:200px;font-family: Microsoft YaHei;letter-spacing:5px;color:white;">ADF</div> <div id="asd1"style="position: absolute; top:600px;left:350px;font-family: Microsoft YaHei;letter-spacing:5px;color:white;">ADF</div> <div id="asd2"class="shu" style="position: absolute; left:80px;top:470px;font-family: Microsoft YaHei;color:white;">VOR</div> <div id="asd3"class="shu" style="position: absolute; left:480px;top:470px;font-family: Microsoft YaHei;color:white;">VOR</div> <div id="mat"class="to_top" style="position: absolute; left:60px;top:570px;color:white;"></div> <div id="mat2"style="position: absolute; width:10px;height:10px;border:1px solid white;left:75px;top:600px;background:white;"></div> <div id="mat3"style="position: absolute; width:10px;height:10px;border:1px solid white;left:75px;top:615px;background:white;"></div> <div id="mat4"style="position: absolute; width:10px;height:10px;border:1px solid white;left:75px;top:630px;background:white;"></div> <div id="ExchangeBtn" class="button" style="position:absolute; left:470px;top:600px;font-size:90px;font-weight:bold;font-family: Microsoft YaHei;line-height:15px;color:white;">&#8679;</div> <canvas id="solar" style="border:0px solid;left:10px;top:10px;position:absolute;z-index:-1;width:560px;height:670px;scale:0.5;"></canvas> <div id="Message" ></div> <div id="Message2" ></div> </body> <script> init(); let pi = Math.PI; let DialCenterX = 275; let DialCenterY = 400; let DialRadius = 180; let CompassHeading = 0; let Latitude=0; let Longitude=0; let DME1_lat= 39.10960; let DME1_long= 117.35343; let DME1Distance = 0; let hand1=30; //VOR方位角 let hand2=0; let gap_dial_hand = 60; let hand_length = DialRadius - gap_dial_hand; window.addEventListener("deviceorientation", findNorth); var Message =document.getElementById("Message"); var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端 iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部 weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增) qq: u.match(/\sQQ/i) == " qq" //是否QQ }; }(), language:(navigator.browserLanguage || navigator.language).toLowerCase() } function draw(ctx,DialDeg,HandDeg1,HandDeg2){ //drawDial(ctx,DialDeg); //绘制表盘 //drawAllHands(ctx,HandDeg1,HandDeg2); //绘制时分秒针 requestAnimationFrame(function step(){ getLocation(); DME1Distance = getDisance(Latitude, Longitude, DME1_lat, DME1_long); if(DME1Distance>722094) DME1Distance="----"; document.getElementById("DME1").innerHTML = DME1Distance; drawDial(ctx,CompassHeading); //绘制表盘 drawAllHands(ctx,hand1,hand2); //绘制时分秒针 requestAnimationFrame(step); }); } function toRad(d) { return d * Math.PI / 180; } function getDisance(lat1, lng1, lat2, lng2) { //lat为纬度, lng为经度, 一定不要弄错 var dis = 0; var radLat1 = toRad(lat1); var radLat2 = toRad(lat2); var deltaLat = radLat1 - radLat2; var deltaLng = toRad(lng1) - toRad(lng2); var dis = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2))); dis = dis * 6378137; dis = dis ;///1852 ;//转为海里 return dis.toFixed(1); } function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{ Message.innerHTML="Geolocation is not supported by this browser."; } } function showPosition(position) { Message.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude +"<br/>accuracy:"+ position.coords.accuracy; Latitude = position.coords.latitude; Longitude = position.coords.longitude; } function findNorth(evt) { if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { CompassHeading = 360-evt.webkitCompassHeading.toFixed(0); //window.location.href ="iPhone.html"; } else if (/(Android)/i.test(navigator.userAgent)) { //alert(navigator.userAgent); CompassHeading = evt.alpha -90; document.getElementById("Message2").innerHTML = "您的手机需要校准指南针,请将手机指向正北后刷新页面。"; } else { } } function init(){ let canvas = document.querySelector("#solar"); canvas.width = 560; canvas.height = 670; let ctx = canvas.getContext("2d"); drawOutline(ctx); //strokeRoundRect(ctx, 10, 10, 100, 50, 10); fillRoundRect(ctx, 40, 95, 216, 124, 30, 'rgba(99,116,122,1)'); fillRoundRect(ctx, 50, 105, 192, 68, 15, 'rgba(0,0,0,1)'); fillRoundRect(ctx, 295, 95, 216, 124, 30, 'rgba(99,116,122,1)'); fillRoundRect(ctx, 305, 105, 192, 68, 15, 'rgba(0,0,0,1)'); //fillRoundRect(ctx, 50, 50, 450, 600, 20, 'rgba(0,0,0,1)'); draw(ctx,30,30,60); ctx.font = '20px "微软雅黑"'; ctx.fillStyle = "white"; ctx.fillText("DME-1", 110, 200); ctx.font = '20px "微软雅黑"'; ctx.fillStyle = "white"; ctx.fillText("DME-2", 370, 200); } /*绘制时分秒针*/ function drawAllHands(ctx,HandDeg1,HandDeg2){ let time = new Date(); let s = time.getSeconds(); let m = time.getMinutes(); let h = time.getHours(); let pi = Math.PI; let secondAngle = HandDeg1;//pi / 180 * 6 * s; //计算出来s针的弧度 let minuteAngle = pi / 180 * HandDeg1; //计算出来分针的弧度 let hourAngle = pi / 180 *HandDeg2;//pi / 180 * 30 * h + minuteAngle / 12; //计算出来时针的弧度 // drawHand2(hand2 + CompassHeading, hand_length, 2, "white", ctx); //绘制时针,(角度,针长,粗细,颜色,canvas) drawHand(hand1 + CompassHeading, hand_length, 2, "white", ctx); //绘制分针 //drawHand(secondAngle, 150, 2, "blue", ctx); //绘制秒针 } /*绘制时针、或分针、或秒针 * 参数1:要绘制的针的角度 * 参数2:要绘制的针的长度 * 参数3:要绘制的针的宽度 * 参数4:要绘制的针的颜色 * 参数4:ctx * */ function drawHand(angle, len, width, color, ctx){ ctx.save(); ctx.translate(DialCenterX, DialCenterY); //把坐标轴的远点平移到原来的中心 ctx.rotate(angle*pi/180 + pi/2); //旋转坐标轴。 x轴就是针的角度,rad ctx.beginPath(); ctx.moveTo(-DialRadius + gap_dial_hand, 0); //ctx.lineTo(len, 0); // 沿着x轴绘制针 ctx.font="18px microsoft yahei"; ctx.fillStyle="white"; var x = 4-DialRadius + gap_dial_hand; //指针起点x ctx.fillText("◀",x,6); for(i=x+5;i<len;){ ctx.moveTo(i, 0); ctx.lineTo(i+10, 0); i = i+20; } ctx.lineWidth = width; ctx.strokeStyle = color; ctx.lineCap = "round"; ctx.stroke(); ctx.closePath(); ctx.restore(); } function drawHand2(angle, len, width, color, ctx){ ctx.save(); ctx.translate(DialCenterX, DialCenterY); //把坐标轴的远点平移到原来的中心 ctx.rotate(angle*pi/180 +pi/2); //旋转坐标轴。 x轴就是针的角度 ctx.beginPath(); ctx.moveTo(-DialRadius + gap_dial_hand, 0); //ctx.lineTo(len, 0); // 沿着x轴绘制针 ctx.font="30px microsoft yahei"; ctx.fillStyle="white"; var x = -DialRadius + gap_dial_hand; ctx.moveTo(x, 0); ctx.lineTo(x+20, 10);ctx.lineTo(x+20, 5); ctx.lineTo(len, 5);ctx.lineTo(len, -5); ctx.lineTo(x+20, -5);ctx.lineTo(x+20, -10); ctx.lineTo(x, 0); ctx.lineWidth = width; ctx.strokeStyle = color; ctx.lineCap = "round"; ctx.stroke(); ctx.closePath(); ctx.restore(); } /*绘制表盘*/ function drawDial(ctx,DialDeg){ let pi = Math.PI; //ctx.clearRect(0, 0, 600, 600); //清除所有内容 ctx.save(); ctx.translate(DialCenterX, DialCenterY); //移动坐标原点到原来的中心 ctx.beginPath(); ctx.arc(0, 0, DialRadius, 0, 2*pi); //绘制圆周 //ctx.stroke(); //context.clip(); ctx.closePath(); // 填充颜色 ctx.fillStyle = "#202020"; ctx.fill(); for (let i = 0; i < 72; i++){//绘制刻度盘和数字 ctx.save(); ctx.rotate(pi/180*DialDeg + i * pi / 36); //旋转坐标轴。修改第一个参数可以旋转表盘 ctx.beginPath(); ctx.moveTo(DialRadius-37, 0); if(i % 2 == 0){ ctx.lineTo(DialRadius-1, 0); }else{ ctx.lineTo(DialRadius-16, 0); } ctx.lineWidth = i % 5 ? 4 : 4; ctx.strokeStyle = i % 5 ? "white" : "white"; ctx.stroke(); ctx.closePath(); if(i % 6 == 0){ ctx.lineWidth = 1; ctx.font="24px microsoft yahei"; //ctx.strokeText(i/3,0,-150); //填充 ctx.fillStyle="white"; if(i>9) ctx.fillText(i*0.5,-12,60-DialRadius); //-150 else ctx.fillText(i*0.5,-6,60-DialRadius); } ctx.restore(); } for (let i = 0; i < 8; i++){//绘制三角标 ctx.save(); ctx.rotate(pi/180*0 + i * pi / 4); //旋转坐标轴。修改第一个参数可以旋转表盘 ctx.font="24px microsoft yahei"; ctx.fillStyle="white"; ctx.fillText("▼",-12,-1*DialRadius); ctx.restore(); } ctx.restore(); } VincentyConstants = { a: 6378137, b: 6356752.3142, f: 1/298.257223563 } /** *Calculate destination point given start point lat/long (numeric degrees), * bearing (numeric degrees) & distance (in m). */ function destinationVincenty(lonlat, brng, dist) { var u = this; var ct = u.VincentyConstants; var a = ct.a, b = ct.b, f = ct.f; var lon1 = lonlat.lon*1; //乘一(*1)是为了确保经纬度的数据类型为number var lat1 = lonlat.lat*1; var s = dist; var alpha1 = u.rad(brng); var sinAlpha1 = Math.sin(alpha1); var cosAlpha1 = Math.cos(alpha1); var tanU1 = (1-f) * Math.tan(u.rad(lat1)); var cosU1 = 1 / Math.sqrt((1 + tanU1*tanU1)), sinU1 = tanU1*cosU1; var sigma1 = Math.atan2(tanU1, cosAlpha1); var sinAlpha = cosU1 * sinAlpha1; var cosSqAlpha = 1 - sinAlpha*sinAlpha; var uSq = cosSqAlpha * (a*a - b*b) / (b*b); var A = 1 + uSq/16384*(4096+uSq*(-768+uSq*(320-175*uSq))); var B = uSq/1024 * (256+uSq*(-128+uSq*(74-47*uSq))); var sigma = s / (b*A), sigmaP = 2*Math.PI; while (Math.abs(sigma-sigmaP) > 1e-12) { var cos2SigmaM = Math.cos(2*sigma1 + sigma); var sinSigma = Math.sin(sigma); var cosSigma = Math.cos(sigma); var deltaSigma = B*sinSigma*(cos2SigmaM+B/4*(cosSigma*(-1+2*cos2SigmaM*cos2SigmaM)- B/6*cos2SigmaM*(-3+4*sinSigma*sinSigma)*(-3+4*cos2SigmaM*cos2SigmaM))); sigmaP = sigma; sigma = s / (b*A) + deltaSigma; } var tmp = sinU1*sinSigma - cosU1*cosSigma*cosAlpha1; var lat2 = Math.atan2(sinU1*cosSigma + cosU1*sinSigma*cosAlpha1, (1-f)*Math.sqrt(sinAlpha*sinAlpha + tmp*tmp)); var lambda = Math.atan2(sinSigma*sinAlpha1, cosU1*cosSigma - sinU1*sinSigma*cosAlpha1); var C = f/16*cosSqAlpha*(4+f*(4-3*cosSqAlpha)); var L = lambda - (1-C) * f * sinAlpha * (sigma + C*sinSigma*(cos2SigmaM+C*cosSigma*(-1+2*cos2SigmaM*cos2SigmaM))); var revAz = Math.atan2(sinAlpha, -tmp); // final bearing var lon_destina = lon1*1+u.deg(L); //var num_lon_dest = lon_destina*1; //var lon_destina = new Number; var lonlat_destination = {lon: lon_destina, lat: u.deg(lat2)}; return lonlat_destination; } /** * 度换成弧度 * @param {Float} d 度 * @return {[Float} 弧度 */ function rad(d) { return d * Math.PI / 180.0; } /** * 弧度换成度 * @param {Float} x 弧度 * @return {Float} 度 */ function deg(x) { return x*180/Math.PI; } function drawOutline (ctx){ //开始路径 ctx.beginPath(); ctx.moveTo(70, 2); ctx.lineTo(472, 2); ctx.lineTo(550, 70); ctx.lineTo(550, 597); ctx.lineTo(472, 665); ctx.lineTo(70, 665); ctx.lineTo(2, 597); ctx.lineTo(2, 70); ctx.lineTo(70, 2); ctx.closePath(); //路径闭合 //if(strokeStyle) { ctx.strokeStyle = "gray"; ctx.lineWidth = 1; ctx.lineJoin = 'round'; ctx.stroke(); } //if(fillStyle) { ctx.fillStyle = 'rgba(135,162,174,1)'; ctx.fill(); } ctx.restore(); ctx.beginPath(); ctx.moveTo(40, 84); ctx.lineTo(511, 84); ctx.lineTo(511, 510); ctx.lineTo(390, 642); ctx.lineTo(169, 642); ctx.lineTo(40, 510); ctx.lineTo(40, 84); ctx.closePath(); { ctx.strokeStyle = "darkgray"; ctx.lineWidth = 1; ctx.lineJoin = 'round'; ctx.stroke(); } //if(fillStyle) { ctx.fillStyle = 'rgba(63,74,76,1)'; ctx.fill(); } } /**该方法用来绘制一个有填充色的圆角矩形 *@param cxt:canvas的上下文环境 *@param x:左上角x轴坐标 *@param y:左上角y轴坐标 *@param width:矩形的宽度 *@param height:矩形的高度 *@param radius:圆的半径 *@param fillColor:填充颜色 **/ function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) { //圆的直径必然要小于矩形的宽高 if (2 * radius > width || 2 * radius > height) { return false; } cxt.save(); cxt.translate(x, y); //绘制圆角矩形的各个边 drawRoundRectPath(cxt, width, height, radius); cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值 cxt.fill(); cxt.restore(); } /**该方法用来绘制圆角矩形 *@param cxt:canvas的上下文环境 *@param x:左上角x轴坐标 *@param y:左上角y轴坐标 *@param width:矩形的宽度 *@param height:矩形的高度 *@param radius:圆的半径 *@param lineWidth:线条粗细 *@param strokeColor:线条颜色 **/ function strokeRoundRect(cxt, x, y, width, height, radius, /*optional*/ lineWidth, /*optional*/ strokeColor) { //圆的直径必然要小于矩形的宽高 if (2 * radius > width || 2 * radius > height) { return false; } cxt.save(); cxt.translate(x, y); //绘制圆角矩形的各个边 drawRoundRectPath(cxt, width, height, radius); cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2 cxt.strokeStyle = strokeColor || "#000"; cxt.stroke(); cxt.restore(); } function drawRoundRectPath(cxt, width, height, radius) { cxt.beginPath(0); //从右下角顺时针绘制,弧度从0到1/2PI cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2); //矩形下边线 cxt.lineTo(radius, height); //左下角圆弧,弧度从1/2PI到PI cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); //矩形左边线 cxt.lineTo(0, radius); //左上角圆弧,弧度从PI到3/2PI cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2); //上边线 cxt.lineTo(width - radius, 0); //右上角圆弧 cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2); //右边线 cxt.lineTo(width, height - radius); cxt.closePath(); } </script> </html>
jQuery上传插件Uploadify 3.2在.NET下的详细例子
项目中要使用Uploadify 3.2来实现图片上传并生成缩略通的功能,特此记下来,以供各位参考! Uploadify下载地址:http://www.uploadify.com/download/ 下载下来解压后估计里面很多文件,其实有用的也就jquery.uploadify.min.js、uploadify.css、uploadify.swf和uploadify-cancel.png这四个文件。你还得下载jQuery库,我这里用的是jquery-1.7.2.min.js,另外和大多数JQ插件一样,同时也需要swfobject.js这个插件,我的是2.2的版本,东西都准备好了,那下面就开始。 前端界面: [html] view plain copy <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jqUploadify._Default" %> <!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 runat="server"> <title>无标题页</title> <link href="scripts/uploadify.css" rel="stylesheet" type="text/css" /> <link href="scripts/default.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="scripts/swfobject.js" type="text/javascript"></script> <script src="scripts/jquery.uploadify.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#file_upload").uploadify({ //开启调试 'debug' : false, //是否自动上传 'auto':false, 'buttonText':'选择照片', //flash 'swf': "scripts/uploadify.swf", //文件选择后的容器ID 'queueID':'uploadfileQueue', 'uploader':'scripts/upload.ashx', 'width':'75', 'height':'24', 'multi':false, 'fileTypeDesc':'支持的格式:', 'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png', 'fileSizeLimit':'1MB', 'removeTimeout':1, //返回一个错误,选择文件的时候触发 'onSelectError':function(file, errorCode, errorMsg){ switch(errorCode) { case -100: alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件!"); break; case -110: alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!"); break; case -120: alert("文件 ["+file.name+"] 大小异常!"); break; case -130: alert("文件 ["+file.name+"] 类型不正确!"); break; } }, //检测FLASH失败调用 'onFallback':function(){ alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。"); }, //上传到服务器,服务器返回相应信息到data里 'onUploadSuccess':function(file, data, response){ //alert(data); } }); }); function doUplaod(){ $('#file_upload').uploadify('upload','*'); } function closeLoad(){ $('#file_upload').uploadify('cancel','*'); } </script> </head> <body> <table width="704" border="0" align="center" cellpadding="0" cellspacing="0" id="__01"> <tr> <td align="center" valign="middle"> <div id="uploadfileQueue" style="padding: 3px;"> </div> <div id="file_upload"> </div> </td> </tr> <tr> <td height="50" align="center" valign="middle"> <img alt="" src="images/BeginUpload.gif" width="77" height="23" onclick="doUplaod()" style="cursor: hand" /> <img alt="" src="images/CancelUpload.gif" width="77" height="23" onclick="closeLoad()" style="cursor: hand" /> </td> </tr> </table> </body> </html> 后端的Handler: [csharp] view plain copy using System; using System.Collections; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; using System.Web.SessionState; using System.IO; namespace jqUploadify.scripts { /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class upload : IHttpHandler, IRequiresSessionState { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Charset = "utf-8"; HttpPostedFile file = context.Request.Files["Filedata"]; string uploadPath = context.Server.MapPath("..\\uploads\\"); if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } file.SaveAs(uploadPath + file.FileName); //生成缩略图 MakeThumbnail(uploadPath + file.FileName, uploadPath + "\\s\\" + file.FileName, 80, 80); } } private void MakeThumbnail(string sourcePath, string newPath, int width, int height) { System.Drawing.Image ig = System.Drawing.Image.FromFile(sourcePath); int towidth = width; int toheight = height; int x = 0; int y = 0; int ow = ig.Width; int oh = ig.Height; if ((double)ig.Width / (double)ig.Height > (double)towidth / (double)toheight) { oh = ig.Height; ow = ig.Height * towidth / toheight; y = 0; x = (ig.Width - ow) / 2; } else { ow = ig.Width; oh = ig.Width * height / towidth; x = 0; y = (ig.Height - oh) / 2; } System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight); System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap); g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; g.Clear(System.Drawing.Color.Transparent); g.DrawImage(ig, new System.Drawing.Rectangle(0, 0, towidth, toheight), new System.Drawing.Rectangle(x, y, ow, oh), System.Drawing.GraphicsUnit.Pixel); try { bitmap.Save(newPath, System.Drawing.Imaging.ImageFormat.Jpeg); } catch (Exception ex) { throw ex; } finally { ig.Dispose(); bitmap.Dispose(); g.Dispose(); } } public bool IsReusable { get { return false; } } } } 这样我们就是实现图片上传至uploads,生成的缩略图(这里设为80*80)存放在uploads下面的s文件夹中,是不是很简单呢!当然实际使用过程你还可能碰到一下的问题: 1、在火狐下session出现丢失的情况,可以参考这里:http://www.cnblogs.com/akingyao/archive/2012/09/04/2670794.html 2、IE9出现了按钮不能点击的问题,可以参考这里:http://www.uploadify.com/forum/#/discussion/9155/uploadify-version-3-2-does-not-work-in-ie9/p1 最后贴一个Uploadify参数说明: Uploadify Version 3.2 Options选项设置 auto 选择文件后自动上传 buttonClass 给“浏览按钮”加css的class样式 buttonCursor 鼠标移上去形状:arrow箭头、hand手型(默认) buttonImage 鼠标移上去变换图片 buttonText 按钮文字 checkExisting 在目录中检查文件是否已上传成功(1 ture,0 false) debug 是否显示调试框(默认不显示false) fileObjName 设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata,$tempFile = $_FILES['Filedata']['tmp_name'] fileSizeLimit 设置允许上传文件最大值B, KB, MB, GB 比如:'fileSizeLimit' : '20MB' fileTypeDesc 选择的文件的描述。这个字符串出现在浏览文件对话框中文件类型下拉框处。默认:All Files fileTypeExts 允许上传的文件类型。格式:'fileTypeExts' : '*.gif; *.jpg; *.png' formData 附带值,需要通过get or post传递的额外数据,需要结合onUploadStart事件一起使用 height “浏览按钮”高度px itemTemplate <itemTemplate>节点表示显示的内容。这些内容中也可以包含绑定到控件DataSource属性中元素集合的数据。 method 上传方式。默认:post multi 选择文件时是否可以【选择多个】。默认:可以true overrideEvents 不执行默认的onSelect事件 preventCaching 随机缓存值 默认true ,可选true和false.如果选true,那么在上传时会加入一个随机数来使每次的URL都不同,以防止缓存.但是可能与正常URL产生冲突 progressData 进度条上显示的进度:有百分比percentage和速度speed。默认百分比 queueID 给“进度条”加背景css的ID样式。文件选择后的容器ID queueSizeLimit 允许多文件上传的数量。默认:999 removeCompleted 上传完成后队列是否自动消失。默认:true removeTimeout 上传完成后队列多长时间后消失。默认 3秒 需要:'removeCompleted' : true,时使用 requeueErrors 队列上传出错,是否继续回滚队列,即反复尝试上传。默认:false successTimeout 上传超时时间。文件上传完成后,等待服务器返回信息的时间(秒).超过时间没有返回的话,插件认为返回了成功。 默认:30秒 swf swf文件的路径,本文件是插件自带的,不可用其它的代替.本参数不可省略 uploader 上传处理程序URL,本参数不可省略 uploadLimit 限制总上传文件数,默认是999。指同一时间,如果关闭浏览器后重新打开又可上传。 width “浏览按钮”宽度px Events 事件 onCancel 当取消一个上传队列中的文件时触发,删除时触发 onClearQueue 清除队列。当'cancel'方法带着*参数时,也就是说一次全部取消的时候触发.queueItemCount是被取消的文件个数(另外的按钮) onDestroy 取消所有的上传队列(另外的按钮) onDialogClose 当选择文件对话框关闭时触发,不论是点的'确定'还是'取消'都会触发.如果本事件被添加进了'overrideEvents'参数中,那么如果在选择文件时产生了错误,不会有错误提示框弹出 onDialogOpen 当选择文件框被打开时触发,没有传过来的参数 onDisable 关闭上传 onEnable 开启上传 onFallback 检测FLASH失败调用 onInit 每次初始化一个队列时触发 onQueueComplete 当队列中的所有文件上传完成时触发 onSelect 当文件从浏览框被添加到队列中时触发 onSelectError 选择文件出错时触发 onSWFReady flash准备好时触发 onUploadComplete当一个文件上传完成时触发 onUploadError 当文件上传完成但是返回错误时触发 onUploadProgress上传汇总 onUploadStart 一个文件上传之间触发 onUploadSuccess 每个上传完成并成功的文件都会触发本事件 Methods 方法 cancel 取消一个上传队列 destroy 取消所有上传队列 disable 禁止点击“浏览按钮” settings 返回或修改一个 uploadify实例的settings值 stop 停止当前的上传并重新添加到队列中去 upload 上传指定的文件或者所有队列中的文件 最后是DEMO的下载地址:http://download.csdn.net/detail/wangqiuyun/566551
extjs portal 实现宽度的自适应
在使用extjs portal 与fusionchar结合做展示时,当调整浏览器窗口时,其中的portal无法自动调整大小,来适应窗口的变化,当刷新下页面时,才能适应窗口大小 部分代码如下: var c0_r0 = new Ext.ux.Portlet({ xtype:'portlet', id:'panel1', margins:'10 0 0 0', //title: 'Grid in a Portlet', layout:'fit', height:300, collapsible : false, collapsed:false, tools: tools, items: [FCF_Column3DPanel] }); var c0_r1 = new Ext.ux.Portlet({ xtype:'portlet', id:'panel2', margins:'10 0 0 0', //title: 'Grid in a Portlet', layout:'fit', height:300, collapsible : false, collapsed:false, tools: tools, items: [FCF_Pie3DPanel1] }); var c0_r2=new Ext.ux.Portlet({ xtype:'portlet', id:'panel3', margins:'10 0 0 0', //title: 'Grid in a Portlet', layout:'fit', height:300, collapsible : false, collapsed:false, tools: tools, items: [FCF_LinePanel2] }); var col_0 = new Ext.ux.PortalColumn({ columnWidth:.5, style:'padding:10px 0 10px 10px', items:[c0_r0,c0_r1,c0_r2] }); var c1_r0 = new Ext.ux.Portlet({ xtype:'portlet', id:'panel4', margins:'10 0 0 0', //title: 'Grid in a Portlet', layout:'fit', height:300, collapsible : false, collapsed:false, tools: tools, items: [FCF_FunnelPanel3] }); var c1_r1 = new Ext.ux.Portlet({ xtype:'portlet', id:'panel5', margins:'10 0 0 0', //title: 'Grid in a Portlet', layout:'fit', height:300, collapsible : false, collapsed:false, tools: tools, items: [FCF_KagiPanel4] }); var c1_r2 = new Ext.ux.Portlet({ xtype:'portlet', id:'panel6', margins:'10 0 0 0', //title: 'Grid in a Portlet', layout:'fit', height:300, collapsible : false, collapsed:false, items: [FCF_PyramidPanel5] }); var col_1 = new Ext.ux.PortalColumn({ columnWidth:.5, style:'padding:10px 0 10px 10px', items:[c1_r0,c1_r1,c1_r2] }); _portal = new Ext.ux.Portal({ xtype:'portal', border: false, //region:'center', //margins:'35 5 5 0', items:[col_0,col_1] /* * Uncomment this block to test handling of the drop event. You could use this * to save portlet position state for example. The event arg e is the custom * event defined in Ext.ux.Portal.DropZone. */ ,listeners: { 'drop': function(e){ //Ext.Msg.alert('aaa',dump_obj(this.items)); //Ext.Msg.alert('aaa',dump_obj(this.items)); //Ext.Msg.alert('aaa',dump_obj(e.portal)); Ext.Msg.alert('Portlet Dropped', e.panel.title+':id:'+e.panel.id + '<br />Column: ' + e.columnIndex + '<br />Position: ' + e.position); } } }); _portalContainer = new Ext.Container({ //layout:'border', renderTo:"biportal", height:'100%', width:'100%', margins:'5 5 5 5', frame:false,// //border:false, //bodyBorder :false, items:[ _portal ] }); 请问该如何调整脚本代码,使得能适应窗口的变化啊?
easyui layout 高度怎么自适应?
现在项目里准备用easyui 的layout来布局, 但是遇到高度不能自适应, 会出现2个滚动条很烦 [code="html"]... <div id="main" class="easyui-layout" style="width: 1348px; height: 1000px;overflow:visible"> <div region="west" split="true" title="West" style="width:230px;background:#eee;" id="west"> ... </div> <div id="center" region="center" border="false"> <div id="contentCenter" class="easyui-layout" fit="true" > <div id="contentSearchBar" region="north" split="true" title="West"style = "height:300px;padding:5px;"> ... </div> <div id="content" region="center" border="false"> ... </div> </div> </div> </div> ...[/code] 这是我使用layout的地方,main的大小必须指定,否则不会显示,但是当content里面的数据超过main的高度和宽度的时候就会出现滚动条, 加上浏览器的就有2个滚动条, 很难看. 本人本来不是做前端的, js水平有限, 问问各路大神有没好的解决办法?
js个性化滚动条,在firefox下实现不了鼠标滑轮滚动效果?
js个性化滚动条,在firefox下实现不了鼠标滑轮滚动效果,在IE和谷歌等浏览器下是可以的,唯独firefox下不行,请问如何修改? [code="html"] <!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> <script type="text/javascript" src="js/jsScroll.js"></script> <style type="text/css"> body,div,p{ margin:0; padding:0; font-size:12px;} .conbox{ background:#f5f8fe; border: solid 1px #d0d9f0; padding:10px; width:400px; margin:50px auto;} .cons{ height:100px; overflow:hidden; width:375px; padding-right:25px;} .cons p{ margin:5px 0; line-height:22px; text-indent:2em; color:#333;} /*滚动条样式*/ .divScrollBar{background:url(images/jscroll_bg.gif) repeat-y center;position:absolute;opacity:1; filter:Alpha(opacity=100); z-index:999;} .divScrollBar:hover{opacity:1; filter:Alpha(opacity=100);} .divScrollBar div{background:url(images/jscroll_gd.gif) no-repeat;height:18px; width:18px; overflow:hidden; position:absolute; left:0px; top:0px; cursor:pointer;} </style> </head> <body> <div class="conbox"> <div class="cons" id="cons"> <p>温馨提示:如果你不能严格按照标准食谱进食,要记住最基本的1234原则:每人每天吃不超过1个网球大小的肉;相当于2个网球大小的主食(米、面、谷类等);要保证3个网球大小的水果,建议每顿饭前吃不同种类的水果;不少于4个网球大小的蔬菜。</p> <p>温馨提示:如果你不能严格按照标准食谱进食,要记住最基本的1234原则:每人每天吃不超过1个网球大小的肉;相当于2个网球大小的主食(米、面、谷类等);要保证3个网球大小的水果,建议每顿饭前吃不同种类的水果;不少于4个网球大小的蔬菜。</p> </div> </div> <script type="text/javascript"> jsScroll(document.getElementById('cons'), 18, 18, 'divScrollBar');//个性化滚动条脚本 jsScroll(对象名称, 滚动条宽度, 滑块高度, 滚动条样式名称) </script> </body> </html> [/code] [code="js"] var scrollMoveObj = null, scrollPageY = 0, scrollY = 0; var scrollDivList = new Array(); // obj需要添加滚动条的对象 w滚动条宽度 className滚动条样式名称 // obj元素 必须指定高度,并设置overflow:hidden; // 如要兼容IE6 必须给obj元素 指定 overflow:hidden; // jsScroll(对象名称, 滚动条宽度, 滑块高度, 滚动条样式名称) function jsScroll(obj, w, h, className) { if(typeof(obj) == 'string') { obj = document.getElementById(obj); } //当内容未超出现在高度时,不添加滚动条 if(!obj || obj.scrollHeight <= obj.clientHeight || obj.clientHeight == 0) { return; } obj.scrollBarWidth = w||6; obj.style.overflow = 'hidden'; obj.scrollBar = document.createElement('div'); document.body.appendChild(obj.scrollBar); obj.scrollBarIndex = document.createElement('div'); obj.scrollBar.appendChild(obj.scrollBarIndex); obj.scrollBar.style.position = 'absolute'; obj.scrollBarIndex.style.position = 'absolute'; obj.scrollBar.className = className || ''; if(!className) { obj.scrollBar.style.backgroundColor = '#ddd'; obj.scrollBarIndex.style.backgroundColor = '#aaa'; } scrollDivList.push(obj); scrollResetSize(obj,h); //使用鼠标滚轮滚动 obj.scrollBar.scrollDiv = obj; obj.scrollBarIndex.scrollDiv = obj; obj.onmousewheel = scrollMove; obj.scrollBar.onmousewheel = scrollMove; obj.scrollBarIndex.onmousewheel = scrollMove; //拖动滚动条滚动 obj.scrollBarIndex.onmousedown = function(evt){ evt = evt || event; scrollPageY = evt.clientY; scrollY = this.scrollDiv.scrollTop; isScrollMove = true; document.body.onselectstart = function(){return false}; scrollMoveObj = this.scrollDiv; if(this.scrollDiv.scrollBar.className == '') { this.scrollDiv.scrollBarIndex.style.backgroundColor = '#888'; } return false; } } //当页面大小发生变化时,重新计算滚动条位置 window.onresize = function(){ for(var i=0; i<scrollDivList.length; i++) { scrollResetSize(scrollDivList[i]); } } //计算滚动条位置 function scrollResetSize(o,h) { if(o.scrollHeight <= o.clientHeight) { o.scrollTop = 0; o.scrollBar.style.display = 'none';//当为none时,内容未超过高度则隐藏滚动条,当为block时,始终显示滚动条 } else { o.scrollBar.style.display = 'block'; } var x=0, y=0; var p = o; while(p) { x += p.offsetLeft; y += p.offsetTop; p = p.offsetParent; } var borderTop = parseInt(o.style.borderTopWidth||0); var borderBottom = parseInt(o.style.borderBottomWidth||0); o.scrollBar.style.width = o.scrollBarWidth + 'px'; o.scrollBar.style.height = o.clientHeight + 'px'; o.scrollBar.style.top = y + borderTop + 'px'; o.scrollBar.style.left = x + o.offsetWidth - o.scrollBarWidth + 'px'; o.scrollBarIndex.style.width = o.scrollBarWidth + 'px'; //var h = 18; // 固定滑块的大小 //var h = o.clientHeight - (o.scrollHeight - o.clientHeight); //滚动条大小根据内容多少而变化 //当滚动条滑块最小20个像素 //if(h < 20) { // h = 20; //} o.scrollBarHeight = h; o.scrollBarIndex.style.height = h + 'px'; o.scrollBarIndex.style.left = '0px'; setScrollPosition(o); } function setScrollPosition(o) { o.scrollBarIndex.style.top = (o.clientHeight - o.scrollBarHeight) * o.scrollTop / (o.scrollHeight - o.clientHeight) + 'px'; } document.documentElement.onmousemove = function(evt){ if(!scrollMoveObj)return; evt = evt || event; var per = (scrollMoveObj.scrollHeight - scrollMoveObj.clientHeight) / (scrollMoveObj.clientHeight - scrollMoveObj.scrollBarHeight) scrollMoveObj.scrollTop = scrollY - (scrollPageY - evt.clientY) * per; setScrollPosition(scrollMoveObj); } document.documentElement.onmouseup = function(evt){ if(!scrollMoveObj)return; if(scrollMoveObj.scrollBar.className == '') { scrollMoveObj.scrollBarIndex.style.backgroundColor = '#aaa'; } scrollMoveObj = null; document.body.onselectstart = function(){return true}; } // 鼠标滚轮滚动 function scrollMove(evt){ var div = this.scrollDiv || this; if(div.scrollHeight <= div.clientHeight) return true; evt = evt || event; var step = 20; if(evt.wheelDelta < 0) { if(div.scrollTop >= (div.scrollHeight - div.clientHeight)) return true; div.scrollTop += step; } else { if(div.scrollTop == 0) return true; div.scrollTop -= step; } setScrollPosition(div); return false; } [/code]
布局问题
代码如下: [code="java"] function BrowerArticle(ArticleID, ArticleTitle) { //判断 如果存在 就直接跳转 var temp_Tab_Center = Ext.getCmp('id_Tab_Center'); //如果存在 就跳转到该页 for (var i = 0; i < temp_Tab_Center.items.length; i++) { if (temp_Tab_Center.items.items[i].id == 'Article_' + ArticleID) { temp_Tab_Center.activate(temp_Tab_Center.items.items[i]); return; } } //----------------------------页面内容 begin-------------------------------- //-->帖子题目 var ArticleTitleLabel = new Ext.form.Label({ id: 'ArticleTitleLabel_' + ArticleID , name: 'ArticleTitleLabel_' + ArticleID , text: ArticleTitle , style : 'font-size:x-large;color:Blue' }); //-->帖子内容 //数据获取地址 var strGridUrl = 'json/Forum/Article.aspx?Param=BrowerArticle&ArticleID=' + ArticleID; //数据集格式 var fields = [ {name:'RevertID'}, {name:'ArticleID'}, {name:'dtPublish'}, {name:'UserId'}, {name:'UserName'}, {name:'RevertContent'}, {name:'IntSupport'}, {name:'IntAgainst' } ]; //数据集内容 var store = new Ext.data.Store ({ proxy: new Ext.data.HttpProxy({ url: strGridUrl }), reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root', fields: fields }) }); store.load({ params: { start: 0, limit: 40} }); //DataView var tpl = new Ext.XTemplate( '<tpl for=".">' , '<div style="width:100%">' , '<table style="border:1px;" cellpadding="0px" cellspacing="0px">' , '<tr>' , '<td>' , '{UserName} 发表于: {dtPublish}' , '</td>' , '</tr>' , '<tr>' , '<td>' , '{RevertContent}' , '</td>' , '</tr>' , '</table>' , '<hr/>' , '</div>' , '</tpl>' ); var BrowerArticle_DataView = new Ext.DataView({ store: store , id: 'BrowerArticle_DataView_' + ArticleID , multiSelect: false , emptyText: '暂无数据' , autoHeight: true , autoWidth: true , tpl: tpl , overClass: 'x-view-over' , itemSelector: 'div.thumb-wrap' }); //pagingtool var My_PTbar = new Ext.PagingToolbar({ store: store, displayInfo: true, emptyMsg: '没有数据显示', displayMsg: '当前显示{0}-{1}条记录,共{2}条', pageSize: 30, prevText: "上一页", nextText: "下一页", refreshText: "刷新", lastText: "最后页", firstText: "第一页", beforePageText: "当前页" }); //回覆內容 var ReplayContent = new Ext.form.TextArea({ id:'ReplayContent', name:'ReplayContent', fieldLabel:'回 复', allowBlank : false, anchor:'90%', height:340, allowBlank : false }); //取消 按鈕 var CancleButton = new Ext.Button({ text:'取 消' ,tooltip:'取 消' }); //确定 按钮 var OKButton = new Ext.Button({ text:'提 交' ,tooltip:'提 交' }); //-->整体Panel var BrowerArticlePanel = new Ext.Panel({ title: ArticleTitle.substring(0,4) ,tabTip : ArticleTitle , id: 'Article_' + ArticleID , frame: true , autoWidth: false , autoheight: false , autoScroll: true , closable: true , layout: 'column' , items: [{ columnWidth:1, style: 'text-align:center', autoScroll : false, items:[ArticleTitleLabel] }, { columnWidth:1, autoScroll : false, autoWidth:false, autoHeight : false, items:[BrowerArticle_DataView], bbar : My_PTbar }, { columnWidth:1, layout:'form', autoScroll : false, items:[ReplayContent], buttons:[CancleButton,OKButton] } ] }); //如果没有 创建该页 并跳转到该页 temp_Tab_Center.add(BrowerArticlePanel); temp_Tab_Center.activate(BrowerArticlePanel); } [/code] 实现的效果是一个帖子浏览页面 这个页面最终会放到主页面temp_Tab_Center中 最后上面是一个标题 中间是dataview显示帖子内容 dataview下面是pageingToolBar用作分页 最下面是一个跟帖的内容 现在碰到的问题是 我帖子里面如果有图片的话 会出现横向的滚动条 虽然图片宽度没有超过页面的宽度 请问大家这个是为什么啊? 结果图如下: [img]http://dl.iteye.com/upload/attachment/155963/37aa5883-a0b2-3e40-a0c8-d0235a38cb5a.gif[/img] [b]问题补充:[/b] lovewhzlq: autoScroll: true 这里改为false看看 这样的话 上下滚动条 就不显示了 并且 当图片超大的时候 横向滚动条还是需要显示的 jim.jin: 那有什么 解决方法么? [b]问题补充:[/b] 我将, layout: 'column' 就该为 border:‘column’ 错误不再出现了 排版正常了 谢谢各位 虽然没有正确答案 为了谢谢jim.jin 的热心 我就放分了
关于HTML和火狐浏览器的问题
问题是这样的这是一个跑马灯的效果,在IE浏览器下正常,可是放在火狐浏览器下就出现问题,请论坛的大牛们帮忙解决一下! <br />&lt;% <br />MM_yuhua_STRING = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" &amp; Server.MapPath( "buyer/uploadimage/database/fdsa#ffadl.mdb") <br />set rs=server.CreateObject("adodb.recordset") <br /> %&gt; <br /> <br /> <br />&lt;html&gt; <br /> <br />&lt;!-- scroll.htm [XR&amp;CO'2007], Wed, 26 Dec 2007 09:03:51 GMT --&gt; <br />&lt;head&gt; <br />&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; <br />&lt;title&gt;无标题文档&lt;/title&gt; <br />&lt;SCRIPT language=JavaScript&gt; <br />&lt;!-- <br />// <br />var x = 0; <br />var y = 0; <br />var limdex = 763;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //这个值取决于下面表格宽度的1/2 这是1560的一半 <br />var dest = 0; <br />var distance = 0; <br />var step = 0; <br />var destination = 0; <br />var on = true; <br /> <br />function scrollit(destination) <br />{ <br />step = 2; <br />dest = destination; <br />if (x&lt;dest &amp; x &lt; limdex){ <br />while (x&lt;dest) { <br />step += (step / 7); <br />x += step; <br />scroll(x,0); <br />}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // top.main.scroll(dest,0); <br />if(dest &lt;=limdex) { scroll(dest,0); } <br />x = dest; <br />} <br />if (x &gt; dest)&nbsp; { <br />while (x&gt;dest) { <br />step += (step / 7); <br />if(x &gt;= (0+step)) { x -= step; scroll(x,0); } <br />else break; <br />} <br />if(dest &gt;= 0) {scroll(dest,0); } <br />x = dest; <br />} <br />if (x&lt;1) {scroll(1,0); x=1 } <br />if (x&gt;limdex) {scroll(limdex,0); x=limdex } <br />x = dest; <br />} <br /> <br />function scrollnow() {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (on){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (x &lt; limdex &amp; x &gt;= 0 ) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scroll(x,0);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; x = x + 1;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setTimeout('scrollnow()', 20);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else if (x &lt; 0) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; x = limdex;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scrollnow();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; x=0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scrollnow();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } <br /> <br />} <br /> <br />// ********************************* <br />// 去掉原来的stopscroll() <br />function stopscroll() {&nbsp; if (on){&nbsp; on = false;&nbsp; }&nbsp; else {&nbsp; on = true;&nbsp; scrollnow();&nbsp; }&nbsp; <br />} <br />function startscroll() { on = true; scrollnow(); } <br />function stop_start() { <br />if (on){ on = false;}else { on = true;scrollnow();} <br />} <br />file://*********************************** <br /> <br />function MM_callJS(jsStr) { file://v2.0 <br />&nbsp; return eval(jsStr) <br />} <br />file://--&gt; <br />&lt;/SCRIPT&gt; <br />&lt;style type="text/css"&gt; <br />&lt;!-- <br />body { <br /> margin-left: 0px; <br /> margin-top: 0px; <br /> margin-right: 0px; <br /> margin-bottom: 0px; <br /> background-color: #1D6F1F; <br />} <br />td { <br /> font-family: Verdana, Arial, Helvetica, sans-serif; <br /> font-size: 11px; <br /> line-height: 18px; <br /> color: #4E1F00; <br />} <br />--&gt; <br />&lt;/style&gt;&lt;/head&gt; <br /> <br />&lt;body onLoad="MM_callJS('startscroll()')"&gt; <br />&lt;table width="1526" border="0" cellspacing="10" cellpadding="0"&gt; <br />&nbsp; &lt;tr&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p01.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p02.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p03.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p04.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p05.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p06.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p07.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p08.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p01.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p02.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p03.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p04.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p05.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p06.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p07.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp;&nbsp;&nbsp; &lt;td width="86" align="center"&gt;&lt;img src="images/p08.JPG" width="86" height="85"&gt;&lt;/td&gt; <br />&nbsp; &lt;/tr&gt; <br />&lt;/table&gt; <br />&lt;/body&gt; <br /> <br />&lt;!-- scroll.htm [XR&amp;CO'2007], Wed, 26 Dec 2007 09:04:08 GMT --&gt; <br />&lt;/html&gt;
动态规划入门到熟悉,看不懂来打我啊
持续更新。。。。。。 2.1斐波那契系列问题 2.2矩阵系列问题 2.3跳跃系列问题 3.1 01背包 3.2 完全背包 3.3多重背包 3.4 一些变形选讲 2.1斐波那契系列问题 在数学上,斐波纳契数列以如下被以递归的方法定义:F(0)=0,F(1)=1, F(n)=F(n-1)+F(n-2)(n&gt;=2,n∈N*)根据定义,前十项为1, 1, 2, 3...
终于明白阿里百度这样的大公司,为什么面试经常拿ThreadLocal考验求职者了
点击上面↑「爱开发」关注我们每晚10点,捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类,各个线程都拥有一份线程私...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
Python 植物大战僵尸代码实现(2):植物卡片选择和种植
这篇文章要介绍的是: - 上方植物卡片栏的实现。 - 点击植物卡片,鼠标切换为植物图片。 - 鼠标移动时,判断当前在哪个方格中,并显示半透明的植物作为提示。
防劝退!数据结构和算法难理解?可视化动画带你轻松透彻理解!
大家好,我是 Rocky0429,一个连数据结构和算法都不会的蒟蒻… 学过数据结构和算法的都知道这玩意儿不好学,没学过的经常听到这样的说法还没学就觉得难,其实难吗?真难! 难在哪呢?当年我还是个小蒟蒻,初学数据结构和算法的时候,在忍着枯燥看完定义原理,之后想实现的时候,觉得它们的过程真的是七拐八绕,及其难受。 在简单的链表、栈和队列这些我还能靠着在草稿上写写画画理解过程,但是到了数论、图...
【搞定 Java 并发面试】面试最常问的 Java 并发基础常见面试题总结!
本文为 SnailClimb 的原创,目前已经收录自我开源的 JavaGuide 中(61.5 k Star!【Java学习 面试指南】 一份涵盖大部分Java程序员所需要掌握的核心知识。欢迎 Star!)。 另外推荐一篇原创:终极推荐!可能是最适合你的Java学习路线 方法 网站 书籍推荐! Java 并发基础常见面试题总结 1. 什么是线程和进程? 1.1. 何为进程? 进程是程...
西游记团队中如果需要裁掉一个人,会先裁掉谁?
2019年互联网寒冬,大批企业开始裁员,下图是网上流传的一张截图: 裁员不可避免,那如何才能做到不管大环境如何变化,自身不受影响呢? 我们先来看一个有意思的故事,如果西游记取经团队需要裁员一名,会裁掉谁呢,为什么? 西游记团队组成: 1.唐僧 作为团队teamleader,有很坚韧的品性和极高的原则性,不达目的不罢休,遇到任何问题,都没有退缩过,又很得上司支持和赏识(直接得到唐太宗的任命,既给
shell脚本:备份数据库、代码上线
备份MySQL数据库 场景: 一台MySQL服务器,跑着5个数据库,在没有做主从的情况下,需要对这5个库进行备份 需求: 1)每天备份一次,需要备份所有的库 2)把备份数据存放到/data/backup/下 3)备份文件名称格式示例:dbname-2019-11-23.sql 4)需要对1天以前的所有sql文件压缩,格式为gzip 5)本地数据保留1周 6)需要把备份的数据同步到远程备份中心,假如...
iOS Bug 太多,苹果终于坐不住了!
开源的 Android 和闭源的 iOS,作为用户的你,更偏向哪一个呢? 整理 | 屠敏 出品 | CSDN(ID:CSDNnews) 毋庸置疑,当前移动设备操作系统市场中,Android 和 iOS 作为两大阵营,在相互竞争的同时不断演进。不过一直以来,开源的 Android 吸引了无数的手机厂商涌入其中,为其生态带来了百花齐放的盛景,但和神秘且闭源的 iOS 系统相比,不少网友...
神经⽹络可以计算任何函数的可视化证明
《Neural Networks and Deep Learning》读书笔记第四篇本章其实和前面章节的关联性不大,所以大可将本章作为小短文来阅读,当然基本的深度学习基础还是要有的。主要介绍了神经⽹络拥有的⼀种普遍性,比如说不管目标函数是怎样的,神经网络总是能够对任何可能的输入,其值(或者说近似值)是网络的输出,哪怕是多输入和多输出也是如此,我们大可直接得出一个结论:不论我们想要计算什么样的函数,...
聊聊C语言和指针的本质
坐着绿皮车上海到杭州,24块钱,很宽敞,在火车上非正式地聊几句。 很多编程语言都以 “没有指针” 作为自己的优势来宣传,然而,对于C语言,指针却是与生俱来的。 那么,什么是指针,为什么大家都想避开指针。 很简单, 指针就是地址,当一个地址作为一个变量存在时,它就被叫做指针,该变量的类型,自然就是指针类型。 指针的作用就是,给出一个指针,取出该指针指向地址处的值。为了理解本质,我们从计算机模型说起...
为什么你学不过动态规划?告别动态规划,谈谈我的经验
动态规划难吗?说实话,我觉得很难,特别是对于初学者来说,我当时入门动态规划的时候,是看 0-1 背包问题,当时真的是一脸懵逼。后来,我遇到动态规划的题,看的懂答案,但就是自己不会做,不知道怎么下手。就像做递归的题,看的懂答案,但下不了手,关于递归的,我之前也写过一篇套路的文章,如果对递归不大懂的,强烈建议看一看:为什么你学不会递归,告别递归,谈谈我的经验 对于动态规划,春招秋招时好多题都会用到动态...
程序员一般通过什么途径接私活?
二哥,你好,我想知道一般程序猿都如何接私活,我也想接,能告诉我一些方法吗? 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”,还有很多读者问过我类似这样的问题。 我接的私活不算多,挣到的钱也没有多少,加起来不到 20W。说实话,这个数目说出来我是有点心虚的,毕竟太少了,大家轻喷。但我想,恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉,我也算是有经验的人了。 唾弃接私活、做外...
字节跳动面试官这样问消息队列:分布式事务、重复消费、顺序消费,我整理了一下
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式和人才交流群,欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸...
如何安装 IntelliJ IDEA 最新版本——详细教程
IntelliJ IDEA 简称 IDEA,被业界公认为最好的 Java 集成开发工具,尤其在智能代码助手、代码自动提示、代码重构、代码版本管理(Git、SVN、Maven)、单元测试、代码分析等方面有着亮眼的发挥。IDEA 产于捷克,开发人员以严谨著称的东欧程序员为主。IDEA 分为社区版和付费版两个版本。 我呢,一直是 Eclipse 的忠实粉丝,差不多十年的老用户了。很早就接触到了 IDEA...
面试还搞不懂redis,快看看这40道面试题(含答案和思维导图)
Redis 面试题 1、什么是 Redis?. 2、Redis 的数据类型? 3、使用 Redis 有哪些好处? 4、Redis 相比 Memcached 有哪些优势? 5、Memcache 与 Redis 的区别都有哪些? 6、Redis 是单进程单线程的? 7、一个字符串类型的值能存储最大容量是多少? 8、Redis 的持久化机制是什么?各自的优缺点? 9、Redis 常见性...
大学四年自学走来,这些珍藏的「实用工具/学习网站」我全贡献出来了
知乎高赞:文中列举了互联网一线大厂程序员都在用的工具集合,涉及面非常广,小白和老手都可以进来看看,或许有新收获。
为什么要推荐大家学习字节码?
配套视频: 为什么推荐大家学习Java字节码 https://www.bilibili.com/video/av77600176/ 一、背景 本文主要探讨:为什么要学习 JVM 字节码? 可能很多人会觉得没必要,因为平时开发用不到,而且不学这个也没耽误学习。 但是这里分享一点感悟,即人总是根据自己已经掌握的知识和技能来解决问题的。 这里有个悖论,有时候你觉得有些技术没用恰恰是...
互联网公司的裁员,能玩出多少种花样?
裁员,也是一门学问,可谓博大精深!以下,是互联网公司的裁员的多种方法:-正文开始-135岁+不予续签的理由:千禧一代网感更强。95后不予通过试用期的理由:已婚已育员工更有责任心。2通知接下来要过苦日子,让一部分不肯同甘共苦的员工自己走人,以“兄弟”和“非兄弟”来区别员工。3强制996。员工如果平衡不了工作和家庭,可在离婚或离职里二选一。4不布置任何工作,但下班前必须提交千字工作日报。5不给活干+...
【超详细分析】关于三次握手与四次挥手面试官想考我们什么?
在面试中,三次握手和四次挥手可以说是问的最频繁的一个知识点了,我相信大家也都看过很多关于三次握手与四次挥手的文章,今天的这篇文章,重点是围绕着面试,我们应该掌握哪些比较重要的点,哪些是比较被面试官给问到的,我觉得如果你能把我下面列举的一些点都记住、理解,我想就差不多了。 三次握手 当面试官问你为什么需要有三次握手、三次握手的作用、讲讲三次三次握手的时候,我想很多人会这样回答: 首先很多人会先讲下握...
新程序员七宗罪
当我发表这篇文章《为什么每个工程师都应该开始考虑开发中的分析和编程技能呢?》时,我从未想到它会对读者产生如此积极的影响。那些想要开始探索编程和数据科学领域的人向我寻求建议;还有一些人问我下一篇文章的发布日期;还有许多人询问如何顺利过渡到这个职业。我非常鼓励大家继续分享我在这个旅程的经验,学习,成功和失败,以帮助尽可能多的人过渡到一个充满无数好处和机会的职业生涯。亲爱的读者,谢谢你。 -罗伯特。 ...
活到老,学到老,程序员也该如此
全文共2763字,预计学习时长8分钟 图片来源:Pixabay 此前,“网传阿里巴巴要求尽快实现P8全员35周岁以内”的消息闹得沸沸扬扬。虽然很快被阿里辟谣,但苍蝇不叮无缝的蛋,无蜜不招彩蝶蜂。消息从何而来?真相究竟怎样?我们无从而知。我们只知道一个事实:不知从何时开始,程序猿也被划在了“吃青春饭”行业之列。 饱受“996ICU”摧残后,好不容易“头秃了变强了”,即将步入为“高...
Vue快速实现通用表单验证
本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。项目上需要做一个城市配载的功能,顾名思义,就是通过框选和拖拽的方式在地图上完成配载。博主选择了前后端分离的方式,在这个过程中发现:首先,只要有依赖jQuery的组件,譬如Kendoui,即使使用...
2019年Spring Boot面试都问了什么?快看看这22道面试题!
Spring Boot 面试题 1、什么是 Spring Boot? 2、Spring Boot 有哪些优点? 3、什么是 JavaConfig? 4、如何重新加载 Spring Boot 上的更改,而无需重新启动服务器? 5、Spring Boot 中的监视器是什么? 6、如何在 Spring Boot 中禁用 Actuator 端点安全性? 7、如何在自定义端口上运行 Sprin...
【图解】记一次手撕算法面试:字节跳动的面试官把我四连击了
字节跳动这家公司,应该是所有秋招的公司中,对算法最重视的一个了,每次面试基本都会让你手撕算法,今天这篇文章就记录下当时被问到的几个算法题,并且每个算法题我都详细着给出了最优解,下面再现当时的面试场景。看完一定让你有所收获 一、小牛试刀:有效括号 大部分情况下,面试官都会问一个不怎么难的问题,不过你千万别太开心,因为这道题往往可以拓展出更多有难度的问题,或者一道题看起来很简单,但是给出最优解,确实很...
关于裁员几点看法及建议
最近网易裁员事件引起广泛关注,昨天网易针对此事,也发了声明,到底谁对谁错,孰是孰非?我们作为吃瓜观众实在是知之甚少,所以不敢妄下定论。身处软件开发这个行业,近一两年来,对...
面试官:关于Java性能优化,你有什么技巧
通过使用一些辅助性工具来找到程序中的瓶颈,然后就可以对瓶颈部分的代码进行优化。 一般有两种方案:即优化代码或更改设计方法。我们一般会选择后者,因为不去调用以下代码要比调用一些优化的代码更能提高程序的性能。而一个设计良好的程序能够精简代码,从而提高性能。 下面将提供一些在JAVA程序的设计和编码中,为了能够提高JAVA程序的性能,而经常采用的一些方法和技巧。 1.对象的生成和大小的调整。 J...
【图解算法面试】记一次面试:说说游戏中的敏感词过滤是如何实现的?
版权声明:本文为苦逼的码农原创。未经同意禁止任何形式转载,特别是那些复制粘贴到别的平台的,否则,必定追究。欢迎大家多多转发,谢谢。 小秋今天去面试了,面试官问了一个与敏感词过滤算法相关的问题,然而小秋对敏感词过滤算法一点也没听说过。于是,有了下下事情的发生… 面试官开怼 面试官:玩过王者荣耀吧?了解过敏感词过滤吗?,例如在游戏里,如果我们发送“你在干嘛?麻痹演员啊你?”,由于“麻痹”是一个敏感词,...
程序员需要了解的硬核知识之汇编语言(一)
之前的系列文章从 CPU 和内存方面简单介绍了一下汇编语言,但是还没有系统的了解一下汇编语言,汇编语言作为第二代计算机语言,会用一些容易理解和记忆的字母,单词来代替一个特定的指令,作为高级编程语言的基础,有必要系统的了解一下汇编语言,那么本篇文章希望大家跟我一起来了解一下汇编语言。 汇编语言和本地代码 我们在之前的文章中探讨过,计算机 CPU 只能运行本地代码(机器语言)程序,用 C 语言等高级语...
GitHub 标星 1.6w+,我发现了一个宝藏项目,作为编程新手有福了!
大家好,我是 Rocky0429,一个最近老在 GitHub 上闲逛的蒟蒻… 特别惭愧的是,虽然我很早就知道 GitHub,但是学会逛 GitHub 的时间特别晚。当时一方面是因为菜,看着这种全是英文的东西难受,不知道该怎么去玩,另一方面是一直在搞 ACM,没有做一些工程类的项目,所以想当然的以为和 GitHub 也没什么关系(当然这种想法是错误的)。 后来自己花了一个星期看完了 Pyt...
相关热词 c# 数组类型 泛型约束 c#的赛狗日程序 c# 传递数组 可变参数 c# 生成存储过程 c# list 补集 c#获得所有窗体 c# 当前秒数转成年月日 c#中的枚举 c# 计算校验和 连续随机数不重复c#
立即提问