搜索到
7
篇与
的结果
-
HTML+CSS+JS实现打字机效果！ 直接上代码：HTML泰科智能 CSS.daziji{ height: 120px; line-height: 120px; text-align: center; position: relative; font-size: 50px; letter-spacing: .2em; } .daziji h2{ margin: 50px 0 20px; color: #fff;display: initial; } .container{ margin-right: 5px; } .delete{ border-right: 2px solid #fff; /*step-end是动画过渡效果，设置step-end代表不过渡*/ animation: blingbling 1s step-end infinite; } @keyframes blingbling{ from,to{ border-color: transparent; } 50%{ border-color: #fff; } }JavaScriptconst data = ["协手未来！","开启自动化新时代","构建更智能的世界","轻巧智动 协作无间"]; //打字机文字 英文","分隔 const container = document.getElementsByClassName('container')[0]; const Delete = document.getElementsByClassName('delete')[0]; //data数组的下标 let index = 0; //data数组每一项字符串的下标 let strIndex = 0; //开始的时间或是上一刻的时间 let start = null; //上次操作与现在的时间间隔 let interval = 0; //每次变化的间隔 let change = 500; //现在是否是删除状态 let isDelete = false; //根据requestAnimationFrame定义，这是一个回调函数，这个函数会 //传入一个参数，用来表示执行回调函数的时刻 function blink(time){ //这个方法必须在函数内部再调用一次才会无限循环调用 window.requestAnimationFrame(blink); //如果不存在开始的时间，说明是第一次进入函数 if(!start){ start = time; } //计算现在与上次操作差了多久 interval = time - start; //如果大于间隔时间，则应该执行新的操作 if(interval > change){ //取出数组的某一个字符串 let str = data[index]; //不在删除状态 if(!isDelete){ //change是时间间隔，使用随机数，模仿不同的打字时间 change = 500 - Math.random()*400; container.innerHTML = str.slice(0,++strIndex); } else{ container.innerHTML = str.slice(0,strIndex--); } //当前进行了操作，需要保存当前的时间 start = time; //对字符串进行判断，全部打印后则删除 if(strIndex == str.length){ isDelete = true; change = 200; start = time + 1200; } //删除后打印下一个 if(strIndex -
JS前端获取用户的ip地址的方法 使用搜狐提供的IP获取服务，利用JS代码实现获取用户IP地址的方法！使用到的网址：http://pv.sohu.com/cityjson?ie=utf-8代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script> document.write(returnCitySN["cip"]+','+returnCitySN["cname"]) </script> </body> </html>
-
纯 js + css 开启网站白天/黑夜模式 最近看到很多网站都加了暗黑模式，可能主要是因为手机的原因吧，我之前一直不屑这个功能，直到昨天晚上，我给手机开启晚间深色模式后，打开我的网站，真的刺眼，所以就给胖蒜网加上了。我采用的是最普通的js+css的模式，代码也是参考网上的，所以就分享出来。一、JS部分代码<script type = "text/javascript" > function switchNightMode(){ var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0'; if(night == '0'){ document.querySelector('link[title="dark"]').disabled = true; document.querySelector('link[title="dark"]').disabled = false; document.cookie = "night=1;path=/" console.log('夜间模式开启'); }else{ document.querySelector('link[title="dark"]').disabled = true; document.cookie = "night=0;path=/" console.log('夜间模式关闭'); } } //指定时间进入夜间模式 (function(){ if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){ if(new Date().getHours() > 22 || new Date().getHours() < 6){ document.querySelector('link[title="dark"]').disabled = true; document.querySelector('link[title="dark"]').disabled = false; document.cookie = "night=1;path=/" console.log('夜间模式开启'); }else{ document.cookie = "night=0;path=/" console.log('夜间模式关闭'); } }else{ var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0'; if(night == '0'){ document.querySelector('link[title="dark"]').disabled = true; console.log('夜间模式关闭'); }else if(night == '1'){ document.querySelector('link[title="dark"]').disabled = true; document.querySelector('link[title="dark"]').disabled = false; console.log('夜间模式开启'); } } })(); </script>建议放在页面底部，我这里用的是Typecho搭建的网站，其它里面有部分PHP代码需要修改一下。二、CSS代码部分<link href="<?php $this->options->themeUrl('statics/dark.css'); ?>" rel="<?php if($_COOKIE['night'] != '1'){echo 'alternate ';} ?>stylesheet" type="text/css" title="dark">在header.php里面加上上面的代码，夜晚模式就让dark.css生效，所以呢，接下来就是在statics文件夹里面创建这个css文件，里面写暗黑模式的相关样式即可。三、效果演示可以去我的网站看看效果，在网站右上角有个切换开关，代码如下：<a href="javascript:switchNightMode()" target="_self" class="darkmode">开启夜间模式</a>
-
JS判断移动端及PC端访问不同的网站 现在很多网站都是分为两个版本，一个pc端的一个移动端的(响应式除外)，针对这两个版本，就需要对访问的设备进行判断，如果是pc，就直接访问pc网站，否则就访问移动端网站。对于这个问题可以通过判断UA来解决，前端js可以判断，后端判断也行，这里我们主要讨论的是如何通过js来处理。假如我们有一个网站，pc端通过www.a.com访问，而移动端通过m.a.com来访问。我们需要做的就是当移动端访问www.a.com时可以直接跳转到m.a.com。此时我们只需这样处理就可以了，在页面头部加入如下js代码：<script type="text/javascript"> (function () { var url = location.href; // replace www.a.com with your domain if ( (url.indexOf('www.a.com') != -1) && navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i) ) { location.href = 'http://m.a.com'; } })(); </script>但是，多数情况下不止这么简单地直接从www.a.com跳转到m.a.com。我们网站除了主机名部分，后面跟的还有，比如：www.a.com/list/98/，对于这样一个url，PC就直接这样访问了，对于移动端，需要通过m.a.com/list/98/才可以呈现出比较好的效果。那么，此时就可以用正则来处理，当移动端访问时，我们把“http://www”替换为“http://m”(冒号为英文冒号)，然后更新页面就可以看到页面在移动端上呈现的效果了。具体代码如下：<script type="text/javascript"> (function () { var url = location.href; // replace www.a.com with your domain if ( (url.indexOf('www.a.com') != -1) && navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i) ) { var newUrl = url.replace('http://www', 'http://m'); location.href = newUrl; } })(); </script>Ok，以上就是移动端及PC端网站访问的问题。
-
分享腾讯云抢一元学生服务器JS脚本 现在腾讯云已经取消一元主机了，但还是把方法收集一下：活动地址：https://www.qcloud.com/act/campu右键审查元素，然后点开Console，把代码复制进去，然后回车。。等到点之后看抢到没有。//make the button click-able $("button.button.J-gotoAuth").removeAttr("disabled"); //disable the pop-up dialog window $("div.dialog.J-bizDialog").hide(); //repeatly trigger the button in the time interval of 400ms function btnhack() { $(document).ready(function(){ $("button.button.J-gotoAuth").trigger("click"); }); } // 如果你的电脑配置好点，可以尝试把400毫米间隔改为更短 setInterval("btnhack()","400");另一代码：发现抢主机不过是一个JQuery Post，连refresh都不加手写脚本在console直接执行..// Get Tencent Student Redeem var getThread = null; var timeInterval = 20; var getCount = 0; if (!getThread) { getThread = setInterval(() => { if ($("button[hotrep='qcact.campus.getVoucherBtn']")[0].disabled) { $("button[hotrep='qcact.campus.getVoucherBtn']").attr("disabled",false); } $("button[hotrep='qcact.campus.getVoucherBtn']").click(); if ($(".J-close")) { $(".J-close").click(); } console.log("Already Tried: " + (++getCount) + " Times."); }, timeInterval); }
-
[OAuth登录]QQ JS开发版Demo实例全解析[JS_SDK下载] 自去年开通 OAuth_Demo 专栏，陆续写了几篇关于OAuth1.0、OAuth2.0认证原理讲解及QQ OAuth登录实例的文章，后面就消声匿迹了，一方面是项目完成，对这方面信息接触的不多；另一方面，一直较忙，没多少时间来关注做一些Demo、SDK。在近几个月，博客公布的群，时不时有人加入并咨询一些关于oauth登录验证相关的问题，同时，栏目文章被点击率也较高，而这么长时间没有更新相关的SDK，有些Sorry，太对不住了，近来在做一个系统，快结束时，想加个可通过QQ账号、新浪微博账号进行登录的功能，遂花点时间来研究下。主要会做以下三个方面的关注：1、QQ OAuth2.0认证PHP、NET、JS语言的开发或SDK制作；2、新浪微博 OAuth2.0的认证登录（话说这个还从未详细制作做，之前有了解，网上借了个SDK仅实现了效果）；3、灯鹭[denglu.cc]社会化登录新版认证研发，之前是用1.0认证做了个SDK，8月份发现官网全新启用了2.0认证取代了1.0，看来不得不跟进下，才对得住这么多博友、站长的支持。大概就这些，实际研究起来应该用不了多长时间，关键是写博文得花点功夫、心思，没关系，只要大家能够继续支持，并且资源知识共享给大家，也是一种快乐！– 闲话了一番，释放了太多的情怀，步入这篇的正文。/**************以上叙述此栏目事宜，可直接跳过，以下为正文*************/1、关于JS_SDK接入QQ登录这篇文章，写的是使用QQ JS_SDK开发平台登录的过程及心得，而为什么选择JS进行试验，正如官方所说：方便网站快速接入QQ登录，并通过接口调用获取相应的信息，来满足开发。因为这个SDK把所有中间类处理全部集成了，不需要你去处理。2、网站调用JS登录过程思路全解析第一步：当然是看他们的API接入文档或SDK使用说明，查看了一下，主要用到的是以下两个文件：【QQ登录】JS_SDK使用说明 （这个文档说的是网站接入开发流程，比半年前用过的文档详细多了，不过也有小地方比较模糊）通过JS SDK，创建完整的QQ登录流程，并调用OpenAPI接口 （这相当于是一个Demo文档，实例说明，上个文档的细化，但两个文件有细微不一致的地方）有了这两个文档，完成不难，我大概搭建、制作、上传、调试，个把小时完成，不过没有个个接口都测试。好了，想详细了解整个开发流程，继续往下看。第二步：引用JS SDK的javascript文件准备工作是：取得申请好的APPID和APPKEY，一个HTML、JS的运行环境即可。新建一个静态HTML文件，作为显示QQ登录按钮即测试页面，命名随你，我这里是QQlogin.html，然后，进行最重要的一步，在<head></head>间引用他们的SDK的JS文件，如下所示：<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="appid" data-redirecturi="redirect_url" charset="utf-8"></script> // appid是你申请到的appid，redirect_url是点击QQ登录按钮，连接成功后跳转回网站接收的页面–即回调地址，两者必须都正确填写好。第三步：放置QQ登录并可定制样式将下面这段代码，放入head或body标签内即可（注：head内必须在第二步引用的JS代码后）<span id="qq_login_btn"></span><script type="text/javascript">QC.Login({//按默认样式插入QQ登录按钮 btnId:"qq_login_btn"//插入按钮的节点id});</script>效果如下图所示：同时，也可以自己对按钮及样式进行自定义，这样就需要写一段JS脚本，如下图所示：（引用官方，详见SDK源文件）第四步：上一步完成后，接下来就是制作回调地址页面再新建一个页面，比如命名：Redirect.html，用来对回调过来的参数进行处理，参数有access token等。这个页面还是首先引用JS SDK的javascript文件代码，详见第二步，若你的回调地址与登录页面为同一页面，那么引用一次即可。然后，就可以通过调用QQ互联提供的接口获取相关的数据，调用方式如下：QC.api(api, paras, fmt, method):Request （对JS不够了解的，似乎不够明白，后面会有实例，会调用数据就OK，管它怎么来的）参数说明：api：必须填写，指定要调用提供的OpenAPI名称，如:get_user_info；paras：必须，指定要调用OpenAPI对应的参数，参数使用JSON的键值对格式列出；fmt：可选参数，指定OpenAPI的返回格式，如：“json”、“xml”，默认为json；method：可选，指定OpenAPI调用请求的发起方式，可为“get”、“post”，默认发送为post，获取数据为get。实例代码如下图所示：当数据成功调用后，登录测试页会改变状态，显示头像、昵称、退出按钮，或你自定义的样式，默认样式效果如下： 第五步：至此整个接入登录过程全部完成，真正步骤只有中间三步，然后四段代码即可实现登录，并获取数据，后面就自个进行数据处理了，还是很便捷的。当然，还有其它一些接口，请查看前面列出的两个链接文档，同时，我后面提供的SDK里，也有部分集成的调用API接口，供大家参考使用。3、尾述、Demo演示、SDK下载好了，这篇文章算完工了，不知讲的是否能使你明白、了解，有不解处，欢迎留言提出，或加入网站爱好者群：93713236，里面许多这方面开发者，可一起交流讨论。好像还缺点什么，最关键的sdk还未上传，肯定是要的，详见下面。SDK分享：点击下载 （已检测，可安全下载）Demo演示：点击进入 （请选择 QQ JS版演示）OAuth开发：若自己 文章来源：http://blog.unvs.cn/archives/oauth-qq2-0-js-sdk.htmlhttp://wiki.open.qq.com/wiki/【QQ登录】JS_SDK使用说明http://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E
-
wordpress插件Ecall-js方式外部调用wordpress文章 wordpress插件Ecall的主要特点：（1）自由定制模版（2）缓存加速（3）隐藏分类（4）授权机制，防止恶意调用（5）文章的js调用方式(6)遵循WordPress插件开发规范wordpress插件Ecall使用说明：(1)你可以在任意网站加入如下代码：<script type=’text/javascript’ src=”http://wpcourse.com/api.php?key=123&cid=1&rows=2″></script>http://wpcourse.com:代表博客域名key：代表插件生成的授权密钥（在插件管理页面）cid:代表目录的idrows:代表显示的数据调试 可选参数文章来源:http://blog.webfuns.net/archives/313.html
![[OAuth登录]QQ JS开发版Demo实例全解析[JS_SDK下载]](https://cmsblog.cn/content/uploadfile/201601/d9289527e11b1f08829467371a2839d020160106140110.jpg)
