搜索到
29
篇与
技术分享
的结果
-
『修复』『插件』Typecho文章内容分页插件修复版（适配Joe编辑器） 前言最近在学习web开发，每天跟着教学视频学习，我觉得每一个都是重点，所以有很多学习笔记我将学习笔记放在了自己的博客，一是为了记录自己学习内容，二是为了复习方便但是最近学习DOM的时候，发现有很多要点，而我又不想将其分篇来写，所以导致一篇文章有很多内容内容一多，阅读的时候就很不方便，因为滚动条变小了，而且一直翻不到底也很容易让人放弃所以我就去寻找有没有将文章分页的方法，好不容易找到一个方法，但无奈自己才疏学浅无法将其应用到typecho上来只好退而求其次，寻找有么有现成的方法或者插件，功夫不负有心人，终于还是让我找到了一款插件但是版本很老，是2010年的一款插件，已经不支持typecho1.1了索性到google去找找，没想到意外发现了一位大佬修复了兼容1.1的问题可是由于版本较早，且当年互联网的技术和审美不如现在，所以虽然能用也还是存在一些小问题，比如支持第三方编辑器时，快捷插入键失效且显示在页面底部于是自己动手修复了一下，并对样式进行了一些修改，虽不够完美，但起码适配当前主题成果展示{tabs}{tabs-pane label="前端展示"}{/tabs-pane}{tabs-pane label="编辑器展示"}{/tabs-pane}{/tabs}插件分享本插件主要适配Joe主题，如其他主题需要使用，可以自行修改博主也可以提供一些小的技术支持，喜欢的话不妨打赏博主，万分感谢！隐藏内容，请前往内页查看详情{callout color="#ef6d4d"}转载来源： {abtn color="#ff0d00" href="https://www.fuuuy.cn/archives/462.html" content="六六丶"/}{/callout} -
PHP版抖音去水印源代码 原理其实就是获取无水印的原地址，如果视频本身就有水印那以下代码无效<?php // 你只需要修改这个地方的地址就可以了 $url = ('https://v.douyin.com/WuRMPV/'); $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); // 不需要页面内容 curl_setopt($ch, CURLOPT_NOBODY, 1); // 不直接输出 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); // 返回最后的Location curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1); curl_exec($ch); $info = curl_getinfo($ch,CURLINFO_EFFECTIVE_URL); curl_close($ch); // 重定向地址 $url = 'https://www.iesdouyin.com/web/api/v2/aweme/iteminfo/?item_ids='.(explode('/',$info)[5]); $ch = curl_init($url); //初始化 curl_setopt($ch, CURLOPT_HEADER, 0); // 不返回header部分 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // 返回字符串，而非直接输出 curl_setopt($ch, CURLOPT_USERAGENT, "Dalvik/1.6.0 (Linux; U; Android 4.1.2; DROID RAZR HD Build/9.8.1Q-62_VQW_MR-2)"); curl_setopt($ch, CURLOPT_REFERER, "-"); $result = curl_exec($ch); curl_close($ch); $result = json_decode($result, true); $url = $result['item_list'][0]['video']['play_addr']['url_list'][0]; $url = str_replace('playwm','play', $url); $ch = curl_init($url); //初始化 curl_setopt($ch, CURLOPT_HEADER, 0); // 不返回header部分 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // 返回字符串，而非直接输出 curl_setopt($ch, CURLOPT_USERAGENT, "Dalvik/1.6.0 (Linux; U; Android 4.1.2; DROID RAZR HD Build/9.8.1Q-62_VQW_MR-2)"); curl_setopt($ch, CURLOPT_REFERER, "-"); $response = curl_exec($ch); curl_close($ch); $response = explode('"',$response); // 在页面上输出视频 header('location:'.$response[1]); {callout color="#ef6d4d"}转载来源： {abtn color="#ff0d00" href="http://gxxblw.com/2022/03/04/132.html" content="哈根达斯"/}{/callout}
-
『笔记』JavaScript基础学习笔记 6 DOM（文本对象模型）（20）鼠标拖拽的事件拖拽(一、二)<html> <head> <style> #box1{ width:100px; height:100px; background-color:red; position:absolute; } #box2{ width:100px; height:100px; background-color:yellow; position:absolute; left:200px; top:200px; } </style> <script> window.onload = function(){ // 拖拽box1 /* 拖拽的流程： 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 3.当鼠标松开时，被拖拽元素国定在当前位置 onmouseup */ // 获取box1 var box1 = document.getElementById("box1"); // 当鼠标在被拖拽元素上按下时，开始拖拽 box1.onmousedown = function(event){ // 设置box1捕获所有鼠标按下的事件 // setCapture()只有IE支持，Chrome不支持会报错 // 当调用一个元素的setCapture()方法后，这个元素将会把下一次所有的鼠标按下的事件捕获到自身上 /*if(box1.setCapture){ box1.setCapture(); }*/ box1.setCapture && box1.setCapture(); event = event || window.event; // div的水平偏移量:鼠标.clientX - 元素.offsetLeft // div的垂直偏移量:鼠标.clientY - 元素.offsetTop var ol = event.clientX - box1.offsetLeft; var ot = event.clientY - box1.offsetTop; // 为document绑定一个onmousemove事件 document.onmousemove = function(event){ event = event || window.event; // =当鼠标移动时被拖拽元素跟随鼠标移动 // 获取鼠标的坐标 var left = event.clientX - ol; var top = event.clientY - ot; // 修改box1的位置 box1.style.left = left+"px"; box1.style.top = top+"px"; }; // 为元素绑定一个鼠标松开事件 document.onmouseup = function(){ // 当鼠标松开时，被拖拽元素国定在当前位置 // 取消document的onmousemove事件 document.onmousemove = null; // alert("鼠标松开了"); // 取消document的onmouseup事件 document.onmouseup = null; // 当鼠标松开时，取消对事件的捕获 box1.releaseCapture && box1.releaseCapture(); }; // 当拖拽一个网页中的内容，浏览器会默认去搜索页面，会导致拖拽功能的异常，这是浏览器的默认行为 // 如果不希望这个行为发生，则可以通过return false来取消默认行为 // 但是不支持IE8及以下浏览器 return false; }; }; </script> </head> <body> 我是一段文字 <div id="box1"></div> <div id="box2"></div> </body> </html>box的偏移量=鼠标的偏移量-元素的偏移量捕获测试<html> <head> <script> window.onload = function(){ // 分别为两个按钮绑定单击响应函数 var btn01 = document.getElementById("btn01"); var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ alert(1); }; btn02.onclick = function(){ alert(2); }; // 设置btn01对鼠标按下相关的事件进行捕获 // 当调用一个元素的setCapture()方法后，这个元素将会把下一次所有的鼠标按下的事件捕获到自身上 btn01.setCapture(); }; </script> </head> <body> <button id="btn01">按钮01</button> <button id="btn02">按钮02</button> </body> </html>拖拽（三）<html> <head> <style> #box1{ width:100px; height:100px; background-color:red; position:absolute; } #box2{ width:100px; height:100px; background-color:yellow; position:absolute; left:200px; top:200px; } </style> <script> window.onload = function(){ // 拖拽box1 /* 拖拽的流程： 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 3.当鼠标松开时，被拖拽元素国定在当前位置 onmouseup */ // 获取box1 var box1 = document.getElementById("box1"); // 获取box1 var box1 = document.getElementById("box1"); // 获取imh1 var img1 = document.getElementById("img1"); // 开启box1的拖拽 drag(box1); // 开启box2的拖拽 drag(box2); // 开启img1的拖拽 drag(img1); }; // 提取一个专门用来设置拖拽的函数 // 参数：开启拖拽的元素 function drag(obj){ // 当鼠标在被拖拽元素上按下时，开始拖拽 obj.onmousedown = function(event){ // 设置box1捕获所有鼠标按下的事件 // setCapture()只有IE支持，Chrome不支持会报错 // 当调用一个元素的setCapture()方法后，这个元素将会把下一次所有的鼠标按下的事件捕获到自身上 /*if(box1.setCapture){ box1.setCapture(); }*/ obj.setCapture && obj.setCapture(); event = event || window.event; // div的水平偏移量:鼠标.clientX - 元素.offsetLeft // div的垂直偏移量:鼠标.clientY - 元素.offsetTop var ol = event.clientX - obj.offsetLeft; var ot = event.clientY - obj.offsetTop; // 为document绑定一个onmousemove事件 document.onmousemove = function(event){ event = event || window.event; // =当鼠标移动时被拖拽元素跟随鼠标移动 // 获取鼠标的坐标 var left = event.clientX - ol; var top = event.clientY - ot; // 修改box1的位置 obj.style.left = left+"px"; obj.style.top = top+"px"; }; // 为元素绑定一个鼠标松开事件 document.onmouseup = function(){ // 当鼠标松开时，被拖拽元素国定在当前位置 // 取消document的onmousemove事件 document.onmousemove = null; // alert("鼠标松开了"); // 取消document的onmouseup事件 document.onmouseup = null; // 当鼠标松开时，取消对事件的捕获 obj.releaseCapture && obj.releaseCapture(); }; // 当拖拽一个网页中的内容，浏览器会默认去搜索页面，会导致拖拽功能的异常，这是浏览器的默认行为 // 如果不希望这个行为发生，则可以通过return false来取消默认行为 // 但是不支持IE8及以下浏览器 return false; }; }; </script> </head> <body> 我是一段文字 <div id="box1"></div> <div id="box2"></div> <img src="https://cdn.jsdelivr.net/gh/aill66/cdn@latest/usr/uploads/2021/08/809131067.png" id="img1" style="width:100px; position:absolute;" </body> </html>（21）滚轮的事件<html> <head> <style> #box1{ width:100px; height:100px; background-color:red; } </style> <script> window.onload = function(){ // 当鼠标滚轮向下滚动时box1变长，当滚轮向上滚动时box1变短 var box1 = document.getElementById("box1"); // 为box1绑定一个鼠标滚动事件 /*onmousewheel鼠标滚轮滚动事件，会在鼠标滚轮滚动时触发，火狐不支持 * **在火狐中需要使用DOMMouseScroll来绑定滚轮滚动事件 **该事件需要通过addEventListener()函数来绑定 */ /*function fun(){ alert("我滚了"); }; box1.onmousewheel = fun; bind(box1,"DOMMouseScroll",fun); */ box1.onmousewheel = function(event){ event = event || window.event; // alert("我滚了"); // 判断鼠标滚轮的滚动方向 // event.wheelDelta 可以获取鼠标滚轮滚动的方向 // 向上滚动为正值，向下滚动为负值 // alert(event.wheelDelta); // 火狐中不支持wheelDelta /*火狐中使用event.detail来获取滚轮滚动的方向 **向上滚动为负值，向下滚动为正值 */ // alert(event.detail); // 当鼠标滚轮向下滚动时box1变长，当滚轮向上滚动时box1变短 if(event.wheelDelta > 0 || event.detail < 0){ // alert("向上滚"); // 向上滚box1变短 box1.style.height = box1.clientHeight - 10 + "px"; }else{ // alert("向下滚"); // 向下滚box1变长 box1.style.height = box1.clientHeight + 10 + "px"; } // 使用addEventListener()方法绑定的响应函数，取消默认行为时不能使用return false; // 需要使用event.preventDefault();来取消，不支持IE8及以下浏览器 event.preventDefault && event.preventDefault();//取消火狐的默认行为 // 当滚轮滚动时，如果浏览器有滚动条，浏览器的滚动条会随着滚动 // 这是浏览器默认行为，可以使用return false;取消默认行为 return false; }; // 为火狐绑定滚轮事件 bind(box1,"DOMMouseScroll",box1.onmousewheel) }; function bind(obj,eventStr,callback){ if(obj.addEventListener){ // 大部分浏览器兼容的方式 obj.addEventListener(eventStr,callback,flase); }else{ // this是由调用方式决定 // 可以使用匿名函数调用回调函数，这样就可以指定this // IE8及以下浏览器，加一个on // obj.attachEvent("on"+eventStr,callback); obj.attachEvent("on"+eventStr,function(){ // 在匿名函数中调用回调函数 callback.call(obj); }); } }; </script> </head> <body style="height:2000px"> <div id="box1"></div> </body> </html>（22）键盘的事件<html> <head> <script> window.onload = function(){ /* 键盘事件 onkeydown 按键被按下，如果一直按着某个按键不松手，事件会一直触发 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快触发，是为了防止误操作的发生 onkeyup 按键被松开，松开一次触发一次 键盘事件一般都会绑定给一些可以获取到焦点的对象或者document */ document.onkeydown = function(event){ event = event || window.event; // 可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下 // 除了keyCode，事件对象中还提供了几个固定属性 /*altKey 按键Alt是否被按下 **ctrlKy 按键Ctrl是否被按下 **shiftKey 按键Shift是否被按下 如果被按下则返回true否则返回false */ // 判断y键是否被按下 // 判断y键和Ctrl键是否被同时按下 if(event.keyCode == 89 && event.ctrlKey){ console.log("按键y和Ctrl都被按下了"); } }; document.onkeyup = function(){ console.log("按键被松开了"); }; // 获取input var input = document.getElementsByTagName("input")[0]; input.onkeydown = function(event){ event = event || window.event; console.log("按键被按下"); // 数字的keycode为48-57 // 使文本框中不能输入数字 if(event.keyCode >= 48 && event.keyCode <= 57){ // 在文本框中输入内容属于onkeydown的默认行为 // 如果在onkeydown中取消了默认行为，则输入的内容不会出现在文本框中 return false; } }; }; </script> </head> <body> <!-- <div style="width:100px;height:100px;background-color:red;" id="box1"></div> --> <input type="text" /> </body> </html>键盘移动vid<html> <head> <style> #box1{ width:100px; height:100px; background-color:red; position:absolute; } </style> <script> // 使div可以根据不同的方向键向不同的方向移动 var box1 = document.getElementById("box1"); document.onkeydown = function(event){ event = event || window.event; // 定义一个变量来表示移动的速度 var speed = 20; // 当用户按了Ctrl以后速度加快 if(event.ctrlKey){ spend = 200; } // keyCode 37左 38上 39右 40下 switch(event.keyCode){ case 37: // alert("向左"); box1.style.left = box1.offsetLeft -speed +"px"; break; case 39: // alert("向右"); box1.style.left = box1.offsetLeft +speed +"px"; break; case 38: // alert("向上"); box1.style.top = box1.offsetTop -speed +"px"; break; case 40: // alert("向下"); box1.style.top = box1.offsetTop +speed +"px"; break; } }; </script> </head> <body> <div id="box1"></div> </body> </html>BOM（浏览器对象模型）BOM可以通过JS来操作浏览器在BOM中提供了一组对象，用来完成对浏览器的操作BOM对象{alert type="success"}Window 代表的是整个浏览器的窗口，同时也是网页中的全局对象Navigator 代表当前浏览器的信息，通过该对象可以识别不同的浏览器Location 代表当前浏览器的地址栏信息，通过location可以获取地址栏信息或者操作浏览器跳转页面History 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问有效Screen 代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息这些BOM对象在浏览器中都是作为window对象的属性保存的{/alert}// console.log(window.navigator); console.log(navigator); console.log(location); console.log(history);一、Navigator（浏览器信息）代表当前浏览器的信息，通过该对象可以识别不同的浏览器由于历史原因（网景公司倒闭了），Navigator对象中的大部分属性都已经不能识别浏览器了一般只会使用userAgent来判断浏览器的信息userAgent是一个字符串，这个字符串包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent// appCodeName 返回浏览器名称的代码 // appName 返回浏览器的名称 // userAgent 返回一个字符串来描述浏览器的信息 // alert(navigator.appName); // 在IE11中已经将微软和IE相关的标识都去除了，所以基本不能通过userAgent来识别浏览器是不是IE了 var ua = navigator.userAgent; console.log(ua); if(/firefox/i.test(ua)){ alert("我是火狐"); }else if(/chrome/i.test(ua)){ alert("我是Chrome"); }else if(/msie/i.test(ua)){ alert("我是IE浏览器"); }else if("ActiveXObject" in window){ alert("你是IE11，我已经抓住你了"); } // 如果不能通过userAgent来判断浏览器信息，还可以通过一些浏览器中特有的对象来判断浏览器的信息 // 比如：ActiveXObject // alert("ActiveXObject" in window); if("ActiveXObject" in window){ alert("你是IE，我已经抓住你了"); }else{ alert("你不是IE"); } 二、History（历史记录）代表浏览器的历史记录，可以通过该对象来操作浏览器向前或向后翻页<html> <head> <script> // 可以通过History来操作浏览器向前或向后翻页 // length属性可以获取到当次访问的连接数量 // alert(history.length); window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ // alert(history.length); // back()方法可以用来回退到上一个页面，作用和浏览器的返回按钮一样 // history.back(); // forward()方法可以用来跳转到下一个页面，作用和浏览器的返回按钮一样 // history.forward(); // go()方法可以跳转到指定页面，需要一个整数作为参数 // 1:表示向前跳转一个页面，相当于forward() // 2:表示向前跳转两个页面 // -1:表示向后跳转一个页面，相当于back() // -2:表示向后跳转两个页面 history.go(1); }; }; </script> </head> <body> <button id="btn">点我一下</button> <h1>History</h1> <a href="">去下一个页面</a> </body> </html>三、Location（浏览器地址栏）该对象中封装了浏览器的地址栏的信息<html> <head> <script> window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ // 如果直接打印Location则可以获取到地址栏的信息（当前页面的完整路径） // alert("location"); // 如果直接将location修改为一个完整的路径（或相对路径），则页面会自动跳转到该路径，并且会生成相应的历史记录 // location = "https://www.baidu.com"; // assign()用来跳转到其他页面，作用和直接修改location一样 // location.assign("https://www.baidu.com"); // reload()重新加载当前页面,作用和刷新按钮一样 // 在方法中传递一个true作为参数，则会强制清空缓存刷新 // location.reload(true); // replace()可以使用一个新的页面替换当前页面，调用完毕也会跳转到新的页面，但是不会生成历史记录（不能使用回退功能） location.replace("https://www.baidu.com"); }; }; </script> </head> <body> <button id="btn">点我一下</button> </body> </html>四、Window（浏览器的窗口）window的方法1、 定时调用<html> <head> <script> window.onload = function(){ var count = document.getElementById("count"); // 使count中的内容自动切换 // js的程序执行速度是非常快的 // 如果希望一段程序可以每间隔一段时间执行一次，可以使用定时调用 /*for(var i=0; i<100; i++){ count.innerHTML = i; alert("点我"); }*/ // setInterval()定时调用：可以将一个函数每隔一段时间执行一次 // 参数：1.回调函数，该函数会每隔一段时间被调用一次，2.每次调用回调函数的时间单位为毫秒 // 返回值：返回一个Number类型的数据,这个数字用来作为定时器的唯一标识 var num = 1; var timer = setInterval(function(){ count.innerHTML = num++; if(num == 11){ // 关闭定时器 clearIntervol(timer); } },100); // console.log(timer); // clearIntervol()可以用来关闭一个定时器 // 方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器 // clearIntervol(timer); }; </script> </head> <body> <h1 id="count"></h1> </body> </html>（1）切换图片练习<html> <head> <script> window.onload = function(){ // 使图片可以自动切换 // 获取img标签 var img1 = document.getElementById("img1"); // 创建一个数组来保存图片的路径 var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"] // 创建一个变量来保存当前图片的索引 var index = 0; // 定义一个变量，用来保存定时器的标识 var timer; // 为btn01绑定一个单击响应函数 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ // 每点击一次按钮就会开启一个定时器，点击多次就会开启多个定时器，会导致切换速度加快，并且只能关闭最后一次开启的定时器 // 在开启定时器之前，需要将当前元素上的其他定时器关闭，避免开启多个定时器 clearInterval(timer); // 开启定时器来切换图片 timer = setInterval(function(){ // 使索引自增 index++; // 判断索引是否超过最大索引 /*if(index >= imgArr.length){ // 则将index设置为0，使其循环切换 index = 0; }*/ // index = index % imgArr.length; index %= imgArr.length; //与上面for循环功能一样 // 修改img1的src属性 img1.src = imgArr[index]; },1000); }; // 为btn02绑定一个单机响应函数 var btn02 = document.getElementById("btn01"); btn02.onclick = function(){ // 点击按钮以后停止图片的自动切换，关闭定时器 // clearInterval()可以接收任意参数，如果参数是一个有效的定时器标识则停止对应的定时器，如果参数不是有效的标识则什么也不做 clearInterval(timer); }; }; </script> </head> <body> <img id="img1" src="img/1.jpg" /> <br/><br/> <button id="btn01">开始</button> <button id="btn02">停止</button> </body> </html>（2）修改div移动练习<html> <head> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } </style> <script type="text/javascript"> //使div可以根据不同的方向键向不同的方向移动 /* * 按左键，div向左移 * 按右键，div向右移 * 。。。 */ window.onload = function(){ //定义一个变量，来表示移动的速度 var speed = 10; //创建一个变量表示方向 //通过修改dir来影响移动的方向 var dir = 0; //开启一个定时器，来控制div的移动 setInterval(function(){ /* * 37 左 * 38 上 * 39 右 * 40 下 */ switch(dir){ case 37: //alert("向左"); left值减小 box1.style.left = box1.offsetLeft - speed + "px"; break; case 39: //alert("向右"); box1.style.left = box1.offsetLeft + speed + "px"; break; case 38: //alert("向上"); box1.style.top = box1.offsetTop - speed + "px"; break; case 40: //alert("向下"); box1.style.top = box1.offsetTop + speed + "px"; break; } },30); //为document绑定一个按键按下的事件 document.onkeydown = function(event){ event = event || window.event; //当用户按了ctrl以后，速度加快 if(event.ctrlKey){ speed = 500; }else{ speed = 10; } //使dir等于按键的值 dir = event.keyCode; }; //当按键松开时，div不再移动 document.onkeyup = function(){ //设置方向为0 dir = 0; }; }; </script> </head> <body> <div id="box1"></div> </body> </html>2、 延时调用<html> <head> <script type="text/javascript"> var num = 1; //开启一个定时器 /*setInterval(function(){ console.log(num++); },3000);*/ /*延时调用， * 延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次 * 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次 * 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择*/ var timer = setTimeout(function(){ console.log(num++); },3000); //使用clearTimeout()来关闭一个延时调用 clearTimeout(timer); </script> </head> <body> </body> </html>（1）定时器的应用一<html> <head> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background-color: red; position: absolute; left: 0; } </style> <script type="text/javascript"> window.onload = function(){ //获取box1 var box1 = document.getElementById("box1"); //获取btn01 var btn01 = document.getElementById("btn01"); //定义一个变量，用来保存定时器的标识 var timer; //点击按钮以后，使box1向右移动（left值增大） btn01.onclick = function(){ //关闭上一个定时器 clearInterval(timer); //开启一个定时器，用来执行动画效果 timer = setInterval(function(){ //获取box1的原来的left值 var oldValue = parseInt(getStyle(box1,"left")); //在旧值的基础上增加 var newValue = oldValue + 1; //判断newValue是否大于800 if(newValue > 800){ newValue = 800; } //将新值设置给box1 box1.style.left = newValue + "px"; //当元素移动到800px时，使其停止执行动画 if(newValue == 800){ //达到目标，关闭定时器 clearInterval(timer); } },30); }; }; /*定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名 */ function getStyle(obj , name){ if(window.getComputedStyle){ //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj , null)[name]; }else{ //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; } }; </script> </head> <body> <button id="btn01">点击按钮以后box1向右移动</button> <br /><br /> <div id="box1"></div> <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div> </body> </html>（2）定时器的应用二<html> <head> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background-color: red; position: absolute; left: 0; } </style> <script type="text/javascript"> window.onload = function(){ //获取box1 var box1 = document.getElementById("box1"); //获取btn01 var btn01 = document.getElementById("btn01"); //获取btn02 var btn02 = document.getElementById("btn02"); //点击按钮以后，使box1向右移动（left值增大） btn01.onclick = function(){ move(box1 , 800 , 10); }; //点击按钮以后，使box1向左移动（left值减小） btn02.onclick = function(){ move(box1 , 0 , 10); }; }; //定义一个变量，用来保存定时器的标识 var timer; //尝试创建一个可以执行简单动画的函数 /*参数： * obj:要执行动画的对象 * target:执行动画的目标位置 * speed:移动的速度(正数向右移动，负数向左移动) */ function move(obj , target ,speed){ //关闭上一个定时器 clearInterval(timer); //获取元素目前的位置 var current = parseInt(getStyle(obj,"left")); //判断速度的正负值 //如果从0 向 800移动，则speed为正 //如果从800向0移动，则speed为负 if(current > target){ //此时速度应为负值 speed = -speed; } //开启一个定时器，用来执行动画效果 timer = setInterval(function(){ //获取box1的原来的left值 var oldValue = parseInt(getStyle(obj,"left")); //在旧值的基础上增加 var newValue = oldValue + speed; //判断newValue是否大于800 //从800 向 0移动 //向左移动时，需要判断newValue是否小于target //向右移动时，需要判断newValue是否大于target if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){ newValue = target; } //将新值设置给box1 obj.style.left = newValue + "px"; //当元素移动到0px时，使其停止执行动画 if(newValue == target){ //达到目标，关闭定时器 clearInterval(timer); } },30); } /*定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名 */ function getStyle(obj , name){ if(window.getComputedStyle){ //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj , null)[name]; }else{ //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; } }; </script> </head> <body> <button id="btn01">点击按钮以后box1向右移动</button> <button id="btn02">点击按钮以后box1向左移动</button> <br /><br /> <div id="box1"></div> <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div> </body> </html>（3）定时器的应用三<html> <head> <style> *{ margin:0; padding:0; } #box1{ width:100px; height:100px; background:red; position:absolute; left:0; } #box2{ width:100px; height:100px; background:blue; position:absolute; left:0; top:200px; } </style> <!-- 引入tools工具，调用切换动画函数 --> <script src="js/tools.js"></script> <script> window.onload = function(){ var box1 = document.getElementById("box1"); var btn01 = document.getElementById("btn01"); var btn02 = document.getElementById("btn02"); // 点击按钮后使box1向右移动（left增大） btn01.onclick = function(){ move(box1,"left",800,20); }; // 点击按钮后使box1向左移动（left减小） btn02.onclick = function(){ move(box1,"left",0,10); }; // 获取btn03 var btn03 = document.getElementById("btn03"); var box2 = document.getElementById("box2"); btn03.onclick = function(){ move(box2,"left",800,10); }; // 获取btn04 var btn04 = document.getElementById("btn04"); var box2 = document.getElementById("box2"); btn04.onclick = function(){ // move(box2,"top",800,10); // move(box2,"height",800,10); move(box2,"width",800,10,function(){ // alert("动画执行完了"); move(box2,"height",400,10,function(){ move(box2,"top",0,10,function(){ move(box2,"width",100,10,function(){ move(box2,"height",100,10,function(){ }); }); }); }); }); }; }; // 定义一个变量用来保存定时器的标识 // 目前定时器由全局变量timer保存，所有正在执行的定时器都在timer变量中保存 // var timer </script> </head> <body> <button id="btn01">点击按钮以后box1向右移动</button> <button id="btn02">点击按钮以后box1向左移动</button> <button id="btn03">点击按钮以后box2向右移动</button> <button id="btn04">测试按钮</button> <br/><br/> <div id="box1"></div> <div id="box2"></div> <div style="position:absolute;left:800px;top:0;width:0;height:1000px;border-left:1px black solid;"></div> </body> </html>tools.js（用于存放工具程序） // 尝试创建一个可以执行简单动画的函数 // 参数:obj:要执行动画的对象 // attr:要执行动画的样式，比如left height top // target:执行动画的目标位置 // speed:移动的速度（正数向右移动，负数向左移动） // callback:回调函数，将会在动画执行完毕以后执行 function move(obj,attr,target,speed,callback){ // 关闭上一个定时器 clearInterval(obj.timer); // 获取box1目前的位置 var current = parseInt(getStyle(obj,attr)); // 判断速度speed的正负值 // 如果从0向800移动则speed为正，如果从800向0移动则speed为负 if(current > target){ // 此时速度应为负值 speed = -speed; } // 开启一个定时器用来执行动画效果 // 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识 obj.timer = setInterval(function(){ // 获取box1原来的left值 var oldValue = parseInt(getStyle(obj,attr)); // 在旧值的基础上增加,给box添加移动速度 var newValue = oldValue + speed; // 向左移动时需要判断newValue是否小于target // 向右移动时需要判断newValue是否大于于target if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){ newValue = target; } // 将新值设置给obj obj.style[attr] = newValue + "px"; // 当box1移动到了0px时，使其停止执行动画 if(newValue == target){ // 达到目标关闭定时器 clearInterval(obj.timer); // 动画执行完毕，调用回调函数 callback && callback(); } },30); }; /* 定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名*/ function getStyle(obj,name){ if(window.getComputedStyle){ //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj,null)[name]; }else{ //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; } };3、 轮播图的改进<html> <head> <style> *{ margin:0; padding:0; } #outer{ width:520px; height:333px; margin:50px auto; background-color:greenyellow; padding:10px 0; /* 开启相对定位 */ position:relative; /* 裁剪溢出的内容 */ overflow:hidden; } /* 设置imgList */ #imgList{ /* 去除ul的项目符号 */ list-style:none; /* width:2600px; */ /* 开启绝对定位 */ position:absolute; /* 设置偏移量,默认为0 */ /* 每向左移动520px可以切换下一张图片 */ left:0; } /* 设置列表中li */ #imgList li{ /* 设置浮动 */ float:left; /* 设置左右外边距 */ margin:0 10px; } /* 设置导航按钮 */ #navDiv{ /* 开启绝对定位 */ position:absolute; /* 设置位置 */ bottom:15px; /* 设置居中显示 */ /* left:197px; */ } #navDiv a{ /* 设置超链接的浮动 */ float:left; width:15px; height:15px; background-color:red; /* 设置左右外边距 */ margin:0 5px; /* 设置透明 */ opacity:0.5; /* 兼容IE8透明 */ filter:alpha(opacity=50); } /* 设置鼠标移入的效果 */ #imgDiv a:hover{ background-color:black; } </style> <!-- 引入tools工具，调用切换动画函数 --> <script src="js/tools.js"></script> <script> window.onload = function(){ // 获取imgList var imgList = document.getElementById("imgList"); // 获取页面中所有的img标签 var imgArr = document.getElementsByTagName("img"); // 设置imgList的宽度 imgList.style.width = 520*imgArr.length + "px"; // 设置导航按钮居中 // 获取navDiv var navDiv = document.getElementById("navDiv"); // 获取outher var outer = document.getElementById("outer"); // 设置navDiv的left值 navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 +"px"; // 默认显示图片的索引 var index = 0; // 获取所有的a var allA = document.getElementsByTagName("a"); // 设置默认选中的效果 allA[index].style.backgroundColor = "black"; // 点击超链接切换到指定的图片 // 为所有的超链接都绑定一个单击响应函数 for(var i=0; i<allA.length; i++){ // 为每一个超链接都添加一个num属性 allA[i].num = i; // 为超链接绑定单击响应函数 allA[i].onclick = function(){ // 关闭自动切换的定时器 clearInterval(timer); // 获取点击的超链接的索引 // alert(this.num); index = this.num; // 切换图片 // imgList.style.laft = -520*index + "px"; // 设置选中的a setA(); // 使用move函数来切换图片 move(imgList,"left",-520*index,20,function(){ // 点击切换动画执行完毕，开启自动切换动画 autoChange(); }); }; } // 开启自动切换图片，调用autoChange函数 autoChange(); // 创建一个方法来设置选中的a function setA(){ // 判断当前索引是否为最后一张图片 if(index >= imgArr.length - 1){ // 则将index设置为0 index = 0; // 此时显示的是最后一张，而最后一张和第一张是一模一样的 // 通过CSS将最后一张切换为第一张 imgList.style.left = 0; } for(var i=0; i<allA.length; i++){ // 遍历所有的a并将背景颜色设为空，去掉内联样式，显示外部样式 allA[i].style.backgroundColor = ""; } // 将选中的a设置为黑色 allA[index].style.backgroundColor = "black"; }; // 定义一个自动切换的定时器的标识 var timer; // 创建一个函数来开启自动切换图片 function autoChange(){ // 开启一个定时器用来定时切换图片 timer = setInterval(function(){ // 使索引自增 index++; // 判断index的值并改变index的值，形成循环 index %= imgArr.length; // 执行动画切换 move(imgList,"left",-520*index,20,function(){ // 修改导航按钮 setA(); }); },3000); }; }; </script> </head> <body> <!-- 创建一个外部div来作为大容器 --> <div id="outer"> <!-- 创建一个ul放置图片 --> <ul id="imgList"> <li><img src="img/1.jpg"/></li> <li><img src="img/2.jpg"/></li> <li><img src="img/3.jpg"/></li> <li><img src="img/4.jpg"/></li> <li><img src="img/5.jpg"/></li> <li><img src="img/1.jpg"/></li> </ul> <!-- 创建导航按钮 --> <div id="navDiv"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> </body> </html>4、类的操作<html> <head> <style> .b1{ width:100px; height:100px; background-color:yellowgreen; } .b2{ height:200px; background-color:red; } </style> <script> window.onload = function(){ // 获取box var box = document.getElementById("box"); // 获取btn01 var btn01 = document.getElementById("btn01"); // 为btn01绑定单击响应函数 btn01.onclick = function(){ // 修改box的样式 // 通过style属性来修改元素的样式，每修改一个样式浏览器就需要重新渲染一次 // 这样执行的性能是比较差的，而且这种方式当需要修改多个样式时也比较麻烦 /*box.style.width = "200px"; box.style.height = "200px"; box.style.backgroundColor:"red";*/ // 一行代码可以修改多个样式 // 修改box的class属性 // 可以通过修改元素的class属性来间接修改样式 // 这样只需修改一次即可同时修改多个样式，同时浏览器只需重新渲染一次，性能会提高一些 // 这种方式可以使表现（css）和行为（js）进一步分离 // b2会替换b1的样式 // box.className = "b2"; // 在b1的基础上加上b2的样式（添加一个空格防止b1和b2拼串为b1b2，应为b1 b2） // box.className += " b2" // addClass(box,"b2"); // alert(hasClass(box,"heelo")); // removeClass(box,"b2"); toggleClass(box,"b2"); }; }; // 定义一个函数来向一个元素添加指定的class属性值 /*参数： obj 要添加class属性的元素 cn 要添加的class值*/ function addClass(obj,cn){ // 检查obj中是否含有cn if(!hasClass(obj,cn)){ // 如果没有cn则添加cn（添加一个空格防止直接拼串） obj.className += " "+cn; } }; // 判断一个元素中是否含有指定的class属性值 /*参数 obj 要添加class属性的元素 cn 要添加的class值 如果有该class值则返回true，否则返回false*/ function hasClass(obj,cn){ // 判断obj中是否有cn这个class值 // 创建一个正则表达式 // var reg = /\bb2\b/; var reg = new RegExp("\\b"+cn+"\\b"); return reg.test(obj.className); }; // 删除一个元素中指定的class属性 function removeClass(obj,cn){ // 创建一个正则表达式 var reg = new RegExp("\\b"+cn+"\\b"); // 删除class obj.className = obj.className.replace(reg,""); }; // toggleClass用来切换一个类 // 如果元素中有指定类则删除，没有则添加 function toggleClass(obj,cn){ // 判断obj中是否含有cn if(hasClass(obj,cn)){ // 有则删除 removeClass(obj,cn); }else{ // 没有则添加 addClass(obj,cn); } }; </script> </head> <body> <button id="btn01">点击按钮修改box的样式</button> <div id="box" class="b1"></div> </body> </html>tools.js（工具函数）// 尝试创建一个可以执行简单动画的函数 // 参数:obj:要执行动画的对象 // attr:要执行动画的样式，比如left height top // target:执行动画的目标位置 // speed:移动的速度（正数向右移动，负数向左移动） // callback:回调函数，将会在动画执行完毕以后执行 function move(obj, attr, target, speed, callback) { // 关闭上一个定时器 clearInterval(obj.timer); // 获取box1目前的位置 var current = parseInt(getStyle(obj, attr)); // 判断速度speed的正负值 // 如果从0向800移动则speed为正，如果从800向0移动则speed为负 if (current > target) { // 此时速度应为负值 speed = -speed; } // 开启一个定时器用来执行动画效果 // 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识 obj.timer = setInterval(function () { // 获取box1原来的left值 var oldValue = parseInt(getStyle(obj, attr)); // 在旧值的基础上增加,给box添加移动速度 var newValue = oldValue + speed; // 向左移动时需要判断newValue是否小于target // 向右移动时需要判断newValue是否大于于target if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) { newValue = target; } // 将新值设置给obj obj.style[attr] = newValue + "px"; // 当box1移动到了0px时，使其停止执行动画 if (newValue == target) { // 达到目标关闭定时器 clearInterval(obj.timer); // 动画执行完毕，调用回调函数 callback && callback(); } }, 30); }; /* 定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名*/ function getStyle(obj, name) { if (window.getComputedStyle) { //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj, null)[name]; } else { //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; } }; // 定义一个函数来向一个元素添加指定的class属性值 /*参数： obj 要添加class属性的元素 cn 要添加的class值*/ function addClass(obj, cn) { // 检查obj中是否含有cn if (!hasClass(obj, cn)) { // 如果没有cn则添加cn（添加一个空格防止直接拼串） obj.className += " " + cn; } }; // 判断一个元素中是否含有指定的class属性值 /*参数 obj 要添加class属性的元素 cn 要添加的class值 如果有该class值则返回true，否则返回false*/ function hasClass(obj, cn) { // 判断obj中是否有cn这个class值 // 创建一个正则表达式 // var reg = /\bb2\b/; var reg = new RegExp("\\b" + cn + "\\b"); return reg.test(obj.className); }; // 删除一个元素中指定的class属性 function removeClass(obj, cn) { // 创建一个正则表达式 var reg = new RegExp("\\b" + cn + "\\b"); // 删除class obj.className = obj.className.replace(reg, ""); }; // toggleClass用来切换一个类 // 如果元素中有指定类则删除，没有则添加 function toggleClass(obj, cn) { // 判断obj中是否含有cn if (hasClass(obj, cn)) { // 有则删除 removeClass(obj, cn); } else { // 没有则添加 addClass(obj, cn); } };5、二级菜单完善<html lang="en"> <head> <meta charset="UTF-8"> <title>二级菜单</title> <link rel="stylesheet" href="css/sdmenu.css"> <script src="js/tools.js"></script> <style> * { margin: 0; padding: 0; list-style-type: none; } a,img { border: 0; text-decoration: none; } body { font: 12px/180%; } </style> <script> window.onload = function () { // 每个菜单都是一个div，当div具有collapsed这个类时，div就是折叠状态，没有则为展开状态 // 点击菜单切换菜单的显示状态 // 获取所以class为menuSpan的元素 var menuSpan = document.querySelectorAll(".menuSpan"); // 定义一个变量来保存当前打开的菜单 var openDiv = menuSpan[0].parentNode; // 为span绑定单击响应函数 for (var i = 0; i < menuSpan.length; i++) { menuSpan[i].onclick = function () { // this代表当前点击的span // 获取span的父元素 var parentDiv = this.parentNode; // 关闭parenDiv,给div添加collapsed值,toggleClass判断div中是否有collapsed，有则删除，无则添加 toggleClass(parentDiv, "collapsed"); // 判断openDiv和parentDiv是否相同 if (openDiv != parentDiv && !hasClass(openDiv,"collapsed")) { // 不相等才添加 // 打开菜单后给之前的菜单添加collapsed来关闭该菜单 // addClass(openDiv, "collapsed"); // 为了统一处理过渡动画，将addClass改为toggleClass // 此处toggleClass()不需要有移除功能 toggleClass(openDiv, "collapsed"); } // 修改openDiv为当前打开的菜单 openDiv = parentDiv; }; } }; </script> </head> <body> <div id="my_menu" class="sdmenu"> <div> <span class="menuSpan">在线工具</span> <a href="#">图像优化</a> <a href="#">收藏夹图标生成器</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> <div class="collapsed"> <span class="menuSpan">支持我们</span> <a href="#">图像优化</a> <a href="#">收藏夹图标生成器</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> <div class="collapsed"> <span class="menuSpan">合作伙伴</span> <a href="#">图像优化</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> <div class="collapsed"> <span class="menuSpan">支持我们</span> <a href="#">图像优化</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> </div> </body> </html>二级菜单动画过渡<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级菜单</title> <link rel="stylesheet" href="css/sdmenu.css"> <script src="js/tools.js"></script> <style> * { margin: 0; padding: 0; list-style-type: none; } a,img { border: 0; text-decoration: none; } body { font: 12px/180%; } </style> <script> window.onload = function () { // 每个菜单都是一个div，当div具有collapsed这个类时，div就是折叠状态，没有则为展开状态 // 点击菜单切换菜单的显示状态 // 获取所以class为menuSpan的元素 var menuSpan = document.querySelectorAll(".menuSpan"); // 定义一个变量来保存当前打开的菜单 var openDiv = menuSpan[0].parentNode; // 为span绑定单击响应函数 for (var i = 0; i < menuSpan.length; i++) { menuSpan[i].onclick = function () { // this代表当前点击的span // 获取span的父元素 var parentDiv = this.parentNode; // 切换菜单的显示状态 toggleMenu(parentDiv); // 判断openDiv和parentDiv是否相同 if (openDiv != parentDiv && !hasClass(openDiv, "collapsed")) { // 不相等才添加 // 打开菜单后给之前的菜单添加collapsed来关闭该菜单 // addClass(openDiv, "collapsed"); // 为了统一处理过渡动画，将addClass改为toggleClass // 此处toggleClass()不需要有移除功能 // toggleClass(openDiv, "collapsed"); // 切换菜单的显示状态 toggleMenu(openDiv); } // 修改openDiv为当前打开的菜单 openDiv = parentDiv; }; } // 用来切换菜单折叠和显示状态 function toggleMenu(obj) { // 在切换类之前获取元素的高度 var begin = obj.offsetHeight; // 切换parenDiv的显示,给div添加collapsed值,toggleClass判断div中是否有collapsed，有则删除，无则添加 toggleClass(obj, "collapsed"); // 在切换类之后获取一个高度 var end = obj.offsetHeight; // console.log("begin=" + begin + ",end" + end); // 动画效果就是从begin向end过渡 // 将元素的高度充值为begin obj.style.height = begin + "px"; // 执行动画，从begin向end过渡 move(obj, "height", end, 10, function () { // 动画执行完毕，内联样式没有存在的意义，需要删除 obj.style.height = ""; }); }; }; </script> </head> <body> <div id="my_menu" class="sdmenu"> <div> <span class="menuSpan">在线工具</span> <a href="#">图像优化</a> <a href="#">收藏夹图标生成器</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> <div class="collapsed"> <span class="menuSpan">支持我们</span> <a href="#">图像优化</a> <a href="#">收藏夹图标生成器</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> <div class="collapsed"> <span class="menuSpan">合作伙伴</span> <a href="#">图像优化</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> <div class="collapsed"> <span class="menuSpan">支持我们</span> <a href="#">图像优化</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> </div> </body> </html>五、JSON<script> // - JS中的对象只有JS认识，其他的语言都不认识 // JSON就是一个特殊格式的字符串，这个字符串可以被任何语言所识别 // 并可以转换为任意语言中的对象，JSON在开发中主要用来进行数据的交互 // JSON // - JavaScript Object Notation JS对象表示法 // - JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和JS语法一样 /* JSON分类： 1、对象{} 2、数组[] JSON中允许的值： 1、字符串 2、数值 3、布尔值 4、null 5、对象 6、数组 */ // 创建一个对象 var obj = '{ "name": "孙悟空", "age": 18, "gender": "男" }'; // 创建一个数组 var arr = '[1,2,3,"hello",true]'; // console.log(obj); var onj2 = '{"arr":[1,2,3]}'; var arr2 = '[{ "name": "孙悟空", "age": 18},{ "name": "孙悟空", "age": 18}]' /* 将JSON字符串转换为JS中的对象 在JS中提供了一个工具类叫做JSON 这个对象可以将JSON转为JS对象，也可以将JS对象转换为JSON */ var json = '{ "name": "孙悟空", "age": 18, "gender": "男" }'; //JSON --> js对象 // JSON.parse()可以将JSON字符串转为JS对象 // 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象 var o = JSON.parse(json); var o2 = JSON.parse(arr); // console.log(o.gender); // console.log(02[1]); var obj3 = {name:"猪八戒",age:28,gender:"男"}; // JS对象 -->JSON // JSON.stringify()可以将一个JS对象转换为JSON字符串 // 需要一个JS对象作为参数，会返回一个JSON字符串 var str = JSON.stringify(obj3); console.log(str); // JSON这个对象在IE7及以下不支持，会报错 // 必须加"",不然会报错 var str3 = '{"name":"孙悟空","age":18,"gender":"男"}'; JSON.parse(str3); </script>JSON的兼容性<!-- 如果需要兼容IE7及以下，则可以通过一个外部JS文件来处理 --> <script src="js/json2.js"></script> <script> var str = '{ "name": "孙悟空", "age": 18, "gender": "男" }'; // eval()可以用来执行一段字符串形式的JS代码，并返回执行结果 // 如果使用eval()执行的字符串中含有{}，它会将{}当成是代码块 // 如果不希望将其当成代码块解析，则需在字符串前后各加一个() // eval()这个功能很强大，可以直接执行一个字符串中的JS代码 // 但是在开发中尽量不要使用，性能较差，且具有安全隐患（用户也可以传入JS代码） var str2 = "alert('hello')"; // eval(str2); var obj = eval("("+str+")"); // console.log(obj); </script>{callout color="#ef6d4d"}转载来源： {abtn color="#ff0d00" href="https://www.fuuuy.cn/archives/457.html" content="六六丶"/}{/callout}
-
【测试可用】个人码免签支付系统源码/免签支付系统/微信支付平台 今天为大家分享一个个人支付二维码免签的系统，市面上又很多个人支付系统都是收费，并且不是很稳定，用着用着可能就跑路了。喜欢动手的伙伴可以尝试自己搭建一套支付服务器，这样会比较稳定一些，当然如果是大批量支付的建议直接走官网的支付通道更加稳定，毕竟花几百块钱找人开个个体户也不是什么麻烦事。本系统适合小交易，不适合大交易场景，大交易场景的话建议走官方，适合给一些小商户的个人系统使用。开发系统使用语言技术：PHP原理：基于安卓客户端微信，支付宝的支付成功消息通知，回调服务器，为了保障服务的可持续性性，建议使用挂机宝等服务器开模拟器挂着，这样就可以实现24小时不停机服务，因为有些手机会杀后台，比如博主的三星手机，只有一息屏就跟断网似的，别的手机应该没有这个问题。需要一直开着客户端监听系统适合一些支付频率不是很高的系统使用平台区分两个业务端：管理后台，和商户端管理后台：运营人员使用，可管理商户以及商户可支付额度等信息商户端：实际业务管理支付人，管理支付二维码信息，查看支付订单，需要注册商户信息一、测试所需环境php > 5.6mysql > 5.6android 模拟器推荐夜神模拟器微信客户端，支付宝客户端，mt管理器二、安装步骤2.1 系统安装下载源码后，导入项目根目录下mzf.sql至mysql把源码放置域名根目录模拟器安装，微信客户端，支付宝客户端，mt管理器，监控APP注意： 安装成功后通过 http://你的域名.com/admin 访问管理后台2.2 软件设置安装成功后需要登录管理后台设置，发送邮箱账号信息访问域名注册商户信息，并上传支付二维码启动安卓模拟器，使用Mt管理器修改收款监控系统classes.dex里搜索192.168.1.3:8002，修改为你的实际域名，修改后保存重新编译安装即可，需要把服务都打开，并且把收款监控系统后台常驻进程，避免手机内存不足被杀死运行成功支付页面源码下载隐藏内容，请前往内页查看详情{callout color="#ef6d4d"}转载来源： {abtn color="#ff0d00" href="http://gxxblw.com/2022/03/01/124.html" content="哈根达斯"/}{/callout}
-
宝塔面板7.9最新版降级至7.7版本/宝塔面板7.7.0破解版 最近宝塔更新到了7.9版本。免费版要强制登录绑定手机号，很麻烦。之前绕过强制登录的方法已经失效。现在您可以降级并返回宝塔7.7版本来屏蔽、移除、解决手机账号的强制绑定。如果懒得降级，可以考虑使用海外版aaPanel，但是如果aaPanel要使用一键迁移API，则需要升级到6.8.9进行迁移网站到宝塔面板，但是最新版本的aaPanel甚至beta版还没有所谓的6.8.9，也就是说所谓的aaPanel其实是英文版宝塔面板的低版本。宝塔降级到7.7版本命令该指令适用于任何宝塔版本 隐藏内容，请前往内页查看详情命令解释： 第一步 wget 下载指定宝塔版本离线文件包，或者将压缩包上传到服务器中的/root目录；第二步 unzip 解压文件包；第三步 cd 进入到文件包所在目录；第四步 bash 执行 sh 升级脚本；第五步 cd 进入到文件包所在目录，删除下载（上传）的压缩包。{lamp/}以下是关于破解国内节点：Centos安装命令：yum install -y wget && wget -O install.sh http://download.yu.al/ltd/install/install_6.0.sh && sh install.sh试验性Centos/Ubuntu/Debian安装命令 独立运行环境（py3.7） 可能存在少量兼容性问题 不断优化中curl -sSO http://download.yu.al/ltd/install/install_panel.sh && bash install_panel.shUbuntu Deepin安装命令：wget -O install.sh http://download.yu.al/ltd/install/install-ubuntu_6.0.sh && sudo bash install.shDebian安装命令：wget -O install.sh http://download.yu.al/ltd/install/install-ubuntu_6.0.sh && bash install.shFedora安装命令:wget -O install.sh http://download.yu.al/ltd/install/install_6.0.sh && bash install.shLinux面板7.7.0升级专业版命令（7.8.0 可以执行这个降级到 7.7.0 开心版）：curl http://download.yu.al/ltd/install/update6.sh|bash{callout color="#ef6d4d"}转载来源： {abtn color="#ff0d00" href="https://moil.cc/429.html" content="捷径之地"/}{/callout}
