![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
南南合作
这个作者很懒,什么都没留下…
展开
-
设置下拉框中的选中项
点击设置按钮下拉框随机选中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport&q原创 2018-11-01 10:27:58 · 563 阅读 · 0 评论 -
定时器setTimeout()与setInterval()
setTimeout()在指定的毫秒数到达之后执行指定的函数,只执行一次// 创建一个定时器,1000毫秒后执行,返回定时器的标示var timerId = setTimeout(function () { console.log('111');}, 1000);// 取消定时器的执行clearTimeout(timerId);setInterval()定时调用的函数...原创 2018-11-07 16:39:30 · 125 阅读 · 0 评论 -
BOM中的location对象
location对象是window对象下的一个属性,使用的时候可以省略window对象。location可以获取或者设置浏览器地址栏的URL在控制台输入location,展开可以看到它的成员。其中用到最多的属性是href获取浏览器的当前地址location.href()或者location.assign()修改浏览器的地址 (记录历史,浏览器可以返回修改之前的地址)location....原创 2018-11-07 17:21:26 · 211 阅读 · 0 评论 -
BOM中的history对象和navigator对象
history对象前进功能 history.forward() 或者history.go(n)后退功能 history.back() 或者history.go(-n)一般情况下不需要这个功能,OA系统有可能会用得到。navigator对象控制台输入navigator.userAgent,可以获取当前的系统版本和浏览器版本,判断出当前是pc端设备还是移动端设备,从而返回不同的页面。...原创 2018-11-07 18:31:39 · 247 阅读 · 0 评论 -
偏移三大系列--offset、client和scroll
offsetoffsetParent 是获取距离当前元素最近的定位父元素,如果没有定位父元素此时是bodyoffsetWidth=内容+padding+边框offsetHeight=内容+padding+边框clientclientLeft 是border-left 的宽度clientTop 是border-top 的宽度clientWidth=内容+pad...原创 2018-11-07 19:27:41 · 299 阅读 · 0 评论 -
select下拉框实现多选功能
<select id="all"> <option>牡丹</option> <option>向日葵</option> <option>薰衣草</option> <option>雏菊</op原创 2018-11-05 15:55:27 · 41350 阅读 · 5 评论 -
JS实现点击按钮移动选取元素
方法一appendChild()子元素事件不会丢失,removeChild()清除子元素不会造成内存泄漏方法二innerHTML,如果子元素有事件,移动后,元素事件会丢失all.innerHTML = “”; 清空子元素时,如果子元素有事件,会发生内存泄漏<!DOCTYPE html><html lang="en"><head> <...原创 2018-11-05 16:40:10 · 2134 阅读 · 1 评论 -
JS中注册事件与移除事件的三种方式及兼容性处理
第一种(所有浏览器都支持,但是无法给同一个对象的同一个事件注册多个事件处理函数) btn.onclick = function() { alert(&amp;amp;quot;111&amp;amp;quot;) } btn.onclick = function() { alert(&amp;amp;quot;222&amp;amp;quot;) }第二种(dom标准中原创 2018-11-05 20:19:31 · 2754 阅读 · 0 评论 -
JS中拖拽demo
html部分 &lt;div id="box"&gt; &lt;div id="drop"&gt;此处可以移动拖拽 &lt;span id="close"&gt;[关闭]&lt;/span&gt; &l原创 2018-11-08 13:05:02 · 306 阅读 · 0 评论 -
JS模拟滚动条功能实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-11-12 13:58:24 · 5951 阅读 · 0 评论 -
获取url中的参数
var url = 'www.baidu.com/s?ie=utf-8&f=3&rsv_bp=0&rsv_idx=1&tn=baidu&wd=%E5%93%88%E5%93%88&rsv_pq=84a1b13c0000e273&rsv_t=1705bXNJfVLieD09bG2VesPjLfEPwDtRrAJEBngVIjcFGHqSq8%2...原创 2019-02-22 16:50:22 · 217 阅读 · 0 评论 -
格式化日期
格式化日期对象,返回 yyyy-MM-dd HH:mm:ss 的形式function formatDate(date) { //判断参数data是否是日期对象 if (!(date instanceof Date)) { console.error('date不是日期对象') r...原创 2019-02-18 19:37:24 · 247 阅读 · 0 评论 -
计算时间差,返回相差的天、时、分、秒
function getInterval(start, end) { //两个日期相差的毫秒数 var interval = end - start; //定义相差的天数、小时数、分钟数、秒数 var day, hour, minute, second; interval /=...原创 2019-02-18 20:36:49 · 1151 阅读 · 0 评论 -
隐藏显示二维码
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;原创 2019-02-25 11:17:03 · 1184 阅读 · 0 评论 -
tab栏切换
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0;原创 2019-02-25 11:38:42 · 117 阅读 · 0 评论 -
JS实现动态创建表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2019-02-25 15:39:10 · 437 阅读 · 1 评论 -
页面加载事件
onload window.onload = function() { // 当页面加载完成执行 // 当页面完全加载所有内容(包括图像、脚本文件、CSS 文件等)执行 }onunload window.onunload=function(){ // 当用户退出页面时执行 ...原创 2018-11-07 10:48:10 · 1689 阅读 · 0 评论 -
搜索文本框
当文本框里有placeholder属性时,获得焦点,没有清空文本框 <input type="text" placeholder="请输入搜索关键字" id="txtSearch"> <input type="button" value="搜索" id="btnSearch">效果如图:想要文本框获取焦点时清空文本框&a原创 2018-11-01 11:10:48 · 571 阅读 · 0 评论 -
全选反选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-11-01 13:52:53 · 84 阅读 · 0 评论 -
自定义属性操作
获取自定义属性的值getAttribute()设置自定义属性setAttribute(“属性名”,“属性值”)移除属性removeAttribute(“属性名”)原创 2018-11-01 14:08:40 · 128 阅读 · 0 评论 -
javascript中的replace()方法
多个类样式只替换其中一个<div class="bg hide" id="box"></div>这里是把bg,hide两个样式替换成show一个样式了,如果写成“bg show”虽然能达到效果,但是如果元素的类样式很多的时候,该方式是不可取的 var box=document.getElementById("box"); box.className="s...原创 2018-11-01 16:46:59 · 192 阅读 · 0 评论 -
高亮显示输入的文本框
<script> var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; //判断input是否是text ...原创 2018-11-01 17:18:15 · 1075 阅读 · 0 评论 -
隔行变色和高亮显示
<script> //1.隔行变色 //获取所有的li元素,判断是奇数行还是偶数行 var list = document.getElementById("list"); var lis = list.getElementsByTagName("li"); for (var i = 0; i < li...原创 2018-11-01 18:00:07 · 336 阅读 · 0 评论 -
javscript getElementsByTagName()报错
var title = document.getElementsByClassName("title");var spans = title.getElementsByTagName("span")报错: Uncaught TypeError: title.getElementsByTagName is not a function解决方法:给title加索引 var spans = t...原创 2018-11-01 19:24:01 · 551 阅读 · 0 评论 -
tab栏切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-11-01 19:43:05 · 97 阅读 · 0 评论 -
常见的DOM操作(文档对象模型)
获取元素getElementById()getElementByTagName()等给元素注册事件onclickonmouseoveronmouseoutonfocusonblur操作元素的属性 非表单元素 href title src alt等 表单元素 type value checked...原创 2018-11-01 19:58:20 · 113 阅读 · 0 评论 -
DOM事件的三个阶段及阻止事件冒泡
事件的三个阶段捕获阶段当前目标阶段冒泡阶段JS中注册事件的三种方式:onclick只有事件冒泡,attachEvent只有两个参数, 只有事件冒泡,addEventListener三个参数,最后一个参数默认false为事件冒泡,true为事件捕获。所以demo用的addEventListener这个方式事件冒泡html部分 &lt;div id="box1" style=...原创 2018-11-06 18:01:45 · 1070 阅读 · 0 评论 -
事件对象的属性和方法
&lt;body&gt; &lt;input type="button" value="按钮" id="btn"&gt; &lt;script&gt; var btn = document.getElementById('btn'); btn.onclick原创 2018-11-06 18:49:49 · 888 阅读 · 0 评论 -
JS获取页面滚动的距离及浏览器兼容问题解决
设置body高度为1000px;页面滚动出去的距离:document.body.scrollLeft;document.body.scrollTop;有些浏览器是使用documentElement(文档的根元素 html标签)来获取的:document.documentElement.scrollLeft;document.documentElement.scrollTop;浏览器...原创 2018-11-06 19:53:16 · 2248 阅读 · 0 评论 -
pageX/pageY的兼容性问题
e.clientX/e.clientY 鼠标在可视区域中的位置e.pageX/e.pageY 鼠标在页面中的位置 有兼容性问题 从IE9以后才支持pageY = clientY + 页面滚动出去的距离 // 获取页面滚动出去的距离 function getScroll() { var scrollLeft = document.body.s...原创 2018-11-06 19:56:52 · 1362 阅读 · 0 评论 -
DOM中取消默认行为的执行
return false; 用的最多e.preventDefault(); DOM标准方法e.returnValue = false; IE的老版本,非标准方式 <a id="link" href="http://www.baidu.com">baidu</a> <script> var link = docume...原创 2018-11-06 20:14:07 · 335 阅读 · 0 评论 -
常用的鼠标和键盘事件
onmouseup 鼠标按键放开时触发onmousedown 鼠标按键按下触发onmousemove 鼠标移动触发onkeyup 键盘按键按下触发onkeydown 键盘按键抬起触发原创 2018-11-06 20:27:49 · 158 阅读 · 0 评论 -
JS实现放大镜功能及mouseenter与mouseover的区别
&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&am原创 2018-11-09 15:11:07 · 419 阅读 · 0 评论 -
阻止a标签默认跳转
<a href="javascript:void(0)">aaa</a>href的作用:当:前面是http协议时,点击a标签,会将浏览器的地址栏切换成href中指定的地址当:前面是javascript伪协议时,则是告诉浏览器接下来要执行javascript代码void是运算符,执行void后面的表达式,始终返回的是undefined.所以也可以写成 <a...原创 2018-11-02 09:09:26 · 6396 阅读 · 0 评论 -
JS实现轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2019-03-01 15:58:25 · 134 阅读 · 1 评论