圆弧派博客 - 专注于网络技术 - PHP https://www.iarc.top/tag/PHP/ 为自己博客or网页加上鼠标流光背景JS特效 https://www.iarc.top/264.html 2023-07-02T16:06:00+08:00 鼠标流光背景特效(乱起的名别太在意 :@(献花) ),canvas画布配合JS即可实现,这个版本是我从一个人单页里面抄下来的,顺便优化了一下后将其加入到了本站夜间模式{card-default label="快速实现" width=""}<canvas id="sbcanvas" class="sbcanvas"></canvas> <script src="https://www.iarc.top/CDN/js/sbxg.js"></script> <style> .sbcanvas{ display: block; position: fixed; top: 0; z-index: -9; } </style>{/card-default}将特效设为博客夜间模式1.先在body写入<canvas id="sbcanvas" class="sbcanvas"></canvas> <script src="https://www.iarc.top/CDN/js/sbxg.js"></script>2.更改css属性display为none(日间模式不显示该元素).sbcanvas{ display: none; position: fixed; top: 0; z-index: -9; } </style>3.在joe.mode.css文件夹最下面加入以下代码html[data-night='night'] .sbcanvas{display:block;}完成以上操作即可大功告成,快去开启夜间模式试一下吧 动态域名跨域解决启用CDN无法正常请求问题'Access-Control-Allow-Origin'的原因和解决办法 https://www.iarc.top/234.html 2023-06-28T01:41:00+08:00 前言  前几天给博客换了个CDN后由于时间原因就没多看了,直到昨天调式的时候才发现,纳尼,这是啥情况(如图),咋这么多错误了 。 经过一段时间的搜集,终于在网上找到了解决办法。出现这种情况是由于用户与浏览器之间是HTTPS交互,但实际上PHP接收到的是来自CDN的 HTTP 交互,所以PHP使用了 HTTP 进行响应,结合Typecho的一些特性形成了这个问题。简单说就是CDN开启了HTTPS,但使用的是HTTP回源,就出现了这种情况。解决办法{card-default label="办法一" width=""}进入你网站所使用的CDN控制后台,把回源协议改为:HTTPS即可(改完记得刷新缓存,部分需要等一会才会生效),这里不做演示。此方法增加网站源IP地址泄漏风险,此处暂不展开叙述。{/card-default}{card-default label="办法二(ty推荐)" width=""}1.打开网站根目录2.找到 config.inc.php 文件并打开3.在图示部位添加代码并保存即可为什么推荐这个方法呢,因为Typecho后台只能绑定一个域名,如果绑定多个域名时其它域名域名只能显示主页,插件等页面会报错,但是加上这个就不会了,所以还是提前改了吧。{/card-default}在适当位置加入如下代码// 动态域名跨域 define('__TYPECHO_SECURE__',true); phpMyAdmin高级功能未激活解决方法、以及设置定时执行SQL语句 https://www.iarc.top/146.html 2023-01-19T01:15:00+08:00 解决phpMyAdmin高级功能尚未完全设置,部分功能未激活,这是我们登录到phpMyAdmin经常见到的问题,But要是有对高级功能(如定时事件)有需要了,那就不得不去将它激活了。PHPMyAdmin激活高级功能版本phpMyAdmin:4.9前期准备将phpMyAdmin文件夹中(你的phpMyAdmin安装路径,宝塔面板一般是在www/server中)/phpMyAdmin/sql/中的create_tables.sql下载到本地!第一步将create_tables.sql导入到phpMyAdmin导入后可能会报一下错,不过这并不影响第二步打开phpmyadmin文件夹下的“config.sample.inc.php”文件并复制,重命名为“config.inc.php”(如果已经有“config.inc.php”文件,直接修改即可)第三步将“config.inc.php”文件中的/ Storage database and tables /到/* End of servers configuration */之间的代码全部删除注释即可第四步注销phpmyadmin之后并重新登录。大功告成!这时再去看数据库工具栏里就多出来“事件、程序、设计器等功能”定时执行SQL语句1、首先查看计划事件是否开启:在phpmyadmin的SQL查询框中填入“show variables like '%scheduler%';”并执行当显示event_scheduler的“Value”为“ON”时,表示计划事件已开启;当显示event_scheduler的“Value”为“OFF”时,表示计划事件未开启。2、如果计划事件未开启,可按以下操作开启:到mysql配置文件my.cnf新增一项,在mysqld后面添加event_scheduler = on(或是event_scheduler = 1),保存后重启mysql服务器即可。在phpmyadmin的“事件”功能里,“事件计划状态”显示为“开”即计划事件已正常开启。3、添加定时任务在phpmyadmin的“事件”功能里,点击“新建”下的“添加事件”根据弹窗填写表格其中状态“ENABLED”为“启用”“DISABLED”为“不启用”“SLAVESIDE_DISABLED“为“在从库上不启用该事件“事件类型"RECURRING"为“循环执行”"ONE TIME"为“只执行一次”运行周期即根据需要选择执行的周期时间起始时间即开始执行的时间终止时间即结束时间,留空表示一直执行下去定义即执行的SQL语句用户按"数据库用户名@数据库地址"的格式填写最后点击"执行"即创建定时任务完成。最后这里记录下防以后踩坑! phpmysql复制一列到另一列的方法 https://www.iarc.top/143.html 2023-01-17T22:04:00+08:00 mysql复制一列到另一列方法归类,方便使用的时候查找UPDATE 表名 SET B列名=A列名需求:把一个表某个字段内容复制到另一张表的某个字段。实现sql语句1:代码如下:UPDATE file_manager_folder f1 LEFT OUTER JOIN file_manager_folder f2 ON f1.name = f2.name AND f2.parentId = 54 SET f1.parentId = 54 WHERE f2.name IS NULL AND f1.id IN (1,2,3);实现sql语句2:代码如下:update B set extra = A.extra from A join B on (A.id = B.id);实现sql语句3:代码如下:update b set b.sms = (select a.sms from a where a.id = b.id)需要确定两张表中的id都是主键或者唯一实现sql语句4:代码如下:UPDATE A SET A.SMS = (SELECT B.SMS FROM B WHERE A.ID = B.ID) WHERE EXISTS (SELECT 1 FROM B WHERE A.ID = B.ID);实现sql语句5:复制一个表字段数据到另外一个表的字段,可以这么写:实现sql语句5:代码如下:UPDATE tb_1 INNER JOIN tb_2 ON tb_1.tid = tb_2.tid SET tb_1.tcontent = tb_2.tcontent附:同表复制需求:把同一张表的一个字段内的内容复制到另一个字段里例1:我想把article表中A字段的内容复制到article表中B字段里面sql语句为:代码如下:update article set B=A;例2:有时候,我们需要复制某个字段一整列的数据到另外一个新的字段中,这很简单,SQL可以这么写:代码如下:UPDATE tb_1 SET content_target = content_source;大概写法如下:代码如下:Update {your_table} set {source_field} = {object_field} WHERE cause现有表A和表B,希望更新A表,当 A.bid = B.id时,a.x = b.x, a.y=b.y:update a inner join b on a.bid=b.id set a.x=b.x,a.y=b.y; 免费鼠标指针分享 https://www.iarc.top/141.html 2023-01-11T15:37:00+08:00 推荐一个免费的鼠标指针平台,可用于电脑,也可用于网站!有的鼠标指针格式不是.cur格式,要转换请自行百度一下,这就不赘叙了哈 .button { background-color: #4CAF50; color: white; border: none; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 32px; margin: 4px 2px; cursor: url('/usr/img/icon/Arrowblue.cur'),auto; width:100%; height:250px; } 鼠标移至该区域查看指针效果 网站使用方法:<style type="text/css"> *{ cursor: url('指针链接.cur'),auto; } <style>鼠标指针地址鼠标指针:点我跳转鼠标指针 分享一款圣诞树代码 https://www.iarc.top/91.html 2022-12-26T00:16:00+08:00 演示站::(滑稽) 感觉还不错的一款源码 ❤ 里面所有图片均可替换,全开源!https://lab.iarc.top/Christmas-Code/技术栈代码主要是由 HTML + LESS 编写注释在style.less文件,有能力自由发挥~展示图下载地址{hide}{cloud title="https://xql.lanzoue.com/i0SdE0jeuojc" type="lz" url="https://xql.lanzoue.com/i0SdE0jeuojc" password=""/}{/hide} 为网站添加个新年灯笼提前增点喜庆 https://www.iarc.top/82.html 2022-12-23T22:14:00+08:00 效果图(与本篇文章上面一致)代码:将下面代码加在head标签或者body中即可 年 新 乐 快 .deng-box { position: fixed; top: -40px; right: 150px; z-index: 9999; pointer-events: none; } .deng-box1 { position: fixed; top: -30px; right: 10px; z-index: 9999; pointer-events: none } .deng-box2 { position: fixed; top: -40px; left: 150px; z-index: 9999; pointer-events: none } .deng-box3 { position: fixed; top: -30px; left: 10px; z-index: 9999; pointer-events: none } .deng-box1 .deng, .deng-box3 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px #fc903d } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px #fa6c00 } .deng-a { width: 100px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, .1); margin: 12px 8px 8px 8px; border-radius: 50% 50%; border: 2px solid #dc8f03 } .deng-b { width: 45px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, .1); margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03 } .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03 } .shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -45px; background: orange; border-radius: 0 0 5px 5px } .shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50% } .shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: orange; border-radius: 0 0 0 5px } .deng:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03) } .deng:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px 5px; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03) } .deng-t { font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif; font-size: 3.2rem; color: #dc8f03; font-weight: 700; line-height: 85px; text-align: center } .night .deng-box, .night .deng-box1, .night .deng-t { background: 0 0 !important } @-moz-keyframes swing { 0% { -moz-transform: rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform: rotate(-10deg) } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg) } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg) } } <!-- 灯笼代码 --> <meta charset="utf-8"> <div class="deng-box2"> <div class="deng"> <div class="xian"> </div> <div class="deng-a"> <div class="deng-b"> <div class="deng-t">年</div> </div> </div> <div class="shui shui-a"> <div class="shui-c"> </div> <div class="shui-b"></div> </div> </div> </div> <div class="deng-box3"> <div class="deng"> <div class="xian"> </div> <div class="deng-a"> <div class="deng-b"> <div class="deng-t">新</div> </div> </div> <div class="shui shui-a"> <div class="shui-c"></div> <div class="shui-b"> </div> </div> </div> </div> <div class="deng-box1"> <div class="deng"> <div class="xian"> </div> <div class="deng-a"> <div class="deng-b"> <div class="deng-t">乐</div> </div> </div> <div class="shui shui-a"> <div class="shui-c"></div> <div class="shui-b"></div> </div> </div> </div> <div class="deng-box"> <div class="deng"> <div class="xian"> </div> <div class="deng-a"> <div class="deng-b"> <div class="deng-t">快</div> </div> </div> <div class="shui shui-a"> <div class="shui-c"> </div> <div class="shui-b"></div> </div> </div> </div> <style type="text/css"> .deng-box { position: fixed; top: -40px; right: 150px; z-index: 9999; pointer-events: none; } .deng-box1 { position: fixed; top: -30px; right: 10px; z-index: 9999; pointer-events: none } .deng-box2 { position: fixed; top: -40px; left: 150px; z-index: 9999; pointer-events: none } .deng-box3 { position: fixed; top: -30px; left: 10px; z-index: 9999; pointer-events: none } .deng-box1 .deng, .deng-box3 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px #fc903d } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px #fa6c00 } .deng-a { width: 100px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, .1); margin: 12px 8px 8px 8px; border-radius: 50% 50%; border: 2px solid #dc8f03 } .deng-b { width: 45px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, .1); margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03 } .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03 } .shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -45px; background: orange; border-radius: 0 0 5px 5px } .shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50% } .shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: orange; border-radius: 0 0 0 5px } .deng:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03) } .deng:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px 5px; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03) } .deng-t { font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif; font-size: 3.2rem; color: #dc8f03; font-weight: 700; line-height: 85px; text-align: center } .night .deng-box, .night .deng-box1, .night .deng-t { background: 0 0 !important } @-moz-keyframes swing { 0% { -moz-transform: rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform: rotate(-10deg) } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg) } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg) } } </style> 如何让css按钮居中&amp;CSS小技巧 https://www.iarc.top/78.html 2022-12-23T14:20:00+08:00 margin:auto的用途水平垂直居中margin: auto;{margin-left:auto;margin-right:auto;}缩写形式为:{margin:0 auto;}0为上下边距,可按自己需要设置成不同的实现最高渲染性能的去除下边框cssdiv {  border: 1px solid;  border-bottom: 0 none; /**key code here**/}增加icon按钮点击区域点击 区域 大小 从 16 × 16 一下子 提升 到 38 × 38.icon- clear {  width: 16px;  height: 16px;  border: 11px solid transparent;   /**key code here**/}永远居中的dialog(可兼容到IE7)<html lang="en"><head><meta charset="UTF-8"><title>demotitle><style> .container { position: fixed; top:0; right: 0; left: 0; bottom: 0; background-color: rgba(0,0,0,.5); text-align: center; font-size: 0; white-space: nowrap; overflow: auto; } .container:after { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .content { width: 240px; height: 120px; padding: 20px; } .dialog { display: inline-block; vertical-align: middle; border-radius: 6px; background-color: #fff; font-size: 14px; white-space: normal; }style>head><body><div class="container"><div class="dialog"><div class="content">这dialog永远居中div>div>div>body>html>去除页面默认滚动条(PC端有效)/**good code**/html {overflow: hidden;}/**bad code**/html, body { overflow: hidden;} 宝塔为网站添加防盗链 https://www.iarc.top/69.html 2022-12-16T00:05:00+08:00 1.什么是资源盗链简单地说,就是某些不法网站未经许可,通过在其自身网站程序里非法调用其他网站的资源,然后在自己的网站上显示这些调用的资源,达到填充自身网站的效果。这一举动不仅浪费了调用资源网站的网络流量,还造成其他网站的带宽及服务压力吃紧,甚至宕机。2.网站资源被盗链带来的问题若网站图片及相关资源被盗链,最直接的影响就是网络带宽占用加大了,带宽费用多了,网络流量也可能忽高忽低,Nagios/Zabbix等报警服务频繁报警3.企业真实案例:网站资源被盗链,出现严重问题某日,接到从事运维工作的朋友的紧急求助,其公司的CDN源站,源站的流量没有变动,但CDN加速那边的流量无故超了好几个GB,不知道怎么处理。该故障的影响:由于是购买的CDN网站加速服务,因此虽然流量多了几个GB,但是业务未受影响。只是,这么大的异常流量,持续下去可直接导致公司无故损失数万元。解决这个问题可体现运维的价值。通过宝塔Nginx Web服务实现防盗链实战在默认情况下,只需要进行简单的配置,即可实现防盗链处理利用referer,并且针对扩展名rewrite重定向第一步,先打开宝塔网站=》设置=》配置文件第二步:找到以下代码进行配置location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; error_log off; access_log /dev/null; }配置前 location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; error_log off; access_log /dev/null; } 配置后 location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { valid_referers *.iarc.top iarc.top; if ($invalid_referer) { rewrite ^/ https://www.iarc.top/img/fdl.png; #return 404; } expires 30d; } valid_referers *.iarc.top iarc.top;这些是许可域名gif|jpg|jpeg|png|bmp|swf这些你要进行防盗链设置的文件后缀,用|隔开 使用JS使音乐自动播放的两种方法(不受限于浏览器) https://www.iarc.top/55.html 2022-12-12T01:40:00+08:00 前言众所周知,网站上声音无法自动播放一直是IOS/Android上的惯例。桌面版Safari也在2017年第11版宣布禁止带声音的多媒体自动播放功能。随后2018年4月发布的Chrome 66正式关闭了声音的自动播放,这意味着音频自动播放和视频自动播放在桌面浏览器中也会失效。而通过网上搜索来解决这个问题,大部分都会提到使用javascript原生的play()来解决。但是,当你运行它的时候,你会发现你在Chrome浏览器下调用play后的错误:DOMException: play() failed because the user didn’t interact with the document first.但是,如果你想的是将音频当作背景音乐来播放时,当页面加载时音频文件就会自动响起,这个时候,用户是没有与页面进行数据交互的,所以play()会报错,很多人百度后便会找到两种主流的方法这里就不赘叙浏览器如何设置成自动播放了,因为你总不能让用户访问网站之前让他提前设置好浏览器自动播放的吧方法一//浏览器适用 contextClass = window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext; try { var context = new contextClass(); var source = null; var audioBuffer = null; function stopSound() { if (source) { source.stop(musics); //立即停止 } } function playSound() { source = context.createBufferSource(); source.buffer = audioBuffer; source.loop = true; source.connect(context.destination); source.start(0); //立即播放 } function initSound(arrayBuffer) { context.decodeAudioData(arrayBuffer, function(buffer) { //解码成功时的回调函数 audioBuffer = buffer; playSound(); }, function(e) { //解码出错时的回调函数 console.log('404', e); }); } function loadAudioFile(url) { var xhr = new XMLHttpRequest(); //通过XHR下载音频文件 xhr.open('GET', url, true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { //下载完成 initSound(this.response); }; xhr.send(); } //这里用来存储背景音乐的路径 loadAudioFile('audio/music.flac'); } catch (e) { console.log('无法找到音乐!'); }构建播放器后,可以在进入页面时缓存,然后自动播放背景音乐,不考虑浏览器。方法二 <script> var audio=document.createElement('audio'); audio.src='http://music.163.com/song/media/outer/url?id=31365604.mp3'; audio.autoplay=true; var duration; duration=audio.duration;//长度单位是秒 function bgm(){ audio.play();//播放 } window.setInterval("bgm()",duration*1000+1000); document.head.appendChild(audio); </script>注意事项 这种方法只对浏览器有效,无法实现APP上自动播放音乐的效果。