JavaScript
文章平均质量分 75
橧易灬
这个作者很懒,什么都没留下…
展开
-
js做放大镜 购物图片放大观察 鼠标移动 鼠标滚轮滚动 键盘控制 附详细代码及注释
相较于上一篇文章,本次仅增加了鼠标滚轮的监听oDiv.addEventListener(‘mousewheel’, function (e) {})在div中设置鼠标滚轮监听事件当e.wheelDelta>0为上滚;当e.wheelDelta>0为下滑;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-原创 2022-01-19 10:54:17 · 270 阅读 · 0 评论 -
js JavaScript2种做放大镜方式包含鼠标移动以及键盘控制 js+html+css 可自定义放大比例 附详细代码注释
js JavaScript2种做放大镜方式包含鼠标移动以及键盘控制 js+html+css 可自定义放大比例 附详细代码注释放大镜核心原理插入图片格式详细代码插入背景图格式详细代码放大镜核心原理1.新的盒子大小/所需放大区域大小=放大比例=新盒子里的图片大小/旧盒子里原图大小2.所需放大的盒子移动多少*放大比例=新盒子里图片所需移动比例3.新的盒子给溢出隐藏,插入图片格式详细代码<!DOCTYPE html><html lang="en"><head>原创 2022-01-18 17:16:24 · 673 阅读 · 0 评论 -
轮播图JS Javascript +html +css
轮播图JS Javascript +html +css 附详细代码注释1 html,css2 动态生成页面函数3, 定义函数程序 动态生成轮播图页面4, 自动轮播函数5, 鼠标移入移出6, 点击事件7, 浏览器最小化隐藏详细代码主体代码move运动函数1 html,css 只需要一个 空标签 定义好css样式 所有需要的轮播图标签 都可以 动态生成 根据需求 动态生成 轮播图 页面内容2 动态生成页面函数原创 2022-01-18 17:05:00 · 644 阅读 · 0 评论 -
JS Javascript 滚动条位置获取及 监听(JS做吸顶效果准备)上卷监听
JS Javascript 滚动条位置监听有文档类型声明没有文档类型声明页面滚动监听事件注意:**一般 页面滚动监听事件 每次触发都不会只触发一次一般 都是 页面滚动一次 触发多次函数程序**有文档类型声明上下document.documentElement.scrollTop左右document.documentElement.scrollLeft没有文档类型声明上下document.body.scrollTop左右document.body.scrollLeft页面滚动监听事件windo原创 2022-01-11 20:21:43 · 1073 阅读 · 0 评论 -
JS Javascript用js做根据滚动条位置监听触发事件(附示例代码) 类似京东首页搜索框
JS Javascript 用js做根据滚动条位置触发事件 类似京东首页搜索框1.设置滚动条监听事件2.添加滚动条位置判断触发事件3.示例代码1.设置滚动条监听事件window.addEventListener( ‘scroll’ , function(){});2.添加滚动条位置判断触发事件返回滚动条上侧距离:document.documentElement.scrollTop;3.示例代码<!DOCTYPE html><html lang="en"><hea原创 2022-01-11 20:14:24 · 610 阅读 · 0 评论 -
JS Javascript 用js做响应式布局(不常用,仅做拓展了解)
JS Javascript js做响应式布局[附实例代码]--不常用,仅做拓展了解1.设置浏览器视口监听事件resize2.在函数程序中定义一个变量赋值浏览器的用户视口宽度;3.在函数程序中判断用户浏览器的视口宽度进而设置不同宽度下的样式4.示例代码1.设置浏览器视口监听事件resizewindow.addEventListener( ‘resize’ , function(){});当用户的视口发生改变,运行相应的函数程序;2.在函数程序中定义一个变量赋值浏览器的用户视口宽度;3.在函数程序中判原创 2022-01-11 19:53:13 · 1895 阅读 · 0 评论 -
JS Javascript获取用户视口宽(响应式准备) window.innerWidth以及document.documentElement.clientWidth以及相关兼容解决
JS Javascript 获取用户视口宽 window.innerWidth以及document.documentElement.clientWidth以及相关兼容解决获取用户视口宽高为下一节响应式布局做准备包括滚动条的浏览器宽度高度获取方式 window.inner不包括滚动条的浏览器宽度高度获取方式当有文档声明时:document.documentElement当没有文档声明时:document.body获取用户视口宽高为下一节响应式布局做准备包括滚动条的浏览器宽度高度获取方式 window.in原创 2022-01-11 19:42:07 · 1684 阅读 · 0 评论 -
JS Javascript BOM操作之三大弹窗 BOM操作的顶级对象 警告窗口alert 输入弹窗prompt 确认弹窗confirm
JJS Javascript BOM操作之三大弹窗 警告窗口alert 输入弹窗prompt 确认弹窗confirm BOM操作的顶级对象windows三大弹窗警告弹窗window.alert('内容')输入弹窗window.prompt('内容')确认弹窗window.confirm('内容')BOM操作的顶级对象windows三大弹窗警告弹窗window.alert(‘内容’)引号中填警告的内容;window.alert('这个是alert警告弹窗');输入弹窗window.prom原创 2022-01-11 19:23:46 · 697 阅读 · 0 评论 -
JS js实现数组以及字符串去重的方法
JS js实现数组去重的方法,字符串同样可以用一.new Set二.创新数组查询判断加入三.原数组前后查询比较删除四.双重for循环遍历去重五.利用对象不能存储重复属性的特点方法1: 循环遍历对象方法二:遍历数组,将其作为键名存入对象中,对对象中键名的进行判断,当其内容不在对象中时,将其存入,并将其存入新数组中.字符串去重一.new Setset数据类型不允许有重复数据,会自动清除重复数据;通过合并展开运算符…对set类型转化为数组操作.var arr=[1,2,3,1,2,3,1,2,3];va原创 2022-01-08 14:00:54 · 1320 阅读 · 0 评论 -
纪念日计时器,有对象的看过来
纪念日计时器,倒计时,有背景音乐,鼠标滑动特效,自动判断目标时间相对现在时间是处于未来还是过去内附整套代码原创 2022-01-09 23:23:53 · 634 阅读 · 1 评论 -
JavaScript 实现页面内时间实时倒计时 计时器内附完整文件欢迎调用(可用于抢购倒计时,记录恋爱纪念日总时长等)输出对应的天数小时分钟秒数
JavaScript 实现页面内时间倒计时 计时器 可用于抢购倒计时,记录恋爱纪念日总时长等输出对应的天数小时分钟秒数注意:在下一个文章中将公布一个纪念日成品代码,欢迎各位来学习(复制)第一步:构建计时函数第二步.在body里创建输出的对象第三步.在body中调用js文件以及创建script标签第四步.设置计时器实现数字变动方法一.定时器方法二.延时器构造函数实现每隔1s递归五.设置样式成品图奉上注意:在下一个文章中将公布一个纪念日成品代码,欢迎各位来学习(复制)第一步:构建计时函数在这里我们按原创 2022-01-09 22:50:01 · 1226 阅读 · 0 评论 -
JS简单数据类型 布尔值 数值类型 字符串 null undefined 以及数据类型转换布尔值 数值类型 字符串 数据类型检查typeof()用法 isNaN()用法
JS简单数据类型 布尔值 数值类型 字符串 null undefined 以及数据类型转换布尔值 数值类型 字符串 数据类型检查typeof的用法一.布尔类型bool/boolean包含true,false强制转换布尔类型Boolean(变量/表达式)返还值为 false:返回值为true:自动转化为布尔类型一般用于需要判断的情况二.字符串类型string字符串语法:强制转化为字符串1.String(变量/表达式)2.变量.toString()自动转化为字符串 +号三.数值类型数值类型的分类整数1.二原创 2022-01-09 20:07:34 · 396 阅读 · 0 评论