随笔分类 - JavaScript
摘要：代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http
阅读全文
摘要：场景： 打车起步价13(3公里内),之后每多一公里增加5块钱。用户输入公里数就可以计算打车价格。 如果有拥堵情况,总价格多收取10块钱拥堵费。 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam
阅读全文
摘要：代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http
阅读全文
摘要：代码实现： ToDoList.html（复制并保存为html文件，打开即可见效果）： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta n
阅读全文
摘要：功能要求： 点击 tab 栏，可以切换效果. 点击 + 号，可以添加 tab 项和内容项. 点击 x 号，可以删除当前的 tab 项和内容项. 双击tab项文字或者内容项文字，可以修改里面的文字内容. 代码实现： Obj_TAB.html（复制并保存为html文件，打开即可见效果）： <!DOCTY
阅读全文
摘要：1. 触屏事件 1.1 触屏事件概述 移动端浏览器兼容性较好，不需要考虑 JS 的兼容性问题。但是移动端也有自己独特的地方，比如触屏事件touch（触摸事件），Android 和 IOS 都有 touch对象代表一个触摸点，触摸点可能是一根手指，也可能是一根触摸笔 触屏事件可响应用户手指（或触控笔）
阅读全文
摘要：代码实现： mobileAutoPlay.html（复制并保存为html文件，打开并切换为移动端显示，即可见效果）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten
阅读全文
摘要：代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http
阅读全文
摘要：1. 元素偏移量 offset 1.1 offset 概述 offset翻译过来就是偏移量，使用offset系列相关属性可以动态得到该元素的位置（偏移）、大小等 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 返回的数值都不带单位 1.2 offset 系列常用属性 1.3 off
阅读全文
摘要：1. DOM简介 1. 1 什么是DOM 文档对象模型（Document Object Model，简称 DOM），是 W3C组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。 1.2 DOM树 **文档：**一个页面就是一个文档，DOM中使用 document 表示 元素：页面中
阅读全文
摘要：代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
阅读全文
摘要：1. BOM概述 1.1 什么是BOM BOM**（Browser Object Model）即浏览器对象模型**，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性 BOM 缺乏标准，JavaScript
阅读全文
摘要：代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http
阅读全文
摘要：要求： 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理 图片播放的同时，下面小圆圈模块跟随一起变化 点击小圆圈，可以播放相应图片 鼠标不经过轮播图，轮播图也会自动播放图片 鼠标经过，轮播图模块，自动播放停止 代码实现： autoPlay
阅读全文
摘要：简单动画函数： animate(obj, target, time, callback); 注意： obj：目标对象，需要加绝对定位 target：目标位置 time：动画间隔时间 callback：回调函数 代码实现： function animate(obj, target, time, cal
阅读全文
摘要：当鼠标移动到元素上时就会触发mouseenter事件， 类似mouseover，它们两者之间的差别是： mouseover： 鼠标经过自身盒子会触发，经过子盒子还会触发（因为存在冒泡） mouseenter： 只会经过自身盒子触发（不会冒泡） 跟mouseenter对应的，鼠标离开事件mousele
阅读全文
摘要：代码实现： function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0, top: window.pa
阅读全文
摘要：代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
阅读全文
摘要：代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
阅读全文
摘要：实现思路： 在盒子内点击，想要得到鼠标距离盒子左右的距离 首先得到鼠标在页面中的坐标e.pageX,e.page 其次得到盒子在页面中的距离box.offsetLeft,box.offsetTop 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标 如果想要移动一下鼠标，就要获取最新
阅读全文
浙公网安备 33010602011771号