JS基本事件案例练习
一、永远点不到的方块 示例：https://antmoe.gitee.io/project/2020/04/25/1.html 实现思路： 获取当前浏览器窗口的宽度和高度 既然是随机显示，那么位置不能超出当前浏览器的窗口。 获取div的宽度 计算宽度高度的最大值 也就说小方块移动的位置的边界。 为元素注册click（mouseover）事件 也就是鼠标点击（悬停）时触发的事件 click:点击事件 mouseover：悬停事件 源代码 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width ...
13事件
事件类型 依赖于设备的输入事件：键盘事件和鼠标事件，这些事件都是直接和设备相关的。 独立于设备的输入事件：例如cick事件等，这些事件并没有直接与设备相关 用户界面的相关事件：用户界面事件属于较高级的事件，一般多用于表单中的组件。状 变化的相关事件：这些事件与用户行为无关，而是由网络或浏览器触发的。 特定API事件：这些事件多用于特定场景的实现，例如 HTML5中提供的拖放API中的事件等 与错误处理的相关事件 注册事件 注册事件指：就是将 Javascript函数与指定的事件相关联。 句柄：被绑定的函数成为该事件的句柄。 通过事件属性 123456<button id="btn1" onclick="fn()">按钮</button><script> function fn() { console.log('你终于点击了我') }</script> DOM中相关对象提供的事件属性 123456 ...
Valine添加自定义表情
为你的Valine丰富表情吧。阿鲁小表情，哔哩哔哩表情····
12样式操作
获取内联样式 1<p id="p1" style="color: red;">666</p> 内联样式即写在标签里的样式（返回文本类型） 12var pElement = document.getElementById('p1').getAttribute('style')console.log(pElement) 通过DOM对象获取。（返回对象） 12var pElement = document.getElementById('p1')console.log(pElement.style) 对象的方法如下： cssText 声明块的文本内容 length 属性数量 item() 属性名 getPropertyValue() 属性值 获取外联样式 12var stylesheetList = document.styleSheetsconsole.log(stylesheetList) 其中CSSRule对象包含一组css规则 ...
11Element对象
什么是Element对象 DOM的标准规范中提供了 Elementi对象，该对象提供了HTML页面中所有元素所具有的属性和方法。 DOM标准规范中提供了Node对象，主要是依靠DOM节点树结构访问和更新HTML页面的内容。 而DOM标准规范中提供了 Element对象，主要是依靠DOM元素树结构访问和更新HTML页面的内容。 定位元素 1234567<div class='container'> <div></div> <div></div> <div></div> <div></div> <div></div></div> getElementsByTagName 123var container = document.getElementsByClassName("container")[0]var elements = container.getElements ...
模仿一个在线表格
案例描述 展示地址：https://antmoe.gitee.io/project/2020/04/19/index.html 实现过程 首先实现出一个静态效果（无js交互），当然了 这些表格我们是需要用js动态生成的。那么我们先来用JavaScript生成出一个静态表格 css样式 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859* { box-sizing: border-box;}body { margin: 0;}.tools { width: 100%; height: 30px; background-color: #efefef; margin-bottom: 20px;}table { width: 2889px; table-layout: fixed; border-co ...
左右移动元素及省市联动案例
案例描述 两个案例，分为左右移动元素与省市联动。如图所示 左右移动元素 左右移动案例很简单，思路大致如下： 获取当前点击的元素 移动元素 单个 将一个元素标签移动到右边 全部 将全部元素移动到右侧 在线演示：https://antmoe.gitee.io/project/2020/04/18/index.html 我们的html结构如下： 123456789101112131415161718192021222324<div class="container"> <select id="first" size="5" multiple> <option>Argentina</option> <option>Brazil</option> <option>Canada</option> <option>Chile</opti ...
Hexo关于Butterfly的一些小修改
Hexo关于Butterfly的一些小修改
模仿京东购物车实现加减操作
案例描述 如图所示，通过点击加号或者减号按钮会自动计算小计的价格。逻辑非常简单。 在线展示：https://antmoe.gitee.io/project/2020/04/18/shop.html 实现过程 逻辑非常简单，获取值计算即可。 为两个按钮分别绑定事件 改变值 返回 代码实现 加号与减号逻辑几乎一样，以加号示例。 首先我们得HTML结构为 12345678910111213141516171819202122232425262728293031323334353637383940414243444546<table id="cart"> <tr> <th><input type="checkbox" name="" id="checkall"> 全选</th> <th>商品</th> <th>单价</th> <t ...
