js中如何查询html中所有带z-index样式的标签

如图:

图片说明

通过这种方法 我只能找到

的标签

图片说明

但是第一个div 中的class中也包含 z-index这个样式,但是按我那种找法是找不出来的。
有没有什么方法能查出所有带有z-index的样式的方法?

9个回答

console.log((myDiv[i].currentStyle||getComputedStyle(myDiv[i],null)).zIndex);

gjfvip123
gjfvip123 恩,谢谢,我没有设置相对定位或者绝对定位,设置后就zindex值就出来了。
接近 2 年之前 回复
jslang
天际的海浪 回复gjfvip123: 因为这种方法获取的是元素真实呈现的样式。 只有元素设置定位方式position:为 relative或absolute或fixed时,z-index才会真正生效
接近 2 年之前 回复
gjfvip123
gjfvip123 打印出来是3额auto....
接近 2 年之前 回复

级联样式表中的样式不能通过dom的style获取,自己参考这个
Javascript获取级联样式表中定义的CSS值

你这个非要在浏览器里面找么,复制到文本编辑器里面可以查找啊。或者idea里面,直接做前端的话webstrom这种里面找。

你打印一下myDiv.length 看看 按道理你的z-index:999也应该被打印出来的

用JQ查询出所有符合条件的对象,比如$("style*=''z-index") 就会获取到tyle内容里包含z-index的对象

你可以使用js正则匹配标签

为什么不定义一个class,然后找这个class

用JS枚举出来好像也可以。

定义一个class是可以的吧

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
ext4.0这个BUG如何修改?

ext我用的是4.0,旧版本3.0没有这个问题. 我在一个强出的Window窗体中,加载fckeditor编辑器,当然可以正常的显示出来了,但是我选择图片上传那个工具条时,强出的浏览图片的那个对话框没在Window窗体的前面!即躺在了Window窗体后面去了,相当于被窗体给覆盖掉了!这显然是不行的,这个问题,怎么解决呢?才能做点工具栏时,弹出的窗永远在最前面? 可能说得有点抽象,下面,我弄截图上面。 下面再说下,我自己的解决方法与思路,只是没效果,请大虾们指教。 这种情况下,我们肯定会想到,是z-index的问题,于是,我重新设制了强出的Window窗体的z-index,方法如下: fckWindow.getEl().setStyle("z-index", "19000");//我这里值改为19000,没效果,我改成其它任意的值,也没效果,为何? 另一种方法,我想到,去改ext-all.css里面的相关的z-index值,我特意把里面,所有的关于z-index设置的样式都找出来了,如下: .x-focus-frame { position: absolute; left: 0px; top: 0px; z-index: 100000000; width: 0px; height: 0px } .x-mask { z-index: 100; position: absolute; top: 0; left: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid : DXImageTransform.Microsoft.Alpha ( Opacity = 50 ); opacity: 0.5; width: 100%; height: 100%; zoom: 1; background: #cccccc } .x-mask-msg { z-index: 20001; position: absolute; top: 0; left: 0; padding: 2px; border: 1px solid; border-color: #99bce8; background-image: none; background-color: #dfe9f6 } .x-menu-icon-separator { position: absolute; top: 0px; left: 27px; z-index: 0; border-left: solid 1px #e0e0e0; background-color: white; width: 2px; height: 100%; overflow: hidden } .x-menu-item { white-space: nowrap; overflow: hidden; z-index: 1 } .x-column-header-trigger { display: none; height: 100%; width: 14px; background: no-repeat left center; background-color: #c3daf9; background-image: url('../../resources/themes/images/default/grid/grid3-hd-btn.gif'); position: absolute; right: 0; top: 0; z-index: 2; cursor: pointer } .x-grid-resize-marker { position: absolute; z-index: 5; top: 0; width: 1px; background-color: #0f0f0f } .col-move-top,.col-move-bottom { width: 9px; height: 9px; position: absolute; top: 0; line-height: 0; font-size: 0; overflow: hidden; z-index: 20000; background: no-repeat left top transparent } .x-grid-row-editor { position: absolute !important; z-index: 1; zoom: 1; overflow: visible !important } .x-form-item-label { float: left; padding: 3px 0 0; z-index: 2; position: relative; font-size: 12px; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: ignore; cursor: default } .x-tab-bar-body { border-style: solid; border-color: #99bce8; position: relative; z-index: 2; zoom: 1 } .x-tab-bar-strip-default,.x-tab-bar-strip-default-plain { font-size: 0; line-height: 0; position: absolute; z-index: 1; border-style: solid; overflow: hidden; border-color: #99bce8; background-color: #deecfd; zoom: 1 } .x-tab { z-index: 1; margin: 0 0 0 2px; display: inline-block; zoom: 1; * display: inline; white-space: nowrap; height: 20px; border-color: #8db3e3; cursor: pointer; cursor: hand } .x-tab-active { z-index: 3 } .x-dd-drop-icon { position: absolute; top: 3px; left: 3px; display: block; width: 16px; height: 16px; background-color: transparent; background-position: center; background-repeat: no-repeat; z-index: 1 } .x-resizable-handle { position: absolute; z-index: 100; font-size: 1px; line-height: 6px; overflow: hidden; zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid : DXImageTransform.Microsoft.Alpha ( Opacity = 0 ); opacity: 0; background-color: #fff } .x-resizable-handle-southeast { width: 6px; height: 6px; right: 0; bottom: 0; z-index: 101 } .x-resizable-handle-northwest { width: 6px; height: 6px; left: 0; top: 0; z-index: 101 } .x-resizable-handle-northeast { width: 6px; height: 6px; right: 0; top: 0; z-index: 101 } .x-resizable-handle-southwest { width: 6px; height: 6px; left: 0; bottom: 0; z-index: 101 } .x-resizable-proxy { border: 1px dashed #3b5a82; position: absolute; left: 0; top: 0; overflow: hidden; z-index: 50000 } .x-resizable-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; z-index: 200000; background-color: #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid : DXImageTransform.Microsoft.Alpha ( Opacity = 0 ); opacity: 0 } .x-splitter-active { z-index: 4; font-size: 1px; background-color: #b4b4b4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: progid : DXImageTransform.Microsoft.Alpha ( Opacity = 80 ); opacity: 0.8 } .x-docked { position: absolute; z-index: 1 } .x-border-region-slide-in { z-index: 5 } .x-region-collapsed-placeholder { z-index: 4 } .x-box-scroller-left { float: left; height: 100%; z-index: 5 } .x-box-scroller-right { float: right; height: 100%; z-index: 5 } 只是,见鬼的是,里面的z-index的值,我怎么改变,都没效果!实在想不出还有什么好办法解决的了,请大虾们指点下吧,先谢了。 [img]http://dl.iteye.com/upload/attachment/556222/a90562a6-b579-35c3-a15f-2d32fac16f01.png[/img]

li标签无法正常显示,display值为none

