js如何监听css的属性?

仿做了下爱淘宝刚进页面的顶部广告提示,我的思路是这样的,下面上滑的页面我用css的动画属性写,然后当页面上滑到指定的位置后(指定的top值),顶部会出现一栏新的广告,那么现在问题来了,js里如何动态监听css的属性,求各位大神帮帮忙,源代码在下面:

<!doctype html>



content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Document *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } .box{ width:100%; background-color:skyblue; } .box img.img1{ display:block; margin:0 auto; background:green } .box img.img2{ position:absolute; top:0; left:164px; display:none; } .layout{ width:100%; height:800px; background-color:pink; position:absolute; top:460px; animation:run 2s ease-in 1 forwards 1s; } @keyframes run{ 0%{ top:460px; } 100%{ top:90px; } }


falsefalse
window.onload=function() { var layout = document.querySelector(".layout"); var img = document.querySelector(".box .img2"); console.log(layout.offsetTop); if (layout.offsetTop === 90) { //js如何监听css属性的变化 img.style.display = "block"; } }


1个回答

js有个滚轮事件,用这个写不用这么麻烦

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

浏览器缩放监听,就是鼠标滚轮那种缩放。

如何监听浏览器是否被缩放(就是Ctrl+滚轮 或者 Ctrl+‘+’、‘-’ 这种缩放 不是直接调整浏览器边框那种缩放) 跪求解决方案

利用arcgis api for javascript实现在地图上点的弹出(我的信息弹出不了)

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Simple Map</title> <link rel="stylesheet" href="http://192.168.1.187:8080/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } body { background-color: #FFF; overflow: hidden; font-family: "Trebuchet MS"; } </style> <script type="text/javascript" src="http://192.168.1.187:8080/arcgis_js_api/library/3.9/3.9/init.js"></script> <script> var map, graphic1, pointlayer, myPoint1; require([ "dojo/dom", "dojo/_base/array", "dojo/promise/all", "dojo/json", "esri/map", "esri/domUtils", "esri/graphic", "esri/graphicsUtils", "esri/geometry/Polygon", "esri/tasks/GeometryService", "esri/geometry/Point", "esri/tasks/Geoprocessor", "esri/tasks/FeatureSet", "esri/tasks/RelationParameters", "esri/symbols/PictureMarkerSymbol", "esri/Color", "esri/symbols/SimpleLineSymbol", "esri/SpatialReference", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/layers/GraphicsLayer", "esri/geometry/Extent", "esri/InfoTemplate", "dojo/domReady!" ], function (dom, array, all, JSON, Map, domUtils, Graphic, graphicsUtils, Polygon, GeometryService, Point, Geoprocessor, FeatureSet, RelationParameters, PictureMarkerSymbol, Color, SimpleLineSymbol, SpatialReference, SimpleMarkerSymbol, SimpleFillSymbol, GraphicsLayer, InfoTemplate ) { map = new Map("map", { basemap: "topo", center: [113.33, 36.33], zoom: 13 }); pointlayer = new GraphicsLayer(); map.addLayer(pointlayer); var attributes = { "省份": "安徽", "录取率": 43.04, "未录取率": 56.96 }; myPoint1 = esri.geometry.geographicToWebMercator(new esri.geometry.Point ( { "x": 113.33, "y": 36.33, "spatialReference": { "wkid": 4326 } })); var symbol = new esri.symbol.PictureMarkerSymbol('image/chaoren.png', 20, 20); var infoTemplate = new InfoTemplate("标题${省份}", "${省份}的录取率为${录取率},未录取率为${未录取率}"); graphic1 = new esri.Graphic(myPoint1, symbol, attributes, infoTemplate); pointlayer.add(graphic1); }); </script> </head> <body> <div id="map"></div> </body> </html>

求教:关于Vue的v.show属性在隐藏列表项方面的两个问题。

``` 想要实现的功能: 1. 按add按钮添加列表项。 2. 按del按钮永久隐藏对应列表项。 程序如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue test</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-show="task.show" v-for="(item,index) in list"> <span>{{item.content}}</span> <button v-on:click="del(index)">del</button> </div> <button v-on:click="add">add</button> </div> <script> var vm = new Vue ({ el: "#app", data: { task: { content: "", show: true }, list: [], }, methods: { del:function(index) { this.list[index].show = !this.list[index].show; }, add:function() { this.task = { content: "new", show: true }; this.list.push(this.task); } } }); </script> </body> </html> 出现的问题: 1. 按add按钮增加了3个列表项后,对第二个列表项按del按钮,仅会修改show的内容为false,但并不隐藏。 2. 按add按钮增加了n个列表项后,只有第n个del按钮能隐藏列表项,而且是隐藏所有列表项。 想要请教各位前辈,问题出在哪里?谢谢 ```

jsp中 表单提交 onsubmit 掉js中的方法不生效

代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>register</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript"> function _check(){ var name=document.getElementById("name").value; var pass=document.getElementById("pass").value; if (name=="" && name==null) { alert("用户名不能为空"); return false; }else if (pass=="" && pass==null) { alert("密码不能为空"); return false; } return true; } </script> </head> <body> ${ msg } <% session.setAttribute("msg", ""); %> <form action="${ pageContext.request.contextPath }/loginDo.do" onsubmit="return _check();" method="post" > <table align="center" border="" cellspacing="0" width="45%"> <tr> <th colspan="2" align="center"><h2>登录</h2></th> </tr> <tr> <td bgcolor="grey" width="50%">用户名:</td> <td><input type="text" name="username" id="name"/></td> </tr> <tr> <td bgcolor="grey">密码:</td> <td><input type="password" name="password" id="pass"/></td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="登录"> </td> </tr> </table> </form> </body> </html> 以前也是这样写的可以这次怎么也不调用方法

用ajax方法在请求数据后在写了一些HTML,但是样式却丢失了

* 这是静态页面的效果图 ![静态页面效果](https://img-ask.csdn.net/upload/201704/21/1492772621_21213.png) 这是这一部分的HTML,只截取了两个商品的 ``` <div class="maincontent-area"> <div class="zigzag-bottom"></div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="latest-product"> <h2 class="section-title">Latest Products</h2> <div class="product-carousel" **id="content2"**> <div class="single-product"> <div class="product-f-image"> <img src="img/product-1.jpg" alt=""> <div class="product-hover"> <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a> <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a> </div> </div> <h2><a href="single-product.html">Samsung Galaxy s5- 2015</a></h2> <div class="product-carousel-price"> <ins>$700.00</ins> <del>$100.00</del> </div> </div> <div class="single-product"> <div class="product-f-image"> <img src="img/product-2.jpg" alt=""> <div class="product-hover"> <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a> <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a> </div> </div> <h2>Nokia Lumia 1320</h2> <div class="product-carousel-price"> <ins>$899.00</ins> <del>$999.00</del> </div> </div> <div class="single-product"> <div class="product-f-image"> <img src="img/product-3.jpg" alt=""> <div class="product-hover"> <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a> <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a> </div> </div> <h2>LG Leon 2015</h2> <div class="product-carousel-price"> <ins>$400.00</ins> <del>$425.00</del> </div> </div> ``` 我在上面定义了ID然后用ajax 写了拼的字符串,写的HTML,但是样式却加载不进去,却成了这样字的![图片说明](https://img-ask.csdn.net/upload/201704/21/1492773304_327866.png) 我的js代码如下 ``` function init_newProd(){ $.ajax({ type:"post", url:"/struts2/petShop/home/newProduct.action", dataType:"json", success:function(data){ var d = eval("("+data+")");//这里需要进行json处理,将json字符串转换为json格式; display_newProd(d); } }); } function display_newProd(data){ var newProd = data.newProd; var newProd_l = newProd.length; var content = $("#content2"); var str= ""; for(var i=0;i<newProd_l;i++){ str = str+"<div class='single-product'>" + "<div class='product-f-image'>"+ "<img style='height:270px' src='/struts2/common/img/"+newProd[i].pet_pic+"'>"+ " <div class='product-hover'>"+ " <a href='"+newProd[i].pet_id+"' class='add-to-cart-link'><i class='fa fa-shopping-cart'></i> Add to cart</a>"+ " <a href='/struts2/petShop/detail/detail.action?petId="+newProd[i].pet_id+"' class='view-details-link'><i class='fa fa-link'></i> See details</a>"+ "</div></div>"+ "<h2><a href='single-product.html'>"+newProd[i].pet_name+"</a></h2>"+ " <div class='product-carousel-price'>"+ "<ins>$700.00</ins> <del>$"+newProd[i].pet_price+"</del>"+ "</div></div>"; } content.append(str); } ``` 请问各位大神,到底是上面情况,导致样式改变,静态页面需要的css,js我全部引入,并且顺序呢我没有更改 用到的js插件有这些 <script src="/struts2/common/js/bootstrap.min.js"></script> <!-- jQuery sticky menu --> <script src="/struts2/common/js/owl.carousel.min.js"></script> <script src="/struts2/common/js/jquery.sticky.js"></script> <!-- jQuery easing --> <script src="/struts2/common/js/jquery.easing.1.3.min.js"></script> <!-- Main Script --> <script src="/struts2/common/js/main.js"></script> <!-- Slider --> <script src="/struts2/common/js/bxslider.min.js"></script> <script src="/struts2/common/js/script.slider.js"></script>

怎么让过渡属性和透明度的属性在打开网和滚动鼠标的时候产生效果

![图片说明](https://img-ask.csdn.net/upload/201906/14/1560483883_567730.png)请问如何让这个过渡属性的动画在打开网页时自动生效, ![图片说明](https://img-ask.csdn.net/upload/201906/14/1560483943_292919.png)请问如何让这个过渡属性的动画在打开网页时自动生效, ![图片说明](https://img-ask.csdn.net/upload/201906/17/1560732087_930700.png) 滚动到一定位置怎样让它的动画自动产生

Selenium 定位动态元素

![图片说明](https://img-ask.csdn.net/upload/201907/17/1563336813_752418.gif) 问题说明: 我想定位登录按钮的这个元素,点击 现在的情况: 目前,我是可以通过css定位到该元素的,但是click没用,这个元素是动态的,只有鼠标指针移上去之后,ClassName的属性才会变化. 我尝试过使用ActionChains的move_to_element方法将鼠标悬停和ActionChains的double_click都没有用. 目前这个页面是没有Jquery的,也不能调用这个元素的事件监听. 请大神支个招,不胜感激!

option标签可以设置事件吗?(附demo)

``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> </head> <body> <button id="thisBtn">thisBtn</button> <input id="thisInput" list="thisList"> <datalist id="thisList"> <option id="opt1">opt1</option> <option>opt2</option> <option>opt3</option> <option>opt4</option> </datalist> <script type="text/javascript"> $().ready(function(){ console.log("文档读取完毕"); $("#opt1").click(function(){ alert(1); }); }); </script> </body> </html> ```

使用Vue.extend动态创建的组件,怎么使用v-model接出值?

使用Vue.extend动态创建的组件,怎么在组件上设置v-model接出值,并监听

关于元素距离页面顶部距离的问题

大家好~ 为什么我在页面加载完后的元素距页面顶部距离,和我给页面添加滚动事件中找该元素距页面顶部距离会不一样呢?(当页面滚动为0时) 加载后的距离为839,添加上滚动事件后的距离为38(当页面滚动为0时)。 我怀疑添加上滚动事件后的距离不是距页面顶部,而是距父元素的距离。 但是使用的都是offset.top()方法啊,下边是我的代码,请大神帮我看下,谢谢! ![图片说明](https://img-ask.csdn.net/upload/201702/27/1488206653_502511.jpg)

通过querySelector获取并修改div中class的值

这个程序就是在页面中显示要播放的多媒体文件,同时显示多媒体文件的总时间,当单击播放按钮时,将显示当前播放了的时间。但是缺了一部分代码,有关通过querySelector获取并修改div中class的值的代码。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>媒体播放示例</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="布尔教育 http://www.itbool.com" /> <script> wrapper=document.querySelector('.videochrome'), buffer=document.querySelector('.videochrome.controls.buffer'), playhead=buffer.querySelector('.playhead'), play=wrapper.querySelector('.play'), duration=wrapper.querySelector('.duration'), currentTime=playhead.querySelector('span'); video.addEventListener('loadeddata',canplay,false);//使用事件监听准备播放 function canplay()//调用canplay函数初始化媒体 { initControls(); } function initControls() { duration.innerHTML=asTime(video.duration);//将播放时间以分秒的形式显示 play.onclick=function() { if(video.ended)//如果媒体播放结束,播放时间从0开始 { video.currentTime=0; } video[video.paused?'play':'pause']();//通过三元运算执行播放或暂停 }; } function asTime(t) { t=Math.round(t);//通过Math.round函数对获取到的时间取整 var s=t%60;//转化为分 var m=~(t/60); return m+':'+two(s);//以分:秒的形式输出时间 } function two(s) { s+=""; if (s.length<2)s="0"+s;//对秒数的位数进行判断,位数小于2时以0补位 return s; } video.addEventListener('play',playEvent,false);//使用事件播放 video.addEventListener('pause',pausedEvent,false);//播放暂停 video.addEventListener('ended',function()//播放结束后停止播放 { this.pause();//显示暂停播放 },false); function playEvent() { play.innerHTML='暂停'; } function pausedEvent() { play.innerHTML='播放'; } video.addEventListener('durationchange',updataSeekable,false);//播放的时长被改变 video.addEventListener('timeupdate',updatePlayhead,false);//使用事件监听方式捕捉事件 function updateSeekable() { duration.innerHTML=asTime(video.duration);//媒体文件的总播放时间 } function updatePlayhead() { currentTime.innerHTML=asTime(video.currentTime);//媒体的当前播放时间 } </script> </head> <body> <video src="../video/01.mp4"></video> <div class="videochrome paused"> <div class="controls"> <div class="scrub"> <table width="150" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="50" scope="row"> <button class="play" title="play">播放</button> </td> <td width="50" align="center"> <div class="duration">0:00</div> </td> <td width="50" align="center"> <div class="loaded"> <div class="buffer"> <div class="playhead"> <span>0:00</span> </div> </div> </div> </td> </tr> </table> </div> </div> </div> </body> </html>

style.top 在变为什么 对应元素位置可以不变?

``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <title>Document</title> <!-- <script src="./demo/jquery.min.js"></script> --> </head> <style lang=""> *{ margin: 0; padding: 0; } body{ /*height: 1000px;*/ /*position: relative;*/ /*margin:0px; padding:0px;*/ } .point { position: absolute; border: 5px solid red; } .ball{ width:4px; height:4px; /*background: #d9fe37;*/ background: red; border-radius: 50%; position: absolute; } #sketchPad{ /*width: 400px; height: 400px;*/ /*left: 100px; top: 100px;*/ /*background-color: #ff0; overflow: auto;*/ /*position: relative;*/ } .small{ position: relative; height: 300px; overflow: auto; } .small img{ height: 300px; } #selectImage{ left: 200px; top: 500px; position: absolute; } .box{ width: 300px; height: 300px; margin: 100px; border: 1px solid #ccc; position: relative; /*overflow: auto;*/ } .big{ width: 600px; height: 600px; position: absolute; top: 0; left: 560px; border: 1px solid #ccc; overflow: auto; /*display: none;*/ display: block; background-color: #eee; } .big::-webkit-scrollbar{ display: none; } .mask{ width: 50px; height: 50px; background: rgba(255,255,0,0.4); position: absolute; top: 0; left: 0; /*鼠标的样式*/ cursor: crosshair; display: none; } .big img{ position: absolute; height: 3600px; /*box.height*big.width/mask.width */ top: 0; left: 0; } .aim{ position: absolute; top: 50%; left: 50%; width: 20px; margin-left: -10px; height: 20px; margin-top: -10px; display: block; /*z-index: 8*/ } .aim__ver{ position: absolute; top: 50%; left: 50%; width: 2px; height: 40px; margin-top: -20px; margin-left: -1px; background-color: #f00; } .aim__hor{ position: absolute; top: 50%; left: 50%; width: 40px; height: 2px; margin-top: -1px; margin-left: -20px; background-color: #f00; } </style> <body> <div class="box" id="fdj"> <div id="sketchPad" class="small"> <img id='imageID' name='imageID' src=" " alt=""> <div class="mask"></div> </div> <div class="big"> <img id='imageIDBig' name='imageID' src=" "/> <div class="aim"> <div class="aim__ver"></div> <div class="aim__hor"></div> </div> </div> </div> <div id="selectImage"> <form name="form" id="form" method="post" enctype="multipart/form-data" style="display: block;padding:2px;overflow: hidden;" > <input type="file" name="upload" id="upload" style="display: none;" onchange="document.form.path.value=this.value;selectImage(this)" multiple="multiple" accept=".PNG,.JPG,.GIF,.BMP" /> <input name="path" id="path" readonly style="display: block;float:left;margin-left:120px;height:24px"> <input type="button" value="请点击上传需要进行测量的图片" onclick="document.form.upload.click();" style="display: block;float:left;margin-left:10px;height:30px"> </form> </div> <button id="myBtn">创建连线</button> </body> <script> document.getElementById("myBtn").onclick = function(event) { document.getElementById("sketchPad").style.cursor="crosshair"; document.getElementById("sketchPad").addEventListener("click", createLine, false); event.stopPropagation(); // 阻止冒泡 }; // 1. 获取外面的父级盒子 var fdj = document.getElementById("fdj"); // 2.获取小的图片 var small = fdj.children[0]; var smallImage = small.children[0]; // 3.获取容纳大图片的盒子 var big = fdj.children[1]; // 4.获取遮罩 var mask = small.children[1]; // 5.获取大的那张图片 var bigImage = big.children[0]; // 6.鼠标经过小的图片的时候显示 small.onmouseover = function(){ mask.style.display = "block"; big.style.display = "block"; } // 7. 鼠标离开时隐藏 small.onmouseout = function(){ mask.style.display = "none"; big.style.display = "none"; } console.log("fdj_marginLeft",document.defaultView.getComputedStyle(fdj, null).marginLeft); var fdj_marginLeft=document.defaultView.getComputedStyle(fdj, null).marginLeft.slice(0,-2); var fdj_marginTop =document.defaultView.getComputedStyle(fdj, null).marginTop.slice(0,-2); function createLine() { var sketchPad=document.getElementById("sketchPad"); var sketchPad_top=document.defaultView.getComputedStyle(sketchPad, null).top.slice(0,-2); var sketchPad_left=document.defaultView.getComputedStyle(sketchPad, null).left.slice(0,-2); // console.log("sketchPad_scrollLeft",sketchPad.scrollLeft); let radius=2;//半径 let pointHtmlStr = `<div style="position:absolute;border-radius: 50%;background: red;width:${radius*2}px;height:${radius*2}px;top:${event.pageY-radius-sketchPad_top+sketchPad.scrollTop-fdj_marginTop}px;left:${event.pageX-radius-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft}px;"></div>`; sketchPad.innerHTML = sketchPad.innerHTML + pointHtmlStr; let firstPoint = {}; firstPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft; firstPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop; // console.log("firstPoint1:"+firstPoint.xPoint); function createPoints(event) { var sketchPad=document.getElementById("sketchPad"); let secondPoint = {}; secondPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft; secondPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop; let lineLength = calcLine(firstPoint, secondPoint); let angle = getAngle( firstPoint.xPoint, firstPoint.yPoint, secondPoint.xPoint, secondPoint.yPoint ); // 设置一个div 宽度为 两点之间的距离,并且以 transform-origin: 0 50% 为圆心旋转,角度已经算出来 let lineHtmlStr = `<div style="position:absolute;border-top:1px solid red;width:${lineLength}px;top:${firstPoint.yPoint}px;left:${firstPoint.xPoint}px;transform:rotate(${angle}deg);transform-origin: 0 0;"></div>`; // let bodyDiv = document.getElementsByTagName("body")[0]; // // 添加到body 后面 // bodyDiv.innerHTML = bodyDiv.innerHTML + lineHtmlStr; sketchPad.innerHTML = sketchPad.innerHTML + lineHtmlStr; // 取消本段的起始点的监听 document.getElementById("sketchPad").removeEventListener("click", createPoints); } // 计算连线长度 function calcLine(firstPoint, secondPoint) { // 计算出两个点之间的距离 let line = Math.sqrt( Math.pow(firstPoint.xPoint - secondPoint.xPoint, 2) + Math.pow(firstPoint.yPoint - secondPoint.yPoint, 2) ); // console.log("calcLinefirstPoint2.xPoint:"+firstPoint.xPoint); // console.log("calcLinesecondPoint2.xPoint:"+secondPoint.xPoint); // console.log("calcLinefirstPoint2.yPoint:"+firstPoint.yPoint); // console.log("calcLinesecondPoint2.yPoint:"+secondPoint.yPoint); console.log("line:",line); return line; } // 计算角度 // 获得人物中心和鼠标坐标连线,与x轴正半轴之间的夹角 function getAngle(x1, y1, x2, y2) { // 获得人物中心和鼠标坐标连线,与x轴正半轴之间的夹角 var x = x1 - x2; var y = y1 - y2; var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); var cos = y / z; var radina = Math.acos(cos); // 用反三角函数求弧度 var angle = 180 / (Math.PI / radina); // 将弧度转换成角度 if (x2 > x1 && y2 === y1) { // 在x轴正方向上 angle = 0; } if (x2 > x1 && y2 < y1) { // 在第一象限; angle = angle - 90; } if (x2 === x1 && y1 > y2) { // 在y轴正方向上 angle = -90; } if (x2 < x1 && y2 < y1) { // 在第二象限 angle = 270 - angle; } if (x2 < x1 && y2 === y1) { // 在x轴负方向 angle = 180; } if (x2 < x1 && y2 > y1) { // 在第三象限 angle = 270 - angle; } if (x2 === x1 && y2 > y1) { // 在y轴负方向上 angle = 90; } if (x2 > x1 && y2 > y1) { // 在四象限 angle = angle - 90; } return angle; } // 解决第一次绑定的时候执行方法 // setTimeout(function() { // document.removeEventListener("click", createPoints); // 添加节点 document.getElementById("sketchPad").addEventListener("click", createPoints, false); // 在冒泡过程中处理函数 // }, 0); } //加载任意图片 function selectImage(file) { if (!file.files || !file.files[0]) { return; } var reader = new FileReader(); reader.onload = function (evt) { document.getElementById('imageID').src = evt.target.result; document.getElementById('imageIDBig').src = evt.target.result; image = evt.target.result; } reader.readAsDataURL(file.files[0]); } // 8 鼠标移动 // var x = 0; // var y = 0; small.onmousemove = function(event){ // console.log("mask_display = ", mask.style.display); // console.log("mask_display = ", document.defaultView.getComputedStyle(mask, null).width); var event = event || window.event; // 9.获取在盒子内部的坐标 本身定位了,这里换用父亲边框到body边框的距离 显示在遮罩的中间 var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2+ small.scrollLeft ; var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2+small.scrollTop; console.log("x = ",x); console.log("y = ",y); // console.log("mask_width=",mask.style) // 10.增加限制条件 if(x < 0){ // x = 0; }else if(x > small.offsetWidth - mask.offsetWidth){ // x = small.offsetWidth - mask.offsetWidth; } if(y < 0){![图片说明](https://img-ask.csdn.net/upload/202003/05/1583376605_799804.png) // y = 0; }else if(y > small.offsetHeight - mask.offsetHeight){ // y = small.offsetHeight-mask.offsetHeight; } mask.style.left = x+ "px"; mask.style.top = y + "px"; console.log("mask.style.left = ",mask.style.left); console.log("mask.style.top = ",mask.style.top); console.log(document.getElementsByClassName("mask")[0]); // 11.利用倍数关系显示大图片 开始没有看懂为什么大图片要定位,后来想想只有定位的盒子才有top/left值 var mask_height=window.getComputedStyle(mask).getPropertyValue('height'); var mask_width=window.getComputedStyle(mask).getPropertyValue('width'); var big_height=window.getComputedStyle(big).getPropertyValue('height'); var big_width=window.getComputedStyle(big).getPropertyValue('width'); bigImage.style.left = -x*big_width.slice(0,-2)/mask_width.slice(0,-2) +"px"; bigImage.style.top = -y*big_height.slice(0,-2)/mask_height.slice(0,-2) + "px"; } // console.log("x=",x); // console.log("y=",y); </script> </html> ``` 这是一个自己的小练习,目的就是标记测量图片中相关标的尺寸。鼠标移动时还带有一个放大镜效果。 出现的问题是:点击左下角【创建连线】按钮并点击图中某位置,选中第一个标记点后,通过354-355行中代码设置,在控制台明明看到x和y都在随着鼠标移动不断更新,但是偏偏无法对黄色mask框的left和top正确赋值。想得脑瓜疼,希望指教下 element.style.top和element.style.left控制css属性失效的原因 ``` ![图片说明](https://img-ask.csdn.net/upload/202003/05/1583376642_585681.png)

这个动不起来,看看有什么问题

``` <!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=""gb2312" /> <title>无标题文档</title> <style type="text/css"> div{ width: 553px; height: 343px; border:1px solid #000; perspective: 500px; } div img{ /*all 旋转过渡时间 ease 旋转前等待时间*/ transition:all 1s ease 0s; } div img cur{ /*all 旋转过渡时间 ease 旋转前等待时间*/ transform:rotateY(30deg)translateZ(300px); } input{ /*防止按钮被挡住,所以要有z-index值,记住只有定位的元素才有z-index值*/ position: relative; z-index: 1000; } </style> <script type="text/javascript"> window.onload = function(){ //得到按钮 var btn = document.getElementById("btn"); //得到图片 var img = document.getElementsByTagName("img")[0]; //监听 btn.onclick = function(){ img.className = "cur"; //设置img的class属性 } } </script> </head> <body> <input type="button" value="按我" id="btn" /> <div> <img src="images/1.jpg" alt="" class="cur"/> </div> </body> </html> ```

XMLHttpRequest对象向服务器(servlet)发出请求,服务端如何接收

/** * 页面上显示需要上传的文件 * @private */ function _showUploadFile(file) { var reader = new FileReader(); console.log(file) // console.log(reader); //判断文件类型 if (file.type.match(/image*/)) { reader.onload = function (e) { var formData = new FormData(); console.info("1:"+formData); console.info(formData); var li = $("#template li").clone(); var img = li.find("img"); var progress = li.find(".progress"); var percentage = li.find(".percentage"); percentage.text("0%"); img.attr("src", e.target.result); $("ul", $(_uploadEle)).append(li); $(_uploadEle).find("li").size() == 10 && $(_uploadEle).width(($(_uploadEle).width() + 8) + "px").css("overflow", "auto"); console.info(file); //formData.uploadFile = file; formData.append("uploadFile", file); //上传文件到服务器 _uploadToServer(formData, li, progress, percentage); }; reader.readAsDataURL(file); } else { console.log("此" + file.name + "不是图片文件!"); } } /** * 上传文件到服务器 * @private */ function _uploadToServer(formData, li, progress, percentage) { var xhr = new XMLHttpRequest(); xhr.open("POST", "http://localhost:8080/html5Upload/FileUploadServlet.html", true); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest', 'Content-Type', 'multipart/form-data;'); //HTML5新增的API,存储了上传过程中的信息 xhr.upload.onprogress = function (e) { var percent = 0; if (e.lengthComputable) { //更新页面显示效果 percent = 100 * e.loaded / e.total; progress.height(percent ); percentage.text(percent + "%"); percent >= 100 && li.addClass("done"); } }; xhr.send(formData); } ``` 注:xhr.send(content);--向服务器发出请求,如果采用异步方式,该方法会立即返回。content可以指定为null表示不发送数据,其内容可以是DOM对象,输入流或字符串。 ```

springmvc 前台直接访问@RequestMapping("/show")提示404,后台不报错

相关代码: springmvc.xml <!-- 扫描组件 --> <context:component-scan base-package="com.bjsxt.controller"></context:component-scan> <!-- 注解驱动,注册HandlerMapping和HandlerAdapter --> <mvc:annotation-driven></mvc:annotation-driven> <!-- 设置静态资源 --> <mvc:resources location="/js/" mapping="/js/**"/> <mvc:resources location="/css/" mapping="/css/**"/> <mvc:resources location="/images/" mapping="/images/**"/> <!-- 视图解析器 --> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/"/> <property name="suffix" value=".jsp"/> </bean> applicationcontext.xml: <!-- 注解扫描,spring扫描service,springmvc扫描控制器 --> <context:component-scan base-package="com.bjsxt.service.impl"></context:component-scan> <!-- 加载database属性文件 --> <context:property-placeholder location="classpath:db.properties"/> <!-- 数据源 --> <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="driverClassName" value="${jdbc.driver}"></property> <property name="url" value="${jdbc.url}"></property> <property name="username" value="${jdbc.username}"></property> <property name="password" value="${jdbc.password}"></property> </bean> <!-- SqlSessionFactory --> <bean id="factory" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource"/> <property name="typeAliasesPackage" value="com.bjsxt.pojo"/> </bean> <!-- 扫描器 --> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="com.bjsxt.mapper"></property> <property name="sqlSessionFactoryBeanName" value="factory"></property> </bean> <!-- 事务 管理器--> <bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="dataSource"></property> </bean> <!-- 声明式事务 --> <tx:advice id="txAdvice" transaction-manager="txManager"> <tx:attributes> <tx:method name="ins*"/> <tx:method name="upd*"/> <tx:method name="del*"/> <tx:method name="*" read-only="true"/> </tx:attributes> </tx:advice> <!-- 配置aop --> <aop:config> <aop:pointcut expression="execution(* com.bjsxt.service.impl.*.*(..))" id="mypoint"/> <aop:advisor advice-ref="txAdvice" pointcut-ref="mypoint"/> </aop:config> 控制器 @Controller public class MenuController { @Resource private MenuService menuServiceImpl; @RequestMapping("/show") @ResponseBody public List<Menu> show(){ System.out.println("show方法"); return menuServiceImpl.show(); } } web.xml <!-- spring上下文参数 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param> <!-- spring监听器 --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- springMVC前端控制器,入口类 --> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- springmvc上下文参数,自启动 --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springmvc.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping>

怎样在jquery里控制单击事件的次数

开始是用jquery单击事件创建了一个input节点,并且加了class属性,然后问题是每次我单击都能创建一个同样的input节点,我是想要限制这种无限制的单击事件,只要出现一个就可以了在之前这个input节点消失之前![图片](https://img-ask.csdn.net/upload/201709/06/1504695056_622155.jpg)![图片](https://img-ask.csdn.net/upload/201709/06/1504695057_302664.jpg)

SSM中Controller自动注入service失败

Root Cause org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'loginController': Unsatisfied dependency expressed through field 'loginServiceImpl'; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'com.ssm.service.LoginServiceImpl' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {@org.springframework.beans.factory.annotation.Autowired(required=true)} org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.inject(AutowiredAnnotationBeanPostProcessor.java:586) org.springframework.beans.factory.annotation.InjectionMetadata.inject(InjectionMetadata.java:87) org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor.postProcessPropertyValues(AutowiredAnnotationBeanPostProcessor.java:364) org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.populateBean(AbstractAutowireCapableBeanFactory.java:1269) org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:551) org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:481) org.springframework.beans.factory.support.AbstractBeanFactory$1.getObject(AbstractBeanFactory.java:312) org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:230) org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:308) org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:197) org.springframework.beans.factory.support.DefaultListableBeanFactory.preInstantiateSingletons(DefaultListableBeanFactory.java:761) org.springframework.context.support.AbstractApplicationContext.finishBeanFactoryInitialization(AbstractApplicationContext.java:867) org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:543) org.springframework.web.servlet.FrameworkServlet.configureAndRefreshWebApplicationContext(FrameworkServlet.java:668) org.springframework.web.servlet.FrameworkServlet.createWebApplicationContext(FrameworkServlet.java:634) org.springframework.web.servlet.FrameworkServlet.createWebApplicationContext(FrameworkServlet.java:682) org.springframework.web.servlet.FrameworkServlet.initWebApplicationContext(FrameworkServlet.java:553) org.springframework.web.servlet.FrameworkServlet.initServletBean(FrameworkServlet.java:494) org.springframework.web.servlet.HttpServletBean.init(HttpServletBean.java:171) javax.servlet.GenericServlet.init(GenericServlet.java:158) org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:493) org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:81) org.apache.catalina.valves.AbstractAccessLogValve.invoke(AbstractAccessLogValve.java:650) org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:342) org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:800) org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66) org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:806) org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1498) org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142) java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617) org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) java.lang.Thread.run(Thread.java:745) ## 在Controller中自动注入service就报以上错误 ![图片说明](https://img-ask.csdn.net/upload/202004/13/1586763996_66970.jpg) ## 该service为 ![图片说明](https://img-ask.csdn.net/upload/202004/13/1586764249_143874.jpg) spring-dao.xml ``` <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd"> <!--读取properties文件 --> <context:property-placeholder location="classpath:db.properties" /> <context:annotation-config></context:annotation-config> <!--配置数据源 --> <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="driverClassName"> <value>${driver}</value> </property> <property name="url"> <value>${url}</value> </property> <property name="username"> <value>${username}</value> </property> <property name="password"> <value>${password}</value> </property> </bean> <!-- 配置sqlsessionFactory --> <!-- 查看源码便可知注入的property的名字 --> <!-- 可以读取mybatis-config.xml文件,也可以不读取,信息全都在配置在spring中 --> <!-- <property name="configLocation" value="classpath:mybatis-config.xml" /> --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource" /> <property name="typeAliasesPackage" value="com.ssm.bean"></property> <property name="configurationProperties"> <props> <prop key="cacheEnabled">true</prop> <prop key="lazyLoadingEnabled">false</prop> </props> </property> <!--告诉spring扫描映射文件 --> <property name="mapperLocations" value="classpath:com/ssm/dao/mapper/*.xml"></property> </bean> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="com.ssm.dao.mapperInterface"></property> </bean> </beans> ``` ## 以下是spring-service.xml ``` <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd"> <!-- 扫描添加了spring注解的类 --> <context:component-scan base-package="com.ssm.service.*" /> <!-- 采用注解方式配置 --> <context:annotation-config /> <!-- 配置事务管理器 --> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="dataSource" /> </bean> <!-- 配置事务拦截器 --> <tx:advice id="txAdvice" transaction-manager="transactionManager"> <!-- 注入事务属性 --> <tx:attributes> <tx:method name="get*" read-only="true" /> <tx:method name="find*" read-only="true" /> <tx:method name="select*" propagation="REQUIRED" rollback-for="Exception" /> </tx:attributes> </tx:advice> <!-- spring的aop配置 --> <aop:config proxy-target-class="true"> <aop:pointcut id="txPointcut" expression="execution(* com.ssm.service..*.*(..)) " /> <aop:advisor advice-ref="txAdvice" pointcut-ref="txPointcut" /> </aop:config> </beans> ``` ## 以下spring-web.xml ``` <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd"> <!-- 配置SpringMVC --> <!-- 1.开启SpringMVC注解模式 --> <!-- 简化配置: (1)自动注册DefaultAnootationHandlerMapping,AnotationMethodHandlerAdapter (2)提供一些列:数据绑定,数字和日期的format @NumberFormat, @DateTimeFormat, xml,json默认读写支持 --> <mvc:annotation-driven /> <!-- 采用注解方式配置 --> <context:annotation-config /> <!-- 2.静态资源默认servlet配置 (1)加入对静态资源的处理:js,gif,png (2)允许使用"/"做整体映射 --> <!-- <mvc:resources mapping="/images/**" location="/images/"/> <mvc:resources mapping="/js/**" location="/js/"/> <mvc:resources mapping="/css/**" location="/css/"/> <mvc:resources mapping="/fonts/**" location="/fonts/"/> <mvc:resources mapping="/script/**" location="/script/"/> --> <mvc:default-servlet-handler/> <!-- 3.配置jsp 显示ViewResolver --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" /> <property name="prefix" value="/WEB-INF/page/" /> <property name="suffix" value=".jsp" /> </bean> <!-- 4.扫描web相关的bean --> <context:component-scan base-package="com.ssm.web.controller" /> </beans> ``` ##最后是web.xml ``` <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <display-name>SSMDemo</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <!-- 配置spring读取的配置文件 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value> classpath:spring-dao.xml classpath:spring-service.xml </param-value> </context-param> <!--配置监听器 --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- 如果是用mvn命令生成的xml,需要修改servlet版本为3.1 --> <!-- 配置DispatcherServlet --> <servlet> <servlet-name>SpringMVC</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 配置springMVC需要加载的配置文件 spring-dao.xml,spring-service.xml,spring-web.xml Mybatis - > spring -> springmvc --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-web.xml</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>SpringMVC</servlet-name> <!-- 默认匹配所有的请求 --> <url-pattern>/</url-pattern> </servlet-mapping> <!-- 配置编码过滤 --> <filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/</url-pattern> </filter-mapping> </web-app> ``` ##求解决!!

