搜索到
52
篇与
编程相关
的结果
-
![网页分享按钮]()
网页分享按钮 前段时间想将自己的博客弄个可以分享的地方，可是采用百度分享的代码，不知道怎么弄的一直不能运行，于是自己就写了一个。 首先先展示一下效果图: 图中的分享按钮是一直悬浮在网页的右中的位置，方便选择。从图中可以看出，有几个常用的平台分享，当然自己也可以修改代码，做成自己需要的样子。 这是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]大家可以自行尝试，如果有什么疑问，可以在下方留言。
-
CSS——display:none与visibility:hidden的区别 1.display:none与visibility:hidden的区别 display:none隐藏对应的元素并且其他元素会挤占该元素原来的空间，即不为被隐藏的对象保留其物理空间，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”; visibility:hidden隐藏对应的元素但其他元素不会挤占该元素原来的空间，即为被隐藏的对象保留其物理空间，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。 记住这两点之后也就不难区分这两者了，如果可以理解为“none”就是没有的意思，“hidden”只是单纯的隐藏之意，这样就可以更好的记住了。
-
虚拟主机多站点配置 如果你只有一个虚拟主机，但是却想要建立多个站点，这时候该怎么办呢？ 下面就带着大家来解决这个问题 第一步，在站点根目录建立一个index.html文件，将以下代码复制进去 [code lang="js"] <script type="text/javascript"> /* 站点：执念博客 作者：执念 网址：http://zhinianboke.com 声明：转载请标明本站链接，谢谢合作 */ if(this.location=="http://first.zhenmafan.top/"){ this.location.href="first/index.php"; }else if(this.location=="http://second.zhenmafan.top/"){ this.location.href="second/index.php"; } </script> [/code] 这段代码根据你输入的网址，自动判断属于哪个网站，也就会自动打开对应的内容。 建立两个目录，将两个网站分别放在不同的目录中。我这里建立的目录分别是first和second。 其他的我就不解释了，因为稍微懂点代码的网友都有能力将这段代码改成自己想要的，如果有什么疑问，可以在下方留言。
-
wordpress鼠标点击特效 不知大家有没有看到过别人的博客页面，鼠标每一次点击都会有文字出来然后慢慢移动消失，是不是觉得很炫酷，下面就带着大家给自己的博客添加这种效果。 首先，打开正在使用主题中的footer.php文件 复制下面的代码，然后放在 [code lang="php"] <?php wp_footer(); ?> [/code] 的上面，注意不要放错位置。（在最下面） [code lang="js"] <script> /* 鼠标特效 */ /* 站点：执念博客 作者：执念 网址：http://zhinianboke.com */ var a_index = 0; window.onload=function(){ var bo = document.getElementsByTagName("body")[0]; bo.onclick = function(e){ var e = e || window.event; var x = e.pageX; var y = e.pageY; var a = new Array("执念", "博客"); var span = document.createElement("span"); span.style.position = "absolute"; span.style.top = y+"px"; span.style.left = x+"px"; span.style.opacity = 1; span.style.zIndex = 99999999; span.innerHTML = a[a_index]; a_index = (a_index+1)%a.length; span.style.color = "red"; bo.appendChild(span); animation(span,"opacity",0,2000); var top = parseInt(getStyle(span,"top")); animation(span,"top",top-200,2000); function animation(obj,attr,value,time){ var nowTime = new Date(); var nowStyle = parseInt(getStyle(obj,attr)); var timer = setInterval(function(){ var n = (new Date() - nowTime)/time; if(n>=1){ n=1; removeElement(span); clearInterval(timer); } if(attr=="opacity"){ obj.style[attr]=(nowStyle+n*(value-nowStyle)); } obj.style[attr]=(nowStyle+n*(value-nowStyle))+"px"; },1000/60); } function getStyle(obj,attr){ //获得元素的属性 return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; } function removeElement(obj){ //删除节点 var parentElement = obj.parentNode; if(parentElement){ parentElement.removeChild(obj); } } } } </script> [/code] 保存之后打开自己的网站，发现是不是随着鼠标点击就会出现你设置的文字了。
-
![3D烟花效果]()
-
![网页版表白]()
网页版表白 你是不是有心仪的意中人呢，是否还在为找不到创意的表白方式而发愁呢。不用着急下面就为大家介绍一款创意的表白方式，用网页向ta展示你的心意。请欣赏效果图：效果预览该网页左侧是一朵樱花树，樱花随风飘落，樱花树下展示了你们相爱的时间，该时间是动态展示的。如果你想修改这个时间，你需要在showLove文件夹中的index.html文件中修改```javascript var oldDate=new Date("2012/05/13 16:00:00"); ```修改成你定义的时间。该文件可以使用记事本打开。网页的右侧是你想对ta说的话，这些话是以打字的形式一个一个展现出来的，让ta看起来是你在用心的叙述。如果你想修改这些话，同样需要在showLove文件夹中的index.html文件中找到这些话加以修改。网页配有背景音乐，如果你想更换音乐，可以将showLove文件夹下的music.mp3文件更换成你想要的音乐，但文件名需要一致，不能更改，如果需要源码请在下方评论留言。{message type="success" content="源码如下"/} 隐藏内容，请前往内页查看详情 -
![网页版小游戏之——2048]()
网页版小游戏之——2048 之前比较火的小游戏2048，闲来无事，于是就做了一款网页版的小游戏。下面就跟大家分享一下开发的过程吧。 下面是成品图 其实，开发网页版的游戏最好莫过于使用canvas标签了，不过鉴于该游戏的特殊性，因此只使用了html中的无序列表，利用css对每个li进行了布局，形成了如上图所示的样子。 同时做到四个方向的操作是有一定难度的，不妨先完成一个方向的操作，只要完成一个方向的所有操作，那么另外三个方向的操作也就可以仿照了。 比如说先做向左运动的操作，我将其分为四行，先对第一行分析，将每个li的内容赋值给一个数组，然后从左到右的方向遍历数组，遇到后一个数与前一个相同执行相加操作，如果不相同则向左移动，然后对其他三行也进行此操作。 其中，我认为比较重要的部分就是这段代码： [code lang="js"] var nextI; for (var i=m;i<n;i=i+w){ //先找nextI nextI = -1; for (var j=i+w;j<n;j=j+w){ if(arr[j] != 0) { nextI = j; break; } } if (nextI != -1) { //存在下个不为0的位置 if (arr[i] == 0){ arr[i] = arr[nextI]; arr[nextI] = 0; i = i - w; flag = true; }else if(arr[i] == arr[nextI]){ arr[i] = arr[i] *2; arr[nextI] = 0; count += 5; flag = true; } } } [/code] 这段代码可以说是这个游戏的核心，对生成的每一个数组进行操作，最终达到了整个游戏的实现。 最后的上色和分数的增加由于没有什么难度也就不说了。以下是2048小游戏的演示地址：http://zhinianboke.com/guozhongbao/example/2048/index.html