1 代码 ``` <style> .ck-slide{ width:720px; } .ck-slide-wrapper{ height: 100%; } </style> <div class="ck-slide"> <ul class="ck-slide-wrapper"> <li> <a href="#"><img src="../github/myck_slide-master/images/1.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="#"><img src="../github/myck_slide-master/images/2.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/3.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/4.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/5.jpg" alt="" style="width:700px;"></a> </li> </ul> <script src="../github/myck_slide-master/js/myslide.js"> </script> <script> /* $(".ck-slide").ckSlide({ autoPlay:true })*/ </script> </div> //引入的外部样式 * { margin: 0px; padding: 0px; } .ck-slide { margin: 100px 0 0 0; left: 50%; margin-left: -400px; width:800px; position: relative; } .ck-slide .ck-slide-wrapper { top: 0; left: 0; z-index: 1; width:100%; position: absolute; } .ck-slide-wrapper li{ list-style: none; display: block; } ``` 2 显示效果 ![图片说明](https://img-ask.csdn.net/upload/201610/27/1477576361_55061.png) ![图片说明](https://img-ask.csdn.net/upload/201610/27/1477576370_818515.png) 3 问题 想实现的效果是轮播。 上述代码在浏览器中打开的时候可以正常显示第一章图片。 按照我个人的理解,ul下面放置了li标签,并且ck-slide样式被设置了指定的宽度居中显示,那么ul下面的li标签会在垂直方向上分布显示,但是实际效果却仅仅显示了第一张图片的效果。通过提示工具查看发现ul下面的li标签除了第一个li标签外 其他li标签的display被设置为了none,这是为什么呀??我没有设置display为none呀 ------------------------------------------------------------- # **有朋友提到js文件的问题,这里并没有执行js代码,我提供全部代码:** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/slide.css"> <script src="./js/jquery.min.js"></script> <style> .ck-slide{ width:720px; height:320px; } .ck-slide-wrapper{ height: 100%; } </style> </head> <body> <div class="ck-slide"> <ul class="ck-slide-wrapper"> <li> <a href="#"><img src="images/1.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="#"><img src="images/2.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/3.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/4.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/5.jpg" alt="" style="width:700px;"></a> </li> </ul> <a href="javascript:;" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:;" class="ctrl-slide ck-next">下一张</a> <div class="ck-slideBox"> <div class="slideWrap"> <ul> <li class="current"><em>1</em></li> <li><em>2</em></li> <li><em>3</em></li> <li><em>4</em></li> </ul> </div> </div> </div> </body> </html> ``` 使用到的图片 ![图片说明](https://img-ask.csdn.net/upload/201610/29/1477732376_480707.jpg) 感谢给位朋友的指点!

dialog上的控件被覆盖在下面,如何解决

该控件样式是这样的 ![图片说明](https://img-ask.csdn.net/upload/201706/02/1496370407_496042.png) 问题是我在一个dialog上触发该控件后它显示在了dialog后面,调试了很久也没解决,该如何让它显示在前面呢? ![图片说明](https://img-ask.csdn.net/upload/201706/02/1496370990_956148.png)

HTML+CSS设置div .main_right中的float:left无效

``` <!DOCTYPE html> <html style="background-image: url(./img/bg.png);"> <head> <meta charset="utf-8" /> <title>This is my first</title> <style> * { margin: 0; font-family: "微软雅黑"; transition:0.5s; -webkit-font-smoothing: antialiased; } .header { width: 100%; height: 70px; background-color: white; position: fixed; top: 0; box-shadow:3px 1px 2px darkgrey; } .header:hover { box-shadow:3px 1px 2px #000; } .header a { line-height: 70px; margin: 85px; color: black; text-decoration: none; padding: 15px; font-size: 16px; text-shadow: 0 1px 1px #fff; } .header a:hover { background-color: black; color: white; } .left { width: 5px; height: 700px; background-color: #A9A9A9; position: fixed; left: 0; overflow: auto; text-align: center; } .left:hover { background-color: white; width: 200px; box-shadow:3px 1px 2px darkgrey; border-top-width: 1px; border-top-style: solid; border-top-color: aqua; } .left a { color: #A9A9A9; text-decoration: none; } .main_left { margin: 80px; background-color: white; width: 70%; height: 700px; border-top-width: 1px; border-top-style: solid; border-top-color: aqua; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: aqua; } .main_left:hover { box-shadow:3px 1px 2px darkgrey; } .main_right { background-color: white; height: 200px; width: 20%; float: left; } </style> </head> <body> <div class="header"> <a href="#">主页</a> <a href="#">博客中心</a> <a href="#">下载中心</a> <a href="#">教程大全</a> <a href="#">登录</a> </div> <div class="left"> <a href="#">HTML5</a> <p></p> <a href="#">CSS</a> <p></p> <a href="#">JavaScript</a> <p></p> <a href="#">Vue.js</a> <p></p> <a href="#">Node.js</a> <p></p> <a href="#">Ajax</a> <p></p> <a href="#">Django</a> <p></p> <a href="#">PHP</a> <p></p> <a href="#" >Flash</a> <p></p> <a href="#">ASP</a> <p></p> <a href="#">ASP.NET</a> <p></p> <a href="#">.NET</a> <p></p> <a href="#">JSP</a> <p></p> <a href="#">Perl</a> <p></p> <a href="#">JQuery</a> <p></p> <a href="#">react</a> <p></p> <a href="#">bootstrap</a> <p></p> <a href="#">StringBoot</a> <p></p> <a href="#">router</a> <p></p> <a href="#">DVA</a> <p></p> <a href="#">数据库</a> <p></p> <a href="#">C#</a> <p></p> <a href="#">Java</a> <p></p> <a href="#">C++</a> <p></p> <a href="#">C</a> <p></p> <a href="#">Go</a> <p></p> <a href="#">Python</a> </div> <div class="main_left"> </div> <div class="main_right"> </div> </body> </html> ``` ![图片说明](https://img-ask.csdn.net/upload/202004/17/1587089170_525954.png) 运行之后就是这样, float: left;设置无效,将width调整过,无效 求解

修改css样式表没有任何效果,将CSS样式表中的内容复制到新的表中导入后,样式同样不在页面显示

在同一个表中,属性相同但是class名不同,调用自己新建的class名不显示效果,但是用原来的就可以 请问是什么原因,后来新建了css表,将原css所有内容原封不动复制进去,再导入,但是效果却不显示, bootstrap的样式可以正常显示,js同样可以正常显示 ![这个是原来的样式](https://img-ask.csdn.net/upload/201701/18/1484705350_8330.jpg) ![我想把中间那块放到中间的,但是没有效果](https://img-ask.csdn.net/upload/201701/18/1484705359_500615.jpg) CSS代码 ``` @charset "utf-8"; *{margin:0px; padding:0px;} body{font-family:"微软雅黑", Arial, Helvetica, sans-serif; font-size:12px; line-height:1.5em; color:#555555;background:#f3f3f3;} ul{list-style-type:none;} input,select,textarea{vertical-align:middle; font-family:inherit; font-size:inherit; color:inherit; outline:none;} h1,h2,h3,h4,h5,h6{font-weight:normal;} a{color:#555555; text-decoration:none; outline:none;} a:hover,a.glink:hover,a.blink:hover{ text-decoration:none;outline:none;} .clear{ clear:both; font-size:0; height:0; line-height:0;overflow:hidden} a img{ border:0;} .leftF{ float:left;} .centerF{float:left;} .rightF{ float:right;} .main{ width:1116px; margin:0 auto; padding-bottom:330px;} .main .mainleft{ width:210px;top:90px; position:relative;} .main .mainright{ float:left;padding:0px;width:905px;} .foot{ background:#999999; color:#ffffff; padding:20px 0; text-align:center; font-size:14px; line-height:24px;} .footinner{ border-top:1px solid #dddddd; color:#ffffff; padding:45px 0 80px 0; text-align:center; font-size:14px; line-height:24px;} .footinner .footintop{ color:#333333;} .footinner .footinbto{ color:#555555;} .bigperson{ margin-bottom:-57px; top:-77px; position:absolute;} .bigperson .touxiang{ width:210px; text-align:center;} .bigperson .touxiang img{ width:100px; height:100px; border:2px solid #fff; border-radius:50%;} .bigperson .personname{ text-align:center; font-size:18px; color:#555555; line-height:32px;} header #header-top {top: 0; right: 0; left: 0; padding: 0 1em; height: 3em; line-height: 3em; color: #fff; background-color: #2c3e50; z-index: 2;} header #header-top #logout { float: right; } header #header-top #logout a { color: inherit; } .current a{display:block; background:#61b988;line-height:38px; height:38px; margin:0px 0 15px 0; color:#fff; font-size:14px;} .current a{color:#FFF;} .funclistul {position:relative;} .funclistul li{ line-height:38px; height:38px;font-size:14px;} .funclistul li a{ text-align:center;display:block; padding:0; line-height:38px; height:38px; font-size:14px; overflow:hidden;} .funclistul li a:hover{ background:#61b988; color:#fff;} .funclistul li b{ width:21px; height:20px; margin:10px 5px 0 0px;} .line {text-align:center;height:0px!important;border-top:solid 1px #CCC;} #divide_line {position:absolute;height:1316px;border-color:#CCC;border-left-style:solid;border-width:1px} #frame_content {border:0px; height:981px; min-height:700px;} .fl{float:left;} .fr{float:right;} .Wrapbody{width:890px;height:900px;overflow:hidden;padding-top:20px;position:relative;margin-left: 50px;} .zla_m_tab { width:850px;height:40px; padding-top:12px; border-bottom:2px #ccc solid;font-size:20px;color:#777;} .zla_m_item { float:left; width:106px; height:40px; } .zla_m_item a ,.zla_m_cur a { display:inline-block; width:150px; height:40px; line-height:40px; text-align:center;font-size:20px;color:#777;} .zla_m_item a:hover , .zla_m_cur a { display:inline-block; background:url(../img/tri.png) center 35px no-repeat; text-decoration:none; border-bottom:2px solid #61b988;font-size:20px;color:#333;} .Div { margin-top:30px; } .ulDiv { margin-top:30px; } .ulDiv ul li { margin-left: 3px; position:relative; width: 270px; margin-bottom: 32px; background-color: #fff; float:left; zoom: 1; letter-spacing: 0; overflow: hidden; height: 150px; margin-right: 16px; border-radius: 3px; } .ulDiv ul li:hover { border-color: rgba(101, 204, 153, 0.8); outline: 0; outline: thin dotted \9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(101, 204, 153, 0.6); } .Mcon1img .Gd { display: block; width: 23px; height: 23px; position: absolute; top: 0px; right: 0px; display: none; } .Mconright{padding:20px;} .Mconright h3{font-size:18px;padding:7px 0 10px 0;} .Mconright h3 a{float:left} .Mconright p{color:#666;font-size:12px;} .Mcon1img{position:relative;} .Mcon1img:hover .Gd{display:block;} .Mconright h3 i{display:none;width:8px;height:8px;background:red;border-radius:8px;margin-left: 5px;float:left;} .red { color: #b9423c; } .green { color: #61b988; } .force_red { color: #b9423c!important; } .force_green { color: #61b988!important; } .block { padding: 30px 0; } .aline { margin-right: 50px; padding: 10px 0; float: right; } .four_in_one { height: 50px; line-height: 50px; width: 172px; padding: 10px 50px 10px 0px; float: right; text-align: center; vertical-align: middle; } .specail_line_one { margin-right: 150px; } .specail_line_two { margin-right: 68px; } .specail_line_three { margin-right: 357px; } .specail_line_four { margin-right: 111px; } .normal_one { font-size: 2em; vertical-align: middle; } .normal_two { font-size: 1.5em; vertical-align: middle; } .normal_three { width: 50px; display: inline-block; font-size: 2em; vertical-align: top; } .normal_one, .normal_two, .normal_three { margin: 5px; height: 30px; line-height: 30px; overflow: hidden; } .one_block { width: 150px; height: 30px; text-align: center; } .one_line { width: 750px; height: 30px; } .many_lines { width: 750px; height: 150px; resize: none; overflow: scroll; } .exam_many_lines { width: 720px; height: 150px; resize: none; overflow: scroll; } .one_block, .one_line, .many_lines, .exam_many_lines { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border linear 0.2s, box-shadow linear 0.2s; font-size: 2em; display: inline-block; padding: 4px; color: #555555; vertical-align: middle; background-color: #ffffff; border: 1px solid #e3e3e3; border-radius: 3px; margin: 3px 0; } .one_block:focus, .one_line:focus, .many_lines:focus, .exam_many_lines:focus { border-color: rgba(101, 204, 153, 0.8); outline: 0; outline: thin dotted \9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(101, 204, 153, 0.6); } .submit_button { width: 200px; height: 41px; transition: border linear 0.2s, box-shadow linear 0.2s; font-size: 1.5em; display: inline-block; padding: 4px; color: #555555; vertical-align: middle; background-color: #ffffff; border: 1px solid #e3e3e3; border-radius: 3px; margin: 3px 0; cursor: hand; } .submit_button:hover { border-color: rgba(101, 204, 153, 0.8); outline: 0; outline: thin dotted \9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(101, 204, 153, 0.6); } .submit_button:focus { border-color: rgba(101, 204, 153, 0.8); outline: 0; outline: thin dotted \9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(101, 204, 153, 0.6); } .submit_button:disabled { color: #555555; background-color: #e8e8e8; } .submit_button:disabled:hover { border-color: rgba(232, 232, 232, 0.8); outline: 0; outline: thin dotted \9; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.075), 0 0 0 rgba(232, 232, 232, 0.6); } .submit_button:disabled:focus { border-color: rgba(232, 232, 232, 0.8); outline: 0; outline: thin dotted \9; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.075), 0 0 0 rgba(232, 232, 232, 0.6); } .check { margin-right: 10px; } .score { padding: 30px 50px; height: 400px; overflow: scroll; } .score_title { font-size: 1.5em; } .button_block { padding: 10px 0; text-align: center; } .marklist { z-index: 50; width:250px; top:105px; right:160px; position:fixed; background: #fff; padding: 10px; border-radius: 3px; } .mark_title, .submit_paper, .marklist ul li { position:relative; margin-bottom: 32px; background: #fff; float:left; zoom: 1; letter-spacing: 0; overflow: hidden; border-radius: 3px; text-align: center; border: 1px solid #61b988; } .mark_title:hover, .submit_paper:hover, .marklist ul li:hover { border-color: rgba(101, 204, 153, 0.8); outline: 0; outline: thin dotted \9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(101, 204, 153, 0.6); } .mark_title { width: 80px; height: 30px; margin: 10px 120px 10px 8px; } .submit_paper { width: 80px; height: 30px; margin: 20px 8px 10px 150px; } .marklist ul li { width: 30px; height: 30px; margin: 5px 8px; } .mark { line-height: 30px; font-size: 1.5em; color: #61b988; background: #fff; text-align: center; vertical-align: middle; } .active { background: #61b988!important; color: #fff; } .active a { background: #61b988!important; color: #fff; } header #exam_top {z-index:999!important;position: fixed; opacity:0.9; top: 0; right: 0; left: 0; padding: 0 1em; height: 4em; line-height: 4em; color: #3f3f3f; background-color: #fff; z-index: 2;font-size: 1.5em;} .exam_foot {z-index:999!important;margin-top:36px; background:#fefefe; color:#3f3f3f; padding:20px 0; text-align:center; font-size:14px; line-height:24px;} .center { text-align:center; } .exam_head { padding: 0 10px; } .alert_screen {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #fff; z-index: 1000;} .alert_block {margin-top: 300px; text-align: center;} .alert_msg {font-size: 2em;} .quit_btn, .alert_btn {margin-top: 50px;text-align: center;} .examright {position:relative; top:105px; padding:25px; width:770px; background: #fff; border-radius: 3px;margin-bottom: 100px;} .title{ font-size: 2em; padding: 10px 0; } .content_box { padding: 20px; } .choice_box { padding-left: 20px; } .content { height: 30px; line-height: 30px; font-size: 1.5em; padding: 10px 0; } .title:target, .content_box:target{ padding-top:72px; } @media screen and (max-width: 1400px){ .marklist { right:100px; } } @media screen and (max-width: 1300px){ .marklist { right:50px; } } @media screen and (max-width: 1200px){ .marklist { right:0px; } } ``` ``` <header> <div id="exam_top"> <div class="leftF"> <span class="exam_head">专业简答题</span> </div> <div class="rightF"> <span class="exam_head">账号:<%=(String) session.getAttribute("login")%></span> </div> <div class="center"> <span class="exam_head">考试限时:30分钟</span> <span class="exam_head">剩余时间:<span class="green" id="time"></span>分钟 </span> </div> </div> </header> <div class="main"> <div class="examright centerF"><!-- class leftF被修改 --> <div class="block" > <form action="SaveAnswer" method="post" id="form1"> <c:forEach items="${sq}" var="QsInfo" varStatus="vs"> <input type="hidden" name="index${vs.count}" value="${QsInfo.essayId}"/><!-- 隐藏题目ID传递给后台 --> <!--循环输出分割线———————————————————————————————————— --> <!-- EL表达式可以自动转型 --> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">专业简答题${vs.count} :</h3> </div> <div class="panel-body">${QsInfo.eTitle}</div> <div class="form-group"> <textarea class="form-control" rows="3" name="ans${vs.count}"></textarea> </div> </div> </c:forEach> </form> <div> <button type="button" class="btn btn-success btn-block" onclick="sub()">提交试卷</button> </div> <!--———————————————————————————————————————————————————————— --> </div> </div> </div> ```

寻找一种HTML页面转word时候插入页面页脚修改方法

目前使用的插件是jQuery-WordExport.js和FileSaver.js,想问问怎么去修改插件目前的js达到导出word附带页眉页脚的办法,目前网上只找到了一种方法,但不知道asp.net怎么修改,想问问js可以改吗。 目前我修改后的jQuery-WordExport.js 插件的代码 if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") { (function ($) { $.fn.wordExport = function (fileName) { fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export"; var static = { mhtml: { top: "Mime-Version: 1.0\nContent-Base: " + location.href + "\nContent-Type: Multipart/related; boundary=\"NEXT.ITEM-BOUNDARY\";type=\"text/html\"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset=\"utf-8\"\nContent-Location: " + location.href + "\n\n<!DOCTYPE html>\n<html>\n_html_</html>", head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n_styles_\n</style>\n</head>\n", body: "<body>_body_</body>" } }; var options = { maxWidth: 380, maxWidthProcess: 140, maxWidthBreakup: 120 }; // Clone selected element before manipulating it var markup = $(this).clone(); // Remove hidden elements from the output markup.each(function () { var self = $(this); if (self.is(':hidden')) self.remove(); }); var images = Array(); var img = markup.find('img'); for (var i = 0; i < img.length; i++) { // Calculate dimensions of output image var w = Math.min(img[i].width, options.maxWidth); if (img[i].className.indexOf("Process") != -1) { w = Math.min(img[i].width, options.maxWidthProcess); } else if (img[i].className.indexOf("Breakup") != -1) { w = Math.min(img[i].width, options.maxWidthBreakup); } var h = img[i].height * (w / img[i].width); var canvas = document.createElement("CANVAS"); canvas.width = w; canvas.height = h; // Draw image to canvas var context = canvas.getContext('2d'); context.drawImage(img[i], 0, 0, w, h); // Get data URL encoding of image var uri = canvas.toDataURL("image/jpeg"); $(img[i]).attr("src", img[i].src); img[i].width = w; img[i].height = h; images[i] = { type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")), encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")), location: $(img[i]).attr("src"), data: uri.substring(uri.indexOf(",") + 1) }; } // Prepare bottom of mhtml file with image data var mhtmlBottom = "\n"; for (var i = 0; i < images.length; i++) { mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n"; mhtmlBottom += "Content-Location: " + images[i].location + "\n"; mhtmlBottom += "Content-Type: " + images[i].type + "\n"; mhtmlBottom += "Content-Transfer-Encoding: " + images[i].encoding + "\n\n"; mhtmlBottom += images[i].data + "\n\n"; } mhtmlBottom += "--NEXT.ITEM-BOUNDARY--"; //TODO: load css from included stylesheet var styles = ""; // Aggregate parts of the file together var fileContent = static.mhtml.top.replace("_html_", static.mhtml.head.replace("_styles_", styles) + static.mhtml.body.replace("_body_", markup.html())) + mhtmlBottom; // Create a Blob with the file contents var blob = new Blob([fileContent], { type: "application/msword;charset=utf-8" }); saveAs(blob, fileName + ".doc"); }; })(jQuery); } else { if (typeof jQuery === "undefined") { console.error("jQuery Word Export: missing dependency (jQuery)"); } if (typeof saveAs === "undefined") { console.error("jQuery Word Export: missing dependency (FileSaver.js)"); } } 目前我在网上找到了一种,但是不知道怎么去改我的代码 https://blog.csdn.net/diejiu2046/article/details/101739883 ``` ```

js设置div可以拖动之后 div里面的input无法输入

本问题的解决方法:根据鼠标点击的标签名判断是否可以拖动。谢谢各位!另外还找到一种不太好的方法,就是给input加上一个默认的焦点,即使用$(input).focus(),有用但,不够灵活。 ``` document.getElementById("log_window").onmousedown = function (e) { var obj = document.elementFromPoint(event.clientX, event.clientY); if (obj.tagName.toLowerCase() === 'input' || obj.tagName.toLowerCase() === 'textarea') { return false; } getObject(this, e || event); }; ``` 大概代码如下: ``` <style type="text/css"> #div_add { HEIGHT: 796px; WIDTH: 1420px; background-color:#000; position:absolute; top:0; left:0; z-index:2; opacity:0.1; filter: alpha(opacity=10); display:none; } #log_window { BORDER-LEFT-WIDTH: 1px; CURSOR: default; FONT-SIZE: 9pt; HEIGHT: 200px; BORDER-RIGHT-WIDTH: 1px; WIDTH: 550px; BORDER-BOTTOM-WIDTH: 1px; POSITION: absolute; LEFT: 435px; Z-INDEX: 10002; TOP: 123px; BORDER-TOP-WIDTH: 1px; display:none; background-color:#ffffff; }</style> ``` ``` <div id="div_add"></div> <div id="log_window" style="width:550px;height:200px;top:123px;left:435px;"></div> ``` ``` <script> function shield(){ var html=''; html+='<input id="ipt_qty" value="" type= "text" />'; $('#log_window').html(html); } //下面是设置div可以拖动,现在不可以输入,屏蔽之后input可以输入 var o,X, Y; function getObject(obj, e) { o = obj; document.all ? o.setCapture() : window.captureEvents(Event.MOUSEMOVE); X = e.clientX - parseInt(o.style.left); Y = e.clientY - parseInt(o.style.top); } document.getElementById("log_window").onmousedown = function (e) { getObject(this, e || event); }; document.onmousemove = function (dis) { if (!o) { return; } if (!dis) { dis = event; } o.style.left = dis.clientX - X + "px"; o.style.top = dis.clientY - Y + "px"; }; document.onmouseup = function () { if (!o) { return; } document.all ? o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP) o = ''; }; </script> ``` 这个代码需要在IE下运行。这只是我的部分代码,还有很多代码感觉贴出来没有用。大概都是这样的。在网上找到一个方法,就是设置拖拽以后给input加一个焦点,这样是可以输入的,但是鼠标无论放在哪个位置拖动整个div都跟着拖动,还有按钮button的点击样式和经过样式都没有了,怎么写才可以像平时打开的网页一样只可以拖动标题那一栏啊。 还有input框用js写的onblur验证都没有触发。

使用-webkit-overflow-scrolling: touch;使iPhone6p隐藏滚动条失效

使用 ``` -webkit-overflow-scrolling: touch; ``` 会让苹果手机滑动更顺畅,但是苹果6p隐藏不了滚动条。 ``` .suiyi { width: 100%; margin: 0 auto 0 auto; background-color: #fff; border-radius: 0 0 5px 5px; padding: 14px 0; height: calc(100% - 104px); overflow: hidden; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .suiyi::-webkit-scrollbar { display: none; } ``` 我的解决方法很土:在做个固定在右边的div,遮住iPhone6p的滚动条; 请问各位大佬有什么解决方法吗?????

angularJS提取表格中的内容并alert出来

JS代码: var url = "https://testweixin.1jia2.cn/api/weixin/1jia2_online/script/weixin_order_list.php"; var app = angular.module("myApp", []); app.controller("customersCtrl", function ($scope, $http) { $http.get(url).success(function (data) { // 通过<br />分隔 data = data.split("<br />"); // 要显示的数据 var length = data.length - 1; var array = []; for (var i = 1; i < length; i++) { // result[1] result[2] result[3] result[4] result[5] result[6] result[7] result[8] // 订单号 ---------------日期------------------ --商品-- --详情-- 单价 个数 总价 详情 var result = data[i].match(/(.{32})\s+(\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2})\s+([\d\D]*)\s+([\d\D]*)\s+(\d+)\s+(\d+)\s+(\d+)\s+([\d\D]+)/); for (var j = 1; j < result.length; j++) { // 用户的信息 特殊处理 if (j == result.length - 1) { //无数据用户 if (result[j].length < 6) { result[j] = ""; } else { //有数据用户 result[j] = result[j].replace(/\\/g, ""); result[j] = result[j].substring(1, result[j].length - 3); var obj = angular.fromJson(result[j]); result[8] = obj; } } } array.push({ 'number': result[1], 'time': result[2], 'goods': result[3], 'details': result[4], 'price': result[5], 'amount': result[6], 'total': result[7], 'person': result[8] }); } $scope.customers = array; }); }); HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="angular.js"></script> <script src="newTable.js"></script> <title>数据页面</title> </head> <body class="all"> <div class="tab" ng-app="myApp" ng-controller="customersCtrl"> <table id="table"> <thead> <tr class="word"> <td>序号</td> <td>订单号</td> <td>购买时间</td> <td>购买商品</td> <td>商品详情</td> <td>单价</td> <td>个数</td> <td>总价</td> <td>个人信息</td> </tr> </thead> <tbody> <tr ng-repeat="customer in customers"> <td>{{ $index + 1 }}</td> <td>{{customer.number}}</td> <td>{{customer.time}}</td> <td>{{customer.goods}}</td> <td>{{customer.details}}</td> <td>{{customer.price}}</td> <td>{{customer.amount}}</td> <td>{{customer.total | number:2}}</td> <td>Name:{{customer.person.userName}}&nbsp;&nbsp;Mobile:{{customer.person.userMobile}} <button ng-click="show()">详情</button> </td> </tr> </tbody> <tr> <td id="sum" colspan="5">总计</td> <td></td> <td>总数:</td> <td>总价:</td> </tr> </table> </div> </body> </html> CSS代码: *{ margin: 0; padding: 0; } .all { position: relative; } .logo { width:165px; height: 135px; position: absolute; background-image: url("logo.png"); left: 250px; top:0px; z-index: 1; } .msg { position: absolute; font-family: "微软雅黑"; font-size: 50px; left:600px; top: 30px; } .tab { position: absolute; border: 1px solid red; background-color:#cccccc; width: 100%; height: 1000px; top:120px; z-index: 10; } #table { border:1px solid #000; position: absolute; margin: 40px auto; border-collapse:collapse; width:95%; left:60px; top: 30px; z-index: 2; } .tab td{ border:1px solid #000; } #number,#time,#id,#sum { text-align: center; } #price,#amount,#total,#no,#money{ text-align: right; } .word { font-family: "微软雅黑"; font-size: 18px; color:blue; text-align: center; } #tableTwo { /*border:1px solid #000;*/ border-collapse: collapse; width:100%; } 就是我点击详情的时候,能够alert出来当前的个人信息。用angularJS做。急急急啊,大神们,求指导~~~~

video标签自定义控制条全屏时控制条怎么放上去

video标签自定义控制条,全屏时控制条怎么放上去, 全屏时候控制条是不显示的, 把z-index设置成9999999999999可以放上去,但是觉得好像哪里不对啊, 而且放上去位置也不对啊,求救 ![图片说明](https://img-ask.csdn.net/upload/201708/12/1502507376_530704.png)

bootstrap 模态框弹出时被遮罩层挡住了,怎么解决

遮罩层样式!![图片说明](https://img-ask.csdn.net/upload/201606/01/1464768907_693581.png) 模态框样式![图片说明](https://img-ask.csdn.net/upload/201606/01/1464768918_376617.png)

关于一个Onclick切换样式的问题

想做个点击<li>切换图片的功能,现在碰到一个问题,原本设想的效果是点击一个<li>时背景色变为白色字体变为黑色,再次点击另外一个<li>时原先那个<li>再次变为默认颜色(黑色背景白色字体),但是试了很久都没达到效果。请各位帮忙看看,谢谢。 [code="javascript"]window.onload=function setImage(){ var number=document.getElementById("number"); var list=number.getElementsByTagName("li"); for (var i=0;i<list.length;i++){ list[i].flag=true; list[i].onclick=function(){ var img=document.getElementsByTagName("img"); for (var i=0;i<img.length;i++){ if(img[i].src.indexOf(this.lastChild.nodeValue)!=-1){ img[i].style.display=""; var h3=document.getElementsByTagName("h3")[0]; h3.lastChild.nodeValue=img[i].title; }else{ img[i].style.display="none"; } if(this.flag==true){ this.style.backgroundColor="#000"; this.style.color="#FFF"; this.flag=false; } if(this.flag==false){ this.style.backgroundColor="#FFF"; this.style.color="#000"; this.flag=true; } } } } }[/code] [code="css"]<style type="text/css"> *{ margin:0; padding:0; } #wrapper{ margin:10px; width:380px; height:230px; } ul#number{ position:absolute; left: 288px; top: 160px; } #number li{ float:left; margin-right:10px; border:1px solid #FFF; list-style:none; width:20px; height:20px; color:#fff; text-align:center; cursor:pointer; background:#000; color:#FFF; } #numbercolor{ background:#FFF; color:#000; } #title{ width:380px; height:50px; background:#000; opacity:0.55; filter: alpha(opacity=55); position:absolute; margin-top:180px; z-index: 999; } #wrapper h3{ font-size:14px; color:#FFF; position:absolute; margin-top:180px; line-height:50px; width:380px; height:50px; z-index:1000; text-align:center; } </style>[/code] [code="html"]<div id="wrapper"> <ul id="number"> <li>1</li> <li>2</li> <li>3</li> </ul> <h3>[资源] 测试测试测试</h3> <div id="title"></div> <img src="images/1.jpg" title="[资源] 测试测试测试" /> <img src="images/2.jpg" title="[资源] 测试测试测试" style="display:none;"/> <img src="images/3.jpg" title="[资源] 测试测试测试" style="display:none;"/> </div> [/code]

为啥这个下拉菜单点击外部以后还是不能恢复呢?

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>点击下拉菜单</title> </head> <style type="text/css"> ``` /* 记得代码分离 */ .header-dropbtn { /* 对按钮的样式进行总的设置 */ border: none; cursor: pointer; } .header-dropbtn:hover, .header-dropbtn:focus { /* 对按钮的点击时的,鼠标聚焦的样式设置 */ box-shadow: 0px 1px 10px 1px deepskyblue; } .header-dropdown { /* 对按钮盒子的样式设置,可以添加多个按钮 */ position: relative; display: inline-block; } .header-dropdown-content { display: none; /* 一定要用css进行隐藏 */ position: absolute; /* 相对于按钮大大的位置是绝对的 */ overflow: auto; z-index: 1; } .header-dropdown-content a { /* 对加入的链接的样式 */ text-decoration: none; display: block; // } .header-dropdown a:hover { /* 对下拉菜单中所有链接进行设置 */ } .show { /* 利用js对操作进行的修改 */ display: block; /* 点击恢复 */ } ``` </style> <body> ``` <div class="header-dropdown"> <button onclick="dropdown()" class="header-dropbtn">下拉菜单</button> <div id="header-dropdown" class="header-dropdown-content"> <a href="#">a</a> <a href="#">b</a> <a href="#">c</a> </div> </div> ``` <!-- 记得代码分离 --> <script type="text/javascript"> ``` function dropdown() { //切换 document.getElementById('header-dropdown').classList.toggle('show'); var el = document.getElementById('header-dropbtn'); //需要美化时候:点击增加新的样式 } var dropdowns = document.getElementsByClassName('header-dropdown-content'); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdown[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); }; }; document.querySelector('.header-dropbtn').addEventListener('click', function(e) { document.querySelector('.header-dropdown').classList.add('show'); e.stopPropagation(); //阻止冒泡 }, false); document.querySelector('.header-dropdown').addEventListener('click', function(e) { e.stopPropagation(); }, false); document.addEventListener('click', function() { document.querySelector('.header-dropdown').classList.remove('show'); }, false); ``` </script> </body> </html>

jsp中两个javascript,但是只能成功运行一个,单独都能正常运行。

一些css代码就省略了。两个js,单独都能正常使用,但是放在一起只有第二个js有反应,第一个没反映。 ``` <%@ page language="java" import="java.util.*,pojo.Consume,Dao.ConsumeDao" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>分类汇总</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="./css/doubleDate.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" language="javascript" src="./js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" language="javascript" src="./js/doubleDate2.0.js" ></script> <script> $(function(){ $('.doubledate').kuiDate({ className:'doubledate', isDisabled: "0" // isDisabled为可选参数,“0”表示今日之前不可选,“1”标志今日之前可选 }); }); </script> <script type="text/javascript" language="javascript" src="./js/jquery-1.10.2.js"></script> <script> function alertWin(Cno) { /* $.ajax({ type:"post", url:"./ShowDetail", data:{Cno:Cno}, success:function(data){ alert("success"); } }); */ var msgw,msgh,titleheight,bordercolor,titlecolor; msgw = 300;//提示窗口的宽度 msgh = 300;//提示窗口的高度 titleheight = 25 //提示窗口标题高度 bordercolor = "#A480B2";//提示窗口的边框颜色 titlecolor = "#A480B2";//提示窗口的标题颜色 //根据自己需求注意宽度和高度的调整 var iWidth = document.documentElement. clientWidth; var iHeight = document.documentElement.clientHeight; //遮罩层 var bgObj = document.createElement("div"); bgObj.setAttribute("id", "bgObj");//设置ID bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;"; document.body.appendChild(bgObj); //弹出窗口 var msgObj=document.createElement("div"); msgObj.setAttribute("id", "msgDiv");//可以用bgObj.id="msgDiv"的方法,是为div指定属性值 msgObj.setAttribute("align", "center");//为div的align赋值 msgObj.style.background = "white";//背景颜色为白色 msgObj.style.border = "1px solid " + bordercolor;//边框属性,颜色在上面已经赋值 msgObj.style.position = "absolute";//绝对定位 msgObj.style.left = (iWidth-msgw)/2 ;//从左侧开始位置 msgObj.style.top = (iHeight-msgh)/2;//从上部开始位置 msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性 msgObj.style.width = msgw + "px";//提示框的宽(上面定义过) msgObj.style.height = msgh + "px";//提示框的高(上面定义过) msgObj.style.textAlign = "center";//文本位置属性,居中。 msgObj.style.lineHeight = "25px";//行间距 msgObj.style.zIndex = "102";//层的z轴位置 document.body.appendChild(msgObj); //弹出窗口标题 var title = document.createElement("div");//创建一个标题对象 title.setAttribute("id", "msgTitle");//为标题对象填加id title.style.margin = "0";//浮动 title.style.padding = "3px";//浮动 title.style.background = titlecolor;//背景颜色 title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; title.style.opacity = "0.75";//透明 //title.style.border="1px solid " + bordercolor;//边框 title.style.height = "25px";//高度 title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性 //title.style.color = "red";//文字颜色 title.style.cursor = "move";//鼠标样式 $.ajax({ type:"post", url:"ShowDetail?Cno="+Cno, dataType:"json", success:function(data){ },error:function(){ alert("请求出错"); }}); title.innerHTML="<table border='0' width='100%'><tr><td align='center'>收银小票单</td><td align=\"right\"><a href='#' onclick='closeDiv()'>关闭</a></td></tr><tr><td align='center'>时间:</td></tr><tr><td align='left'>三得利青柠水</td></tr></table>"; msgObj.appendChild(title);//在提示框中增加标题 } //添加关闭功能 function closeDiv() { var msgTitelObject = document.getElementById("msgDiv"); document.body.removeChild(msgTitelObject); var bgObj = document.getElementById("bgObj"); document.body.removeChild(bgObj); } </script> </head> <body> <ul class="iptgroup"> <li>开始日期:</li> <li><input type="text" readonly="readonly" class="doubledate ipticon"/></li> <li style="width:20px;"></li> <li>结束日期:</li> <li><input type="text" readonly="readonly" class="doubledate ipticon"/></li> </ul> <form action="FF" method="get" name="myform" id="myform"> <div class="upleft"><img src="image/tu4.gif" width="130" height="130" border="0" /></div> <div class="upright"><br><br><br><center><font face="楷体"color="#000000" size=5><strong>您的消费账单:</strong></font></center></div> <div class="center"> ……………………………………………………………………………… </table> </div> </form> </body> </html> ```

如何解决下拉菜单被遮罩(flex布局,bootstrap导航栏组件)大神救救我

## 下拉菜单被遮罩(flex布局,bootstrap导航栏组件)如何解决 ### 尝试过设置z-index 没解决 ![图片说明](https://img-ask.csdn.net/upload/201904/20/1555771736_501325.png) ### test.html ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--保证缩放--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <!-- 引入bootstrap--> <link rel="stylesheet" type="text/css" href="bootstrap/3.3.7/css/bootstrap.min.css" /> <script type="text/javascript" src="bootstrap/3.3.7/js/jquery-3.3.1.min.js"></script> <script src="bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- 引入自定义样式 --> <link rel="stylesheet" href="css/test.css"> <!-- 添加网站图标 --> <link rel="icon" href="img/water.ico" type="image/x-icon" /> <link rel="shortcut icon" href="img/water.ico" type="image/x-icon" /> <title>ouc-污水分析-about</title> </head> <body class="bg-img"> <!-- Static navbar --> <nav class="zmost navbar navbar-inverse navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">ouc-污水分析</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li> <a href="index.html">Home</a> </li> <li class="active"> <a href="about.html">About</a> </li> <li> <a href="contact.html">Contact</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User<span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li class="dropdown-header">Nav header</li> <li> <a href="#">Separated link</a> </li> <li> <a href="#">One more separated link</a> </li> </ul> </li> </ul> </div> </div> </nav> <!-- About info --> <div class="container about zless"> <h1 class="about-title flex-center-block">网站声明</h1> <p class="about-content flex-center-block"> 污水处理按照其作用可分为物理法、生物法和化学法三种。 ①物理法:主要利用物理作用分离污水中的非溶解性物质,在处理过程中不改变化学性质。常用的有重力分离、离心分离、反渗透、气浮等。物理法处理构筑物较简单、经济,用于村镇水体容量大、自净能力强、污水处理程度要求不高的情况。 ②生物法:利用微生物的新陈代谢功能,将污水中呈溶解或胶体状态的有机物分解氧化为稳定的无机物质,使污水得到净化。常用的有活性污泥法和生物膜法。生物法处理程度比物理法要高。 ③化学法:是利用化学反应作用来处理或回收污水的溶解物质或胶体物质的方法,多用于工业废水。常用的有混凝法、中和法、氧化还原法、离子交换法等。化学处理法处理效果好、费用高,多用作生化处理后的出水,作进一步的处理,提高出水水质。 </p> </div> <!-- footer --> <div class="footer">@Copyright-中国海洋大学</div> </body> </html> ``` ### test.css ``` bg-img { background-image: url(../img/bg.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: 100%; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; } body { display: flex; flex-direction: column; justify-content: space-between; height: calc(100vh); min-width: 380px; min-height: 680px; } .footer { height: 50px; width: 100%; background-color: #222; text-align: center; color: rgb(157, 157, 157); font-family: Arial; font-size: large; letter-spacing: 1px; line-height: 50px; } flex-header { /*background-color: lightblue;*/ } .flex-container{ /*background-color: lightgreen;*/ } .flex-footer { /*background-color: lightblue;*/ } .flex-center { display: flex; flex-direction: column; align-items: center; justify-content: center; } .flex-center-block { padding-right: 15px; padding-top: 15px; display: flex; align-items: center; justify-content: center; } .about{ padding-bottom: 15%; } .about-title { letter-spacing: 0.5em; font-family: "宋体"; font-weight: bold; } .about-content { font-size: large; padding: 0% 10%; line-height: 3em; letter-spacing: 0.1em; text-indent: 5% } ```

javaScript中返回true和false的问题,求大神解答!!

``` <%-- Created by IntelliJ IDEA. User: TopbeCoder5 Date: 2015/1/18 Time: 20:44 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>测试alertMsg</title> <link href="css/alertMsg.css" rel="stylesheet" type="text/css"/> <script type="text/javascript"> function alertMsg(msg, mode) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮 msg = msg || ''; mode = mode || 0; var top = document.body.scrollTop || document.documentElement.scrollTop; var isIe = (document.all) ? true : false; var isIE6 = isIe && !window.XMLHttpRequest; var sTop = document.documentElement.scrollTop || document.body.scrollTop; var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var winSize = function () { var xScroll, yScroll, windowWidth, windowHeight, pageWidth, pageHeight; // innerHeight获取的是可视窗口的高度,IE不支持此属性 if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if (yScroll < windowHeight) { pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if (xScroll < windowWidth) { pageWidth = windowWidth; } else { pageWidth = xScroll; } return { 'pageWidth': pageWidth, 'pageHeight': pageHeight, 'windowWidth': windowWidth, 'windowHeight': windowHeight } }(); //alert(winSize.pageWidth); //遮罩层 var styleStr = 'top:0;left:0;position:absolute;z-index:10000;background:#666;width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;'; styleStr += (isIe) ? "filter:alpha(opacity=80);" : "opacity:0.8;"; //遮罩层DIV var shadowDiv = document.createElement('div'); //添加阴影DIV shadowDiv.style.cssText = styleStr; //添加样式 shadowDiv.id = "shadowDiv"; //如果是IE6则创建IFRAME遮罩SELECT if (isIE6) { var maskIframe = document.createElement('iframe'); maskIframe.style.cssText = 'width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;position:absolute;visibility:inherit;z-index:-1;filter:alpha(opacity=0);'; maskIframe.frameborder = 0; maskIframe.src = "about:blank"; shadowDiv.appendChild(maskIframe); } document.body.insertBefore(shadowDiv, document.body.firstChild); //遮罩层加入文档 //弹出框 var styleStr1 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 125) + 'px;top:' + (winSize.windowHeight / 2 - 70) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150) + 'px;'; //弹出框的位置 var alertBox = document.createElement('div'); var alertTitle = document.createElement('div'); alertTitle.id = 'alertTitle'; alertBox.id = 'alertMsg'; alertBox.style.cssText = styleStr1; //创建弹出框里面的内容P标签 var alertMsg_info = document.createElement('P'); alertMsg_info.id = 'alertMsg_info'; alertMsg_info.innerHTML = msg; alertTitle.innerHTML = '提示信息!'; alertBox.appendChild(alertTitle); alertBox.appendChild(alertMsg_info); //创建按钮 var styleStr2 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 125) + 'px;top:' + (winSize.windowHeight / 2 + 40) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150) + 'px;'; //弹出框的位置 var alertBottom = document.createElement('div'); alertBottom.id = 'alertBottom'; alertBottom.style.cssText = styleStr2; if (mode === 1) { var btn1 = document.createElement('a'); btn1.id = 'alertMsg_btn1'; btn1.href = 'javas' + 'cript:void(0)'; btn1.innerHTML = '<cite>确定</cite>'; btn1.onclick = function () { document.body.removeChild(alertBox); document.body.removeChild(shadowDiv); document.body.removeChild(alertBottom); //document.getElementById("logout").click(); return true; }; alertBottom.appendChild(btn1); var btn2 = document.createElement('a'); btn2.id = 'alertMsg_btn2'; btn2.href = 'javas' + 'cript:void(0)'; btn2.innerHTML = '<cite>取消</cite>'; btn2.onclick = function () { document.body.removeChild(alertBox); document.body.removeChild(shadowDiv); document.body.removeChild(alertBottom); return false; }; } else { var btn2 = document.createElement('a'); btn2.id = 'alertMsg_btn2'; btn2.href = 'javas' + 'cript:void(0)'; btn2.innerHTML = '<cite>确定</cite>'; btn2.onclick = function () { document.body.removeChild(alertBox); document.body.removeChild(shadowDiv); document.body.removeChild(alertBottom); return false; }; } alertBottom.appendChild(btn2); document.body.appendChild(alertBox); document.body.appendChild(alertBottom); } function confirmMsg() { if (alertMsg("测试", 1)) { alert("点击了确定"); } else { alert("点击了取消"); } } </script> </head> <body> <input type="button" value="Test the alert" onclick="return confirmMsg('test confirm');"> </body> </html> ``` 为什么一点botton就直接运行了false啊??

vue-router实现跳转,提示Cannot read property 'push' of undefined

前端小白,最近尝试着学学前端vue,前端基于vue+elementUI开发,本意想实现页面跳转来着的<a href="html/login/register.html">注册</a>通过这样的外部连接肯定是没啥问题的,但是想通过vue-router,调试老报错,麻爪有点弄不懂,有大大指点下么 ![图片说明](https://img-ask.csdn.net/upload/202005/13/1589360059_35522.jpg) ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="/css/element.css"> <script src="/js/vue.min.js"></script> <script src="/js/element.js"></script> <script src="/js/axios.min.js"></script> <script src="/js/vue-router.js"></script> <!--背景样式--> <style> #imgGround { height: 100%; width: 100%; background: url('image/login_ground.jpg') no-repeat; background-size: cover; overflow: hidden; left:0px; top:0px; position:fixed; z-index:-100; } </style> <style> .el-row { margin-bottom: 20px; } .el-row:last-child { margin-bottom: 0; } .login-box { margin-top:20%; margin-left:40%; } </style> </head> <body> <!--背景--> <div id="imgGround"></div> <div class="login-box" id="app" > <el-row> <el-col :span="8"> <el-input autofocus id="name" v-model="name" placeholder="请输入帐号" @keyup.enter.native="tab(event,'username')"> <template slot="prepend">帐号</template> </el-input> </el-col> </el-row> <el-row> <el-col :span="8"> <el-input id="password" v-model="password" type="password" placeholder="请输入密码" @keyup.enter.native="check"> <template slot="prepend">密码</template> </el-input> </el-col> </el-row> <el-row> <el-col :span="8"> <el-button @click="check" style="width:100%" type="primary">登录</el-button> </el-col> </el-row> <!-- <el-row><a href="html/login/register.html">注册</a></el-row>--> <el-row> <el-button-group :span="8"> <el-button @click="forgotPassword" type="primary" icon="el-icon-s-help">忘记密码</el-button> <el-button type="primary" icon="el-icon-s-help">忘记账户</el-button> <el-button type="primary" icon="el-icon-user-solid">注册</el-button> </el-button-group> </el-row> </div> </body> <script type="text/javascript"> new Vue({ el : '#app', data : { name : '', password : '' }, methods : { check : function(event){ //获取值 var name = this.name; var password = this.password; if(name == '' || password == ''){ this.$message({ message : '账号或密码为空!', type : 'error' }) return; } axios .post('/login',{"name":name,"password":password}) .then(response => { var info = response.data.split('_'); var code = info[0]; var message = info[1]; if(code==200 || code==201){ this.$message({ message : message, type : 'success' }) //普通跳转 if (code==201){ //超管跳转 } }else{ //其他 this.$message({ message : message, type : 'error' }) } }) .catch(function (error) { // 请求失败处理 console.log(error); }); }, forgotPassword: function (event){ return this.$router.push('login'); } } }) //换行焦点时间 function tab(event,btn){ if(btn=="username" && event.keyCode==13){ this.password.focus(); } } </script> </html> ```

如果选中复选框,由id选择,如何更改背景颜色

<div class="post-text" itemprop="text"> <p>When a particular checkbox is selected I am trying to change its color. I tried doing this solely by making use of CSS, however this will result in the changing of colors for all <code>&lt;div&gt;</code> elements.</p> <p>Most of the CSS I used is from Material Design. I tried to add my own custom class:</p> <p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#wrong').change(function() { if (this.checked) { $('.check').addClass('red'); } else { $('.check').removeClass('red'); } }); $('#wrong').change(function() { if ($(this).is(":checked")) { $('.check').addClass('red'); } else { $('.check').removeClass('red'); } });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.form-check .form-check-sign .check { position: relative; display: inline-block; width: 20px; height: 20px; border: 1px solid rgba(0, 0, 0, .54); overflow: hidden; z-index: 1; border-radius: 3px; } .form-check .form-check-sign .check:before { position: absolute; content: ""; transform: rotate(45deg); display: block; margin-top: -3px; margin-left: 7px; width: 0; color: #fff; height: 0; box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset; animation: checkboxOff 0.3s forwards; } .form-check .form-check-input:focus+.form-check-sign .check:after { opacity: 0.2; } .form-check .form-check-input:checked+.form-check-sign .check { background: #00BCD4; } .form-check .form-check-input:checked+.form-check-sign .check .red { background: #FF0000; } .red { background: #FF0000; opacity: 0.5; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div class="form-check"&gt; &lt;label class="form-check-label"&gt; &lt;input class="form-check-input" type="checkbox" id="wrong" name="wrong" disabled value="1"'.$checkederr.'&gt; &lt;span class="form-check-sign"&gt; &lt;span class="check"&gt;&lt;/span&gt; &lt;/span&gt; &lt;/label&gt; &lt;/div&gt;</code></pre> </div> </div> <p>Somehow all checkboxes and <code>&lt;span&gt;</code> elements (containing the <code>.chek</code> class) are selected in red.</p> <p>The code php for '.$checkederr.' is:</p> <pre><code>while($row == $querydoc -&gt; fetch(PDO::FETCH_ASSOC)) { ... if($row['errato'] == 1) $checkederr="checked"; else $checkederr=""; } </code></pre> <p>Adding a class in a given <code>&lt;span&gt;</code> tag like "check red" only allows for the opposite that I want.</p> </div>

element.style 这个样式要怎么去掉

![图片说明](https://img-ask.csdn.net/upload/201709/01/1504227089_539815.png) 导致我整个网站的字体大小全是72px; 我根本没有设置过72px这个值

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

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

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

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

搜狗输入法也在挑战国人的智商!

故事总是一个接着一个到来...上周写完《鲁大师已经彻底沦为一款垃圾流氓软件!》这篇文章之后,鲁大师的市场工作人员就找到了我,希望把这篇文章删除掉。经过一番沟通我先把这篇文章从公号中删除了...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

2020阿里全球数学大赛:3万名高手、4道题、2天2夜未交卷

阿里巴巴全球数学竞赛( Alibaba Global Mathematics Competition)由马云发起,由中国科学技术协会、阿里巴巴基金会、阿里巴巴达摩院共同举办。大赛不设报名门槛,全世界爱好数学的人都可参与,不论是否出身数学专业、是否投身数学研究。 2020年阿里巴巴达摩院邀请北京大学、剑桥大学、浙江大学等高校的顶尖数学教师组建了出题组。中科院院士、美国艺术与科学院院士、北京国际数学...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

程序员为什么千万不要瞎努力?

本文作者用对比非常鲜明的两个开发团队的故事,讲解了敏捷开发之道 —— 如果你的团队缺乏统一标准的环境,那么即使勤劳努力,不仅会极其耗时而且成果甚微,使用...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《Oracle Java SE编程自学与面试指南》最佳学习路线图2020年最新版(进大厂必备)

正确选择比瞎努力更重要!

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

正确选择比瞎努力更重要!

都前后端分离了,咱就别做页面跳转了!统统 JSON 交互

文章目录1. 无状态登录1.1 什么是有状态1.2 什么是无状态1.3 如何实现无状态1.4 各自优缺点2. 登录交互2.1 前后端分离的数据交互2.2 登录成功2.3 登录失败3. 未认证处理方案4. 注销登录 这是本系列的第四篇,有小伙伴找不到之前文章,松哥给大家列一个索引出来: 挖一个大坑,Spring Security 开搞! 松哥手把手带你入门 Spring Security,别再问密...

字节跳动面试官竟然问了我JDBC?

轻松等回家通知

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

阿里面试官让我用Zk(Zookeeper)实现分布式锁

他可能没想到,我当场手写出来了

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

代码注释如此沙雕,会玩还是你们程序员!

某站后端代码被“开源”,同时刷遍全网的,还有代码里的那些神注释。 我们这才知道,原来程序员个个都是段子手;这么多年来,我们也走过了他们的无数套路… 首先,产品经理,是永远永远吐槽不完的!网友的评论也非常扎心,说看这些代码就像在阅读程序员的日记,每一页都写满了对产品经理的恨。 然后,也要发出直击灵魂的质问:你是尊贵的付费大会员吗? 这不禁让人想起之前某音乐app的穷逼Vip,果然,穷逼在哪里都是...

立即提问
相关内容推荐