spring3 + hibernate 4.1 配置的问题

项目用:spring MVC + spring 3.2.4 + Hibernate 4.2.6+spring security3.1.4 在启动容器时,spring security 通过hibernate去数据库加载权限时,报:No Session found for current thread异常。 异常如下: [code="java"] Caused by: org.hibernate.HibernateException: No Session found for current thread at org.springframework.orm.hibernate4.SpringSessionContext.currentSession(SpringSessionContext.java:97) at org.hibernate.internal.SessionFactoryImpl.getCurrentSession(SessionFactoryImpl.java:990) at com.seveng.weixin.foundation.dao.support.HibernateGenericDao.getSession(HibernateGenericDao.java:58) at com.seveng.weixin.foundation.dao.support.HibernateGenericDao.getAll(HibernateGenericDao.java:85) at com.seveng.weixin.foundation.security.filter.support.WeixinInvocationSecurityMetadataSourceService.loadResourceDefine(WeixinInvocationSecurityMetadataSourceService.java:39) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25) at java.lang.reflect.Method.invoke(Method.java:597) at org.springframework.beans.factory.annotation.InitDestroyAnnotationBeanPostProcessor$LifecycleElement.invoke(InitDestroyAnnotationBeanPostProcessor.java:344) at org.springframework.beans.factory.annotation.InitDestroyAnnotationBeanPostProcessor$LifecycleMetadata.invokeInitMethods(InitDestroyAnnotationBeanPostProcessor.java:295) at org.springframework.beans.factory.annotation.InitDestroyAnnotationBeanPostProcessor.postProcessBeforeInitialization(InitDestroyAnnotationBeanPostProcessor.java:130) ... 60 more [/code] spring MVC 配置文件:spring-mvc.xml [code="xml"] <mvc:annotation-driven /> <!-- 开启controller注解支持 --> <context:component-scan base-package="com.seveng.weixin" use-default-filters="false"> <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" /> </context:component-scan> [/code] spring 主配置文件: [code="xml"] <context:component-scan base-package="com.seveng.weixin"> <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller" /> </context:component-scan> [/code] 事务的配置: [code="xml"] <bean id="txManager" class="org.springframework.orm.hibernate4.HibernateTransactionManager"> <property name="sessionFactory" ref="sessionFactory" /> </bean> <tx:advice id="txAdvice" transaction-manager="txManager"> <tx:attributes> <tx:method name="save*" propagation="REQUIRED" /> <tx:method name="add*" propagation="REQUIRED" /> <tx:method name="create*" propagation="REQUIRED" /> <tx:method name="insert*" propagation="REQUIRED" /> <tx:method name="update*" propagation="REQUIRED" /> <tx:method name="merge*" propagation="REQUIRED" /> <tx:method name="del*" propagation="REQUIRED" /> <tx:method name="remove*" propagation="REQUIRED" /> <tx:method name="put*" propagation="REQUIRED" /> <tx:method name="use*" propagation="REQUIRED" /> <!--hibernate4必须配置为开启事务 否则 getCurrentSession()获取不到 --> <tx:method name="get*" propagation="REQUIRED" read-only="true" /> <tx:method name="load*" propagation="REQUIRED" read-only="true" /> <tx:method name="find*" propagation="REQUIRED" read-only="true" /> <tx:method name="list*" propagation="REQUIRED" read-only="true" /> <tx:method name="*" read-only="true" /> </tx:attributes> </tx:advice> <aop:config proxy-target-class="true"> <!-- 对业务逻辑层实施事务 --> <aop:pointcut id="txPointcut" expression="execution(* com.seveng.weixin..service.impl.*.*(..))" /> <aop:advisor advice-ref="txAdvice" pointcut-ref="txPointcut" /> </aop:config> <aop:aspectj-autoproxy expose-proxy="true"/> <tx:annotation-driven transaction-manager="txManager" proxy-target-class="true" /> [/code] 数据库数相关配置: [code="xml"] <!-- 加载资源文件 --> <context:property-placeholder location="classpath:config/database.properties" /> <!-- 数据库映射 --> <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="driverClassName" value="${connection.driver_class}" /> <property name="url" value="${connection.url}" /> <property name="username" value="${connection.username}" /> <property name="password" value="${connection.password}" /> </bean> <!-- hibernate 需要的信息 --> <bean id="sessionFactory" class="org.springframework.orm.hibernate4.LocalSessionFactoryBean"> <property name="dataSource" ref="dataSource" /> <property name="packagesToScan"> <list> <value>com.seveng.weixin.**.model.*</value> </list> </property> <property name="hibernateProperties"> <props> <prop key="hibernate.dialect">${hibernate.dialect}</prop> <prop key="hibernate.show_sql">${hibernate.show_sql}</prop> <prop key="hibernate.format_sql">${hibernate.format_sql}</prop> <prop key="hibernate.hbm2ddl.auto">${hibernate.hbm2ddl.auto}</prop> <prop key="hibernate.query.substitutions">${hibernate.query.substitutions}</prop> <prop key="hibernate.default_batch_fetch_size">${hibernate.default_batch_fetch_size}</prop> <prop key="hibernate.max_fetch_depth">${hibernate.max_fetch_depth}</prop> <prop key="hibernate.generate_statistics">${hibernate.generate_statistics}</prop> <prop key="hibernate.bytecode.use_reflection_optimizer">${hibernate.bytecode.use_reflection_optimizer}</prop> <prop key="hibernate.cache.use_second_level_cache">${hibernate.cache.use_second_level_cache}</prop> <prop key="hibernate.cache.use_query_cache">${hibernate.cache.use_query_cache}</prop> <prop key="hibernate.cache.provider_class">${hibernate.cache.provider_class}</prop> <prop key="hibernate.cache.region.factory_class">${hibernate.cache.region.factory_class}</prop> <prop key="hibernate.cache.use_structured_entries">${hibernate.cache.use_structured_entries}</prop> <prop key="net.sf.ehcache.configurationResourceName">${net.sf.ehcache.configurationResourceName}</prop> <prop key="hibernate.current_session_context_class">${hibernate.current_session_context_class}</prop> </props> </property> </bean> [/code] spring security 相关配置: [code="xml"] <!-- 不拦截的请求 --> <security:http pattern="/login" security="none" /> <security:http pattern="/images/**" security="none" /> <security:http pattern="/css/**" security="none" /> <security:http pattern="/js/**" security="none" /> <!-- 保护应用程序的所有URL --> <security:http auto-config="true"> <!-- login-page: 指定登录页面 --> <security:form-login login-page="/login" /> <security:logout logout-success-url="/login" /> <!-- 会话管理配置 ,设置最多登录一次,二次登录会让第一次登录失效, 则设置error-if-maximum-exceeded为false,要求第一次有效设置为true --> <security:session-management invalid-session-url="/login"> <security:concurrency-control max-sessions="1" error-if-maximum-exceeded="false" /> </security:session-management> <!-- 增加一个自定义的filter,放在FILTER_SECURITY_INTERCEPTOR之前, 实现用户、角色、权限、资源的数据库管理。 --> <security:custom-filter ref="weixinFilter" before="FILTER_SECURITY_INTERCEPTOR" /> </security:http> <!-- 一个自定义的filter,必须包含authenticationManager, accessDecisionManager,securityMetadataSource三个属性。 --> <bean id="weixinFilter" class="com.seveng.weixin.foundation.security.filter.WeixinFilterSecurityInterceptor"> <property name="authenticationManager" ref="authenticationManager" /> <property name="accessDecisionManager" ref="weixinAccessDecisionManager" /> <property name="securityMetadataSource" ref="weixinInvocationSecurityMetadataSourceService" /> </bean> <!-- 注意能够为authentication-manager 设置alias别名 --> <security:authentication-manager alias="authenticationManager"> <security:authentication-provider user-service-ref="appUserDetailsService"> <security:password-encoder ref="passwordEncoder"> <security:salt-source user-property="username" /> </security:password-encoder> </security:authentication-provider> </security:authentication-manager> <!-- 事件监听:实现了 ApplicationListener监听接口,包括AuthenticationCredentialsNotFoundEvent 事件, AuthorizationFailureEvent事件,AuthorizedEvent事件, PublicInvocationEvent事件 --> <bean class="org.springframework.security.authentication.event.LoggerListener" /> <!-- 用户的密码加密或解密 --> <bean id="passwordEncoder" class="org.springframework.security.authentication.encoding.Md5PasswordEncoder" /> <!-- 启用用户的缓存功能 --> <bean id="userCache" class="org.springframework.security.core.userdetails.cache.EhCacheBasedUserCache"> <property name="cache" ref="userEhCache" /> </bean> <bean id="userEhCache" class="org.springframework.cache.ehcache.EhCacheFactoryBean"> <property name="cacheName" value="userCache" /> <property name="cacheManager" ref="cacheManager" /> </bean> <bean id="cacheManager" class="org.springframework.cache.ehcache.EhCacheManagerFactoryBean" > <property name="configLocation" value="classpath:config/ehcache.xml" /> </bean> [/code] 当容器启动时,spring security加载权限的代码 [code="java"] @PostConstruct @Transactional public void loadResourceDefine() { List<Authority> authorities = this.getAll(Authority.class); // 应当是资源为key, 权限为value。 资源通常为url, 权限就是那些以ROLE_为前缀的角色。 一个资源可以由多个权限来访问。 resourceMap = new HashMap<String, Collection<ConfigAttribute>>(); for (Authority auth : authorities) { ConfigAttribute ca = new SecurityConfig(auth.getAuthName()); Set<Resource> resources = auth.getResources(); for (Resource res : resources) { String url = res.getResString(); // 判断资源文件和权限的对应关系,如果已经存在相关的资源url,则要通过该url为key提取出权限集合,将权限增加到权限集合中 if (resourceMap.containsKey(url)) { Collection<ConfigAttribute> value = resourceMap.get(url); value.add(ca); resourceMap.put(url, value); } else { Collection<ConfigAttribute> atts = new ArrayList<ConfigAttribute>(); atts.add(ca); resourceMap.put(url, atts); } } } } [/code]

基于springmvc+mybatis的登录表单提交后404

前端填写正确的用户名和密码后,提交登录,浏览器显示404,前端提交的地址是/userlogin,后端对接的/user/userlogin也是对的,浏览器f12里显示请求的确成功传给了后端,但是不知道为什么404。用的是tomcat8.5,java版本1.8,phpstudy最新版,mysql5.7.26。 ## 这是所用到的包: ![图片说明](https://img-ask.csdn.net/upload/202002/01/1580567617_880785.jpg) ## 这是目录结构: ![图片说明](https://img-ask.csdn.net/upload/202002/01/1580567511_223692.jpg) ## 这是web.xml: ```xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>springmvc_test</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <!-- 配置spring监听器 --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- 加载spring配置文件 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath*:config/context-config.xml</param-value> </context-param> <!-- 配置前端控制器 --> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <!-- DispatcherServlet在初始化方法里面会读取该初始化参数的值来获得 spring配置文件的位置 ,然后启动spring容器。 --> <param-name>contextConfigLocation</param-name> <param-value>classpath*:config/springmvc-config.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!-- 配置字符编码 --> <filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app> ``` ## 这是context-config.xml: ```xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> <!-- 扫描service包下的注解 --> <context:component-scan base-package="com.test.service"></context:component-scan> <!-- 配置数据库 --> <!-- 加载配置文件 --> <!-- <context:property-placeholder location="classpath:jdbc.properties"/> --> <bean id="dateSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"> <property name="driver" value="com.mysql.jdbc.Driver"></property> <property name="url" value="jdbc:mysql://localhost:3306/Eday_Test"></property> <property name="username" value="root"></property> <property name="password" value="123456"></property> </bean> <!-- 配置Sqlsessionfactory并将数据源注入 --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!-- 引入数据源 --> <property name="dateSource" ref="dateSource"></property> <!-- 载入mybatis配置文件 --> <property name="configLocation" value="classpath:mybatis-config.xml"></property> <!-- 载入配置mapper映射的xml --> <property name="mapperLocations" value="classpath:com/test/mapper/*.xml"></property> </bean> <!-- 配置扫描mapper接口 --> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackge" value="com.test.mapper"></property> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property> </bean> <!-- 配置事务管理器 --> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dateSource" ref="dateSource"></property> </bean> <tx:annotation-driven transaction-manager="transactionManager"/> </beans> ``` ## 这是mybatis-config.xml: ```xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <typeAliases> <!-- 配置别名 --> <typeAlias alias="User" type="com.test.pojo.User"/> </typeAliases> </configuration> ``` ## 这是springmvc-config.xml: ```xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd"> <!-- 扫描controller包下的注解 --> <context:component-scan base-package="com.test.controller"></context:component-scan> <!-- 开启注解 --> <mvc:annotation-driven></mvc:annotation-driven> <!-- 静态资源访问 --> <mvc:default-servlet-handler/> <!-- 视图解析器 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!-- 配置试图解析的默认路径,即配置页面的根路径 --> <property name="prefix" value="/"></property> <property name="suffix" value=".jsp"></property> </bean> </beans> ``` ## 这是UserController.java: ```java package com.test.controller; import javax.servlet.http.HttpSession; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.servlet.ModelAndView; import com.test.pojo.User; import com.test.service.UserService; //声明控制器 @Controller //设置bean的scope属性为多例(prototype) @Scope("prototype") //设置请求映射,当客户端请求/user时,转到该控制器处理 @RequestMapping("/user") public class UserController { @Autowired private UserService userService; @RequestMapping(value="/userlogin") public ModelAndView login(String user_Name,String user_pwd,ModelAndView mv,HttpSession session){ //调用userService中的login方法处理user实体类对象 User user = userService.login(user_Name,user_pwd); //登录的逻辑判断,判断条件是返回结果不为空 if(user!=null){ //登陆成功,将user对象设置到HttpSession作用范围域中,相当于服务端的cookie,有效时间默认30分钟 //在程序运行期间,在任意页面都可以提取它的值。 session.setAttribute("user",user); //转发到main请求 //登录成功,跳转页面 mv.setViewName("login/login-success"); }else{ //登录失败,向前端传递失败信息 mv.addObject("message","用户名或密码错误,请重新输入!"); //登录失败,跳转到登录页面 mv.setViewName("login"); } return mv; } //跳转到用户注册界面 @RequestMapping(value="/userregister"/*,method=RequestMethod.POST*/) public String register(User user){ String user_Name = user.getUser_Name(); //如果数据库中没有该用户,可以注册,否则跳转页面 if(userService.findByUserName(user_Name)==null){ //添加用户 userService.register(user); //注册成功,跳转到主页面 return "index"; }else{ //注册失败,跳转到错误页面 return "error"; } } } ``` ## 这是UserMapper.java: ```java package com.test.mapper; import org.apache.ibatis.annotations.Param; import com.test.pojo.User; public interface UserMapper { //根据用户名和密码查找,mybatis中有多个参数时,需要使用@Param注解 User findByUserNameAndPassword(@Param("user_Name")String user_Name,@Param("user_Pwd")String user_Pwd); //增加用户 void addUser(User user); //根据用户名查询 User findByUserName(String user_Name); } ``` ## 这是UserMapper.xml: ```xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.tes.mapper.UserMapper"> <!-- 根据用户名和密码查询 --> <select id="findByUserNameAndPasssword" resultType="User"> select * from user where user_Name=#{user_Name} and user_Pwd=#{user_Pwd} </select> <!-- 增加用户 --> <insert id="addUser" parameterType="User"> insert into user (user_Name,user_Pwd,user_Email,user_NickName,user_Birth,user_Phone,user_InvitationCode) values(#{user_Name},#{user_Pwd},#{user_Email},#{user_NickName},#{user_Birth},#{user_Phone},#{user_InvitationCode}) </insert> <!-- 根据用户名查询 --> <select id="findByUserName" resultType="User"> select * from user where user_Name=#{user_Name} </select> </mapper> ``` ## 这是User.java: ```java package com.test.pojo; import java.sql.Timestamp; public class User { private int user_Id; private String user_Name; private int user_Pwd; private String user_Email; private String user_NickName; private Timestamp user_Time; private String user_Birth; private int user_Fans; private int user_Follow; private int user_Score; private String user_HeadImgAddr; private int user_Phone; private String user_InvitationCode; public int getUser_Id() { return user_Id; } public void setUser_Id(int user_Id) { this.user_Id = user_Id; } public String getUser_Name() { return user_Name; } public void setUser_Name(String user_Name) { this.user_Name = user_Name; } public int getUser_Pwd() { return user_Pwd; } public void setUser_Pwd(int user_Pwd) { this.user_Pwd = user_Pwd; } public String getUser_Email() { return user_Email; } public void setUser_Email(String user_Email) { this.user_Email = user_Email; } public String getUser_NickName() { return user_NickName; } public void setUser_NickName(String user_NickName) { this.user_NickName = user_NickName; } public Timestamp getUser_Time() { return user_Time; } public void setUser_Time(Timestamp user_Time) { this.user_Time = user_Time; } public String getUser_Birth() { return user_Birth; } public void setUser_Birth(String user_Birth) { this.user_Birth = user_Birth; } public int getUser_Fans() { return user_Fans; } public void setUser_Fans(int user_Fans) { this.user_Fans = user_Fans; } public int getUser_Follow() { return user_Follow; } public void setUser_Follow(int user_Follow) { this.user_Follow = user_Follow; } public int getUser_Score() { return user_Score; } public void setUser_Score(int user_Score) { this.user_Score = user_Score; } public String getUser_HeadImgAddr() { return user_HeadImgAddr; } public void setUser_HeadImgAddr(String user_HeadImgAddr) { this.user_HeadImgAddr = user_HeadImgAddr; } public int getUser_Phone() { return user_Phone; } public void setUser_Phone(int user_Phone) { this.user_Phone = user_Phone; } public String getUser_InvitationCode() { return user_InvitationCode; } public void setUser_InvitationCode(String user_InvitationCode) { this.user_InvitationCode = user_InvitationCode; } @Override public String toString() { return "User [user_Id=" + user_Id + ", user_Name=" + user_Name + ", user_Pwd=" + user_Pwd + ", user_Email=" + user_Email + ", user_NickName=" + user_NickName + ", user_Time=" + user_Time + ", user_Birth=" + user_Birth + ", user_Fans=" + user_Fans + ", user_Follow=" + user_Follow + ", user_Score=" + user_Score + ", user_HeadImgAddr=" + user_HeadImgAddr + ", user_Phone=" + user_Phone + ", user_InvitationCode=" + user_InvitationCode + "]"; } } ``` ## 这是UserService.java: ```java package com.test.service; import com.test.pojo.User; public interface UserService { //通过用户名及密码核查用户登录 User login(String user_Name,String user_Pwd); //增加用户 void register(User user); //根据用户名查询 User findByUserName(String user); } ``` ## 这是UserServiceImpl.java: ```java package com.test.service.impl; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import com.test.mapper.UserMapper; import com.test.pojo.User; import com.test.service.UserService; @Service @Transactional public class UserServiceImpl implements UserService { //注入UserMapper接口 @Autowired private UserMapper userMapper; //登录,根据用户名和密码进行查询 @Override public User login(String user_Name,String user_Pwd){ return userMapper.findByUserNameAndPassword(user_Name,user_Pwd); } //注册,增加用户 @Override public void register(User user){ userMapper.addUser(user); } //根据用户名查询 @Override public User findByUserName(String user_Name){ return userMapper.findByUserName(user_Name); } } ``` ##这是login.jsp ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../css/login.css" /> <title>登录</title> </head> <body> <!--导航栏--> <nav class="nav"> <ul> <li class="logo"><a href="#">Eday</a></li> <li class="shouye"><a href="../index.jsp" class="neirong">首页</a></li> <li class="fgx">|</li> <li><a href="#" class="neirong">文章列表</a></li> <li class="fgx">|</li> <li><a href="#" class="neirong">留言板</a></li> <li class="fgx">|</li> <li><a href="#" class="neirong">更新日志</a></li> </ul> </nav> <!--登录板块--> <header class="header"> <p class="logintitle"> <b>登录</b> </p> <form action="${pageContext.request.contextPath }/user/userlogin" method="post" class=login-form> <p class= login-username-p> <label for="username" class="login-username-text">用户名:</label> <input type=text name="user_Name" class="login-username-input"> <br><a href="register.jsp" class=login-register>注册</a> </p> <p class="login-psw-p"> <label for="psw" class="login-psw-text">密码:</label> <input type=password name="user_Pwd" class="login-psw-input"> <br><a href="#" class=login-forget>忘记密码</a> </p> <div class=login-button-div> <label for=button></label> <button type=sublim class=login-button>登录</button> </div> </form> </header> </body> </html> ``` ## 这是login-success.jsp: ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>登录成功,请等待跳转...</title> <script type="text/javascript"> onload=function(){ setInterval(go, 1000); }; var x=3; //利用了全局变量来执行 function go(){ x--; if(x>0){ document.getElementById("sp").innerHTML=x; //每次设置的x的值都不一样了。 }else{ location.href='../index.jsp'; } } </script> </head> <body> <!--导航栏--> <nav class="nav"> <ul> <li class="logo"><a href="#">Eday</a></li> <li class="shouye"><a href="../index.jsp" class="neirong">首页</a></li> <li class="fgx">|</li> <li><a href="#" class="neirong">文章列表</a></li> <li class="fgx">|</li> <li><a href="#" class="neirong">留言板</a></li> <li class="fgx">|</li> <li><a href="#" class="neirong">更新日志</a></li> </ul> </nav> <header> <div> <p>登录成功!页面将在3秒后自动跳转,请稍等...</p> </div> </header> </body> </html> ``` ## 这是数据库: ![图片说明](https://img-ask.csdn.net/upload/202002/01/1580568589_694404.jpg)

2019 Python开发者日-培训

2019 Python开发者日-培训

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

设计模式(JAVA语言实现)--20种设计模式附带源码

设计模式(JAVA语言实现)--20种设计模式附带源码

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

java后台+微信小程序 实现完整的点餐系统

java后台+微信小程序 实现完整的点餐系统

三个项目玩转深度学习(附1G源码)

三个项目玩转深度学习(附1G源码)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

2019 AI开发者大会

2019 AI开发者大会

玩转Linux:常用命令实例指南

玩转Linux:常用命令实例指南

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Git 实用技巧

Git 实用技巧

Python数据清洗实战入门

Python数据清洗实战入门

使用TensorFlow+keras快速构建图像分类模型

使用TensorFlow+keras快速构建图像分类模型

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

程序员的算法通关课:知己知彼(第一季)

程序员的算法通关课:知己知彼(第一季)

MySQL数据库从入门到实战应用

MySQL数据库从入门到实战应用

机器学习初学者必会的案例精讲

机器学习初学者必会的案例精讲

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

.net core快速开发框架

.net core快速开发框架

玩转Python-Python3基础入门

玩转Python-Python3基础入门

Python数据挖掘简易入门

Python数据挖掘简易入门

微信公众平台开发入门

微信公众平台开发入门

程序员的兼职技能课

程序员的兼职技能课

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

HoloLens2开发入门教程

HoloLens2开发入门教程

微信小程序开发实战

微信小程序开发实战

Java8零基础入门视频教程

Java8零基础入门视频教程

相关热词 c# 按行txt c#怎么扫条形码 c#打包html c# 实现刷新数据 c# 两个自定义控件重叠 c#浮点类型计算 c#.net 中文乱码 c# 时间排序 c# 必备书籍 c#异步网络通信
立即提问