基于面向对象的工具库练习
前期准备 全局作用域问题 解决这个问题是通过匿名函数，然后在匿名函数内创建对象，将window作为参数传入匿名函数，并将此对象赋值与window 12345678910(function (global) { // 判断global对象是否真的存在 if (!global) { console.error("当前环境不是浏览器环境！"); return false; } // 定义一个统一对外开放的对象 var mytool = new Object(); global.mytool = mytool;})(window); 此时在全局作用域中便存在了一个对象mytool。 选择器 实现一个选择器，用于替代getElementById、getElementsByClassName、getElementsByTagName三种获取方式。 实现方式，将需要搜索的标签名（id，class，tagname）传入方法参数，通过内部处理返回一个数组。 对于id选择器或class选择器来说，传入形参为#id或. ...
五一假期小作业
JS 版星级评分 如图所示，在曾经曾用 CSS3 的方案实现过。现在用 JavaScript 重新实现。 演示地址：https://antmoe.gitee.io/project/2020/05/01/index.html 遇到的问题 JavaScript 不能直接操纵伪类元素，因此只能用控制类的方式 没有搞明白三种状况 第一次点击 第二次点击是加星还是减星 判断循环判断循环（代码太烂） 部分过渡动画存在一定缺陷 嵌套过于多（代码太烂） 解决方案 由于五个五角星的实现依靠五个一模一样的<i>标签，因此使用事件委托方式 定义一个列表，用于存储当前页面中的所有星（<i>标签） 定义一个变量，用作用户是否第一次操作的标志。（即判断是否是第一次操作） 如果是第一次操作，那么直接循环添加类名即可 不是第一次操作，需要判断是否添加过类名 在用户第一次操作后，需要判断是加星还是减星 即判断当前点击的元素是否含有星 如有有星星，取消右边和当前点击的星 如果没有星，将左边所有未点亮的星和当前点击的星点亮 示例代码 123456789101 ...
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 ...
模仿一个在线表格
案例描述 展示地址：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 ...
模仿京东购物车实现加减操作
案例描述 如图所示，通过点击加号或者减号按钮会自动计算小计的价格。逻辑非常简单。 在线展示：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 ...
拖动图片改变位置
案例描述 点击图片可以复制图片 鼠标移动过程中，会有图片跟随 再次点击图片，图片固定位置。 在线展示：https://antmoe.gitee.io/project/2020/04/14/index.html 实现过程 通过过程我们可以分析出，需要三个事件进行绑定即 点击事件 点击后创建（复制）一个新的图片 鼠标跟随 图片跟随鼠标移动而移动 停止 即鼠标再次点击图片固定在当前位置。 代码实现 首先式 html 结构，这个非常简单，无非是一张图片在变动下位置即可。 1234567891011121314151617181920212223242526<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" / ...
css实现动态效果
css实现动态效果 个人头像悬停特效 效果图： 代码示例： 1234567891011121314151617181920212223242526272829303132333435363738<!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> .img { width: 150px; height: 150px; margin: 100px auto; background: lightcoral; border-radius: 50%; } ...
