搜索到
7
篇与
js
的结果
-
解决js通过get方式传值到servlet乱码的问题 不知道大家在编写项目的代码时，是否遇到过需要通过js把参数传到后台的情况，但是直接传的话会导致后台收到的值确实乱码的，即使设置了[code lang="java"]request.setCharacterEncoding("utf-8");[/code]仍然没有效果。如果遇到过，那不妨试试下面的方法吧。 首先，需要在js中将需要传递的参数两次编码，向下面这样,其中str就是需要向后台传递的参数。 [code lang="js"]encodeURI(encodeURI(str));[/code] 其次，需要在java代码中进行解码，像这样[code lang="java"]URLDecoder.decode(str,"utf-8");[/code],其中str就是js传递过来的字符串。
-
-
-
![canvas绘制时钟]()
canvas绘制时钟 不知大家是否看见有的网站会有一个时钟，今天给大家分享一个自己用canvas绘制的时钟,只要系统的时间正确，该时钟的时间就不会错。废话不多说了，下面就是时钟的整个html代码，只需要将代码复制之后保存为html文件就可以运行了，至于怎么加在自己的网站上就需要你们自己琢磨了。 运行结果如下图所示: [code lang="js"] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="时钟"> <meta name="description" content=""> <title>clock</title> <style type="text/css"> *{ margin: 0; padding: 0; } </style> </head> <body bgcolor="black"> <canvas id="canvas" width="800" height="600">您的浏览器不支持canvas</canvas> <script type="text/javascript"> (function(){ /** *站点：执念博客 *作者：执念 *网址：http://zhinianboke.com */ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var x = window.innerWidth/2; var y = window.innerHeight/2; var r = 80; var now=new Date(); var hours=now.getHours(); var minutes=now.getMinutes(); var seconds=now.getSeconds(); drawClock(); move(hours,minutes,seconds); function drawClock(){ //画时钟 ctx.strokeStyle = "gray"; ctx.lineWidth = "3"; ctx.beginPath(); var sr = 5; ctx.arc(x,y,r,0,2*Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(x,y,2,0,2*Math.PI); ctx.fill(); ctx.font = "13px Arial"; ctx.fillStyle = "gray"; var time = -1; for(var i=0;i<60;i++){ var q = i*2*Math.PI/60; var x1 = 0;//刻度终点 var y1 = 0; var x2 = 0;//刻度起点 var y2 = 0; var x3 = 0;//刻度值位置 var y3 = 0; sr = 5; if(i%5 == 0){ sr = 10; time++; } if(i%15 == 0){ sr = 15; } if(q>=0 && q<Math.PI/2){ x1 = x + r*Math.sin(q); y1 = y - r*Math.cos(q); x2 = x + (r-sr)*Math.sin(q); y2 = y - (r-sr)*Math.cos(q); x3 = x + (r-sr-14)*Math.sin(q); y3 = y - (r-sr-13)*Math.cos(q); } if(q>=Math.PI/2 && q<Math.PI){ x1 = x + r*Math.sin(Math.PI-q); y1 = y + r*Math.cos(Math.PI-q); x2 = x + (r-sr)*Math.sin(Math.PI-q); y2 = y + (r-sr)*Math.cos(Math.PI-q); x3 = x + (r-sr-12)*Math.sin(Math.PI-q); y3 = y + (r-sr-5)*Math.cos(Math.PI-q); } if(q>=Math.PI && q<3*Math.PI/2){ x1 = x - r*Math.cos(3*Math.PI/2-q); y1 = y + r*Math.sin(3*Math.PI/2-q); x2 = x - (r-sr)*Math.cos(3*Math.PI/2-q); y2 = y + (r-sr)*Math.sin(3*Math.PI/2-q); x3 = x - (r-sr-6)*Math.cos(3*Math.PI/2-q); y3 = y + (r-sr-5)*Math.sin(3*Math.PI/2-q); } if(q>=3*Math.PI/2 && q<2*Math.PI){ x1 = x - r*Math.sin(2*Math.PI-q); y1 = y - r*Math.cos(2*Math.PI-q); x2 = x - (r-sr)*Math.sin(2*Math.PI-q); y2 = y - (r-sr)*Math.cos(2*Math.PI-q); x3 = x - (r-sr-0)*Math.sin(2*Math.PI-q); y3 = y - (r-sr-15)*Math.cos(2*Math.PI-q); } ctx.lineWidth = "1"; ctx.moveTo(x2,y2); ctx.lineTo(x1,y1); ctx.stroke(); if(i%5 == 0){ if(time == 0){ ctx.fillText("12",x3-8,y3); }else if(time == 3){ ctx.fillText(time,x3+3,y3+5); }else if(time == 6){ ctx.fillText(time,x3-3,y3+2); }else if(time == 9){ ctx.fillText(time,x3+3,y3+5); }else{ ctx.fillText(time,x3,y3); } } } } function move(hour,min,sec){ //指针移动 if(hour >= 12){ hour -= 12; } hour+= min/60; var arrSec = calculate(sec,30); var arrMin = calculate(min,40); var arrHour = calculate(hour*5+0.2,50); var time;//定时器 ctx.lineWidth = "1"; ctx.moveTo(x,y); ctx.lineTo(arrSec[0],arrSec[1]); ctx.stroke(); ctx.moveTo(x,y); ctx.lineTo(arrMin[0],arrMin[1]); ctx.stroke(); ctx.moveTo(x,y); ctx.lineTo(arrHour[0],arrHour[1]); ctx.stroke(); drawClock(); time = setInterval(function(){ var now=new Date(); var hours=now.getHours(); var minutes=now.getMinutes(); var seconds=now.getSeconds(); hour = hours;min = minutes;sec = seconds; if(hour >= 12){ hour -= 12; } hour+= min/60; var arrSec = calculate(sec,30); var arrMin = calculate(min,40); var arrHour = calculate(hour*5+0.2,50); ctx.clearRect(0,0,800,600); ctx.moveTo(x,y); ctx.lineTo(arrSec[0],arrSec[1]); ctx.stroke(); ctx.moveTo(x,y); ctx.lineTo(arrMin[0],arrMin[1]); ctx.stroke(); ctx.moveTo(x,y); ctx.lineTo(arrHour[0],arrHour[1]); ctx.stroke(); drawClock(); drawClock(); },1000); } function calculate(i,sr){ //计算指针的位置 var q = i*2*Math.PI/60; var m = new Array(); if(q>=0 && q<Math.PI/2){ m[0] =x + (r-sr)*Math.sin(q); m[1] = y - (r-sr)*Math.cos(q); } if(q>=Math.PI/2 && q<Math.PI){ m[0] = x + (r-sr)*Math.sin(Math.PI-q); m[1] = y + (r-sr)*Math.cos(Math.PI-q); } if(q>=Math.PI && q<3*Math.PI/2){ m[0] = x - (r-sr)*Math.cos(3*Math.PI/2-q); m[1] = y + (r-sr)*Math.sin(3*Math.PI/2-q); } if(q>=3*Math.PI/2 && q<2*Math.PI){ m[0] = x - (r-sr)*Math.sin(2*Math.PI-q); m[1] = y - (r-sr)*Math.cos(2*Math.PI-q); } return m; } function resize(){ //监听浏览器大小改变 var w = window.innerWidth; x = window.innerWidth/2; y = window.innerHeight/2; if(w >= 750){ r = 80; }else if(w < 750){ r = 60; } console.log(w); var now=new Date(); var hours=now.getHours(); var minutes=now.getMinutes(); var seconds=now.getSeconds(); drawClock(); move(hours,minutes,seconds); } window.addEventListener("resize", resize); })(); </script> </body> </html> [/code] -
![网页分享按钮]()
网页分享按钮 前段时间想将自己的博客弄个可以分享的地方，可是采用百度分享的代码，不知道怎么弄的一直不能运行，于是自己就写了一个。 首先先展示一下效果图: 图中的分享按钮是一直悬浮在网页的右中的位置，方便选择。从图中可以看出，有几个常用的平台分享，当然自己也可以修改代码，做成自己需要的样子。 这是css代码： [code lang="css"] <style type="text/css"> .share{ position: fixed; top: 50%; right: -75px; width: 100px; height: 150px; margin-top: -75px; transition: 1s; float: left; } .share .share_btn{ width: 25px; height: 50px; background: #5b4a9b; color: white; text-align: center; margin-top: 50px; border-radius: 5px; cursor: pointer; float: left; line-height: 25px; } .share .share_content{ margin-top: 0px; width: 75px; height: 100%; background: #5b4a9b; margin-left: 25px; border: 1px solid transparent; box-sizing: border-box; } .share .share_content ul{ width: 100%; margin-bottom: 0; margin-left: 0px; margin-top: 15px; } .share .share_content ul li{ list-style: none; width: 32px; height: 32px; float: left; margin-left: 3px; margin-top: 5px; background: white; cursor: pointer; } .share .share_content li a{ display: block; width: 100%; height: 100%; } .share .share_content li a i{ display: block; width: 100%; height: 100%; text-align: center; } .share .share_content li a .share1{ margin-left: -10px; margin-top: -10px; } .share .share_content li a .share2{ margin-left: -10px; margin-top: 0px; } </style> [/code] 这里是html代码，放在body里面： [code lang="html"] <div class="share"> <div class="share_btn"> <span>分享</span> </div> <div class="share_content"> <ul> <li><a class="icon" target="_blank"><img src="http://zhinianboke.com/wp-content/uploads/2017/10/qzone.png" class="share2"/></i></a></li> <li><a class="icon" target="_blank"><img src="http://zhinianboke.com/wp-content/uploads/2017/10/douban.png" class="share2"/></i></a></li> <li><a class="icon" target="_blank"><i class="fa fa-qq share1"></i></a></li> <li><a class="icon" target="_blank"><i class="fa fa-weibo share1"></i></a></li> <li><a class="icon" target="_blank"><i class="fa fa-renren share1"></i></a></li> <li><a class="icon" target="_blank"><i class="fa fa-long-arrow-right share1"></i></a></li> </ul> </div> </div> [/code] 当然最重要的还是js代码了： [code lang="js"] <script type="text/javascript"> (function(){ /** *站点：执念博客 *作者：执念 *网址：http://zhinianboke.com */ var share = document.getElementsByClassName("share")[0]; var share_btn = document.getElementsByClassName("share_btn")[0]; var share_content = document.getElementsByClassName("share_content")[0]; var oli = share_content.getElementsByTagName("li"); var url = ""; var url1 = window.location.href; var url2 = url1.split("="); if(url1){ url = url2[0]+"%3D"+url2[1]; } var title = document.title; share_btn.onmouseover = function(){ share.style.right = 0; } share.onmouseleave = function(){ share.style.right = -75+"px"; } for(var i=0;i<oli.length;i++){ oli[i].index = i; oli[i].onclick = function(){ switch(this.index){ case 0: var a = this.getElementsByTagName("a")[0]; a.href = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=执念博客&url="+url+"&title="+title; break; case 1: var a = this.getElementsByTagName("a")[0]; a.href = "http://www.douban.com/recommend/?url="+url+"&title="+title; break; case 2: var a = this.getElementsByTagName("a")[0]; a.href = "http://connect.qq.com/widget/shareqq/index.html?url="+url+"&title="+title; break; case 3: var a = this.getElementsByTagName("a")[0]; a.href = "http://service.weibo.com/share/share.php?title="+title+"&url="+url; break; case 4: var a = this.getElementsByTagName("a")[0]; a.href = "http://widget.renren.com/dialog/share?resourceUrl="+url+"&title="+title+"&description=执念博客"; break; case 5: share.style.right = -75+"px"; break; } } } })(); </script> [/code] 代码全都给大家，我想做网站的大概都简单的知道这些代码该放在哪里的，因此我也就不在这里赘述了。如果有不会的可以在下方留言，我会回复的。 -
ajax的具体步骤 今天给大家介绍的是ajax的具体步骤，数据的提交最常用的就是“get”方式和“post”方式，因此下面介绍的就是ajax的这两种方式 第一种就是“get”方式：[code lang="js"] function creatXhr(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ //ie5,ie6不支持XMLHttpRequest xhr = new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; } var xhr = creatXhr(); if(xhr != null){ xhr.open("get","server.php?name=guo",true); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status === 200){ doResponse(xhr); }else{ alert("请求出错!"); } } } xhr.send(null); } function doResponse(xhr){ var str = xhr.responseText;//其中xhr.responseText就是后天传送过来的数据 alert(str); } [/code]需要注意的是“get”方式中的xhr.send(null);代表发送的意思，里面必须是null,发送的数据在xhr.open中的url拼接而成。第二种的“post”方式：[code lang="js"] function creatXhr(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ //ie5,ie6不支持XMLHttpRequest xhr = new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; } var xhr = creatXhr(); if(xhr != null){ xhr.open("post","server.php",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status === 200){ doResponse(xhr); }else{ alert("请求出错!"); } } } xhr.send("name=li"); } function doResponse(xhr){ var str = xhr.responseText; alert(str); } [/code]ajax的“post”方式比“get”方式多了一句xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");，这一句是必不可少的，要不然数据是发送不过去的。发送的数据在xhr.send()中拼接而成。其中两种方式用的php文件中的代码也给大家，[code lang="php"] <?php $name = $_REQUEST['name']; if($name){ echo $name; }else{ echo "error"; } ?> [/code]大家可以自行尝试，如果有什么疑问，可以在下方留言。
-
求元素距离浏览器上边和左边的距离 offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置通俗点说，offsetLeft和offsetTop求得是该元素距离其父元素的距离，而不是真正意义上距离浏览器的距离，因此需要使用以下代码进行求解： [code lang="js"] var top = this.offsetTop; var left = this.offsetLeft; while(this = this.offsetParent){ top+=this.offsetTop; left+=this.offsetLeft; } [/code] 其中this代表的是当前元素，通过while循环，一级一级的求出距离父元素的距离，则最后的结果就是该元素距离浏览器真实的距离。不过最后由于浏览器存在滚动条，可能导致距离不准确，因此需要减去滚动条滚动的距离。 [code lang="js"] top-=document.body.scrollTop; left-=document.body.scrollLeft; [/code] 最后得到的top和left就是该元素距离浏览器可视区域的真实距离。
