优雅解决LeanCloud流控问题
优雅解决LeanCloud因流控原因，通过定时任务唤醒体验版实例失败的问题。
15BOM编程艺术
BOM编程艺术 什么是BOM BOM的全称为 Browser Object Model，被译为浏览器对象模型 BOM提供了独立于HTML页面内容，而与浏览器相关的一系列对象。主要被用于管理浏览器窗口及与测览器窗口之间通信等功能。 BOM由一系列对象构成，这些对象可以简单理解为是由各个览器所提供的，例如 Window对象等。 Window对象 window对象是BOM中最核心的对象 全局作用域 在浏览器环境中运行javascript逻辑时，在全局作用域中定义的对象、变量和函数都是Window对象的属性和方法。 var test = 666 console.log('test:', test) console.log('windows.test:', window.test) function t() { console.log('this is function') } t() window.t() delete window.test console.log('删除windwos.test后test的值:', test) console.log ...
14表单操作
表单操作 获取表单 获取表单元素 通过常规方式 Document对象方式。document.getElementById('form')等。 通过Document的属性forms document.forms 返回结果为HTMLCollection。 通过表单的name名字。 此方法不推荐。因为在新版本的浏览器中可能不再支持。 如果返回结果为一个时类型为对象，多个时是集合。 获取表单组件元素 常规方式 Document对象方式。document.getElementById('form_input')等。 通过表单元素的属性elements var f = document.forms[0] console.log(f.elements) 表单操作 文本框的操作 选择当前文本框的所有内容 <form action="#" id="myform"> <input type="text" id="username" name="username" value="请输入用户名"> </form> <script> ...
五一假期小作业
JS 版星级评分 如图所示，在曾经曾用 CSS3 的方案实现过。现在用 JavaScript 重新实现。 演示地址：https://antmoe.gitee.io/project/2020/05/01/index.html 遇到的问题 JavaScript 不能直接操纵伪类元素，因此只能用控制类的方式 没有搞明白三种状况 第一次点击 第二次点击是加星还是减星 判断循环判断循环（代码太烂） 部分过渡动画存在一定缺陷 嵌套过于多（代码太烂） 解决方案 由于五个五角星的实现依靠五个一模一样的<i>标签，因此使用事件委托方式 定义一个列表，用于存储当前页面中的所有星（<i>标签） 定义一个变量，用作用户是否第一次操作的标志。（即判断是否是第一次操作） 如果是第一次操作，那么直接循环添加类名即可 不是第一次操作，需要判断是否添加过类名 在用户第一次操作后，需要判断是加星还是减星 即判断当前点击的元素是否含有星 如有有星星，取消右边和当前点击的星 如果没有星，将左边所有未点亮的星和当前点击的星点亮 示例代码 <!DOCTYPE ...
Hexo记一次gulp压缩体验
前言 其实呢，这次体验没有理想中好。因为主页的大小只下降了0.7kb。 对于我的博客来说，我的全部静态文件都在GitHub上，并且使用jsdeliver加速引用。因此对我来说真正压缩的其实也就是html。 但是考虑到还有coding的持续集成，因此也要考虑持续集成的环境配置。 gulpfile配置 npm install -g gulp npm install gulp --save npm install gulp-htmlclean npm install gulp-htmlmin npm install gulp-clean-css npm install gulp-uglify // 引入需要的模块 var gulp = require('gulp'); var minifycss = require('gulp-clean-css'); var uglify = require('gulp-uglify'); var htmlmin = require('gulp-htmlmin'); var htmlclean = require('gulp-htmlclean'); ...
JS基本事件案例练习
一、永远点不到的方块 示例：https://antmoe.gitee.io/project/2020/04/25/1.html 实现思路： 获取当前浏览器窗口的宽度和高度 既然是随机显示，那么位置不能超出当前浏览器的窗口。 获取div的宽度 计算宽度高度的最大值 也就说小方块移动的位置的边界。 为元素注册click（mouseover）事件 也就是鼠标点击（悬停）时触发的事件 click:点击事件 mouseover：悬停事件 源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { overflow: hidden; ...
13事件
事件类型 依赖于设备的输入事件：键盘事件和鼠标事件，这些事件都是直接和设备相关的。 独立于设备的输入事件：例如cick事件等，这些事件并没有直接与设备相关 用户界面的相关事件：用户界面事件属于较高级的事件，一般多用于表单中的组件。状 变化的相关事件：这些事件与用户行为无关，而是由网络或浏览器触发的。 特定API事件：这些事件多用于特定场景的实现，例如 HTML5中提供的拖放API中的事件等 与错误处理的相关事件 注册事件 注册事件指：就是将 Javascript函数与指定的事件相关联。 句柄：被绑定的函数成为该事件的句柄。 通过事件属性 <button id="btn1" onclick="fn()">按钮</button> <script> function fn() { console.log('你终于点击了我') } </script> DOM中相关对象提供的事件属性 <button id="btn2">按钮</button> <script> ...
Valine添加自定义表情
为你的Valine丰富表情吧。阿鲁小表情，哔哩哔哩表情····
12样式操作
获取内联样式 <p id="p1" style="color: red;">666</p> 内联样式即写在标签里的样式（返回文本类型） var pElement = document.getElementById('p1').getAttribute('style') console.log(pElement) 通过DOM对象获取。（返回对象） var pElement = document.getElementById('p1') console.log(pElement.style) 对象的方法如下： cssText 声明块的文本内容 length 属性数量 item() 属性名 getPropertyValue() 属性值 获取外联样式 var stylesheetList = document.styleSheets console.log(stylesheetList) 其中CSSRule对象包含一组css规则 可以修改href文件实现更换全局样式。 获取当前有效样式 var i = document.getElementsBy ...
