随笔分类 - JavaScript
摘要：代码实现： <body></body>内容： <div></div> <script> var div = document.querySelector('div'); getDate(); setInterval(getDate, 1000); function getDate() { var d
阅读全文
摘要：要求： 有两个页面：index.html和login.html。在login.html页面中点击登录，会跳转到index.html，并将输入的用户名传递到index.html。 实现思路： 第一个登录页面，里面有提交表单，action提交到index.html页面 第二个页面，利用了URL里面的lo
阅读全文
摘要：代码实现： <body></body>内容： <body> <div></div> <script> var div = document.querySelector('div'); var timer = 5; fn(); setInterval(fn, 1000); function fn()
阅读全文
摘要：JS是单线程 JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。 这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之
阅读全文
摘要：统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。 URL的一般语法格式为： protocol://host[:port]/path/[?query]#fra
阅读全文
摘要：要求： 点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信 实现思路： 按钮点击之后，禁用disabled为true 同时按钮里面的内容会变化，button里面的内容通过innerHTML修改 里面秒数是有变化的，因此需要用到定时器 定义一个变量，在定时器里面，不断递减 如果变量为0说明时间
阅读全文
摘要：实现思路： 调用显示剩余时间函数，具体见countDown(time) 使用定时器setInterval(countDown, 1000)，每隔一秒调用一次，即每秒刷新一次剩余时间，实现倒计时的动态效果 代码实现： HTML: <div> <span class="day">1</span> <sp
阅读全文
摘要：区别： setTimeout延时时间到了，就去调用这个回调函数。调用一次后，就结束了这个定时器。 setInterval每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数。 案例： setTimeout： // 过1秒后输出'只输出一次' setTimeout(function(
阅读全文
摘要：要求： 用户在输入框输入内容时，上面的大号字体盒子con显示（这里面的字号更大） 实现思路： 表单检测用户输入：给表单添加键盘事件 同时把快递单号里面的值value获取过来赋值给con盒子innerText做为内容 如果快递单号里面内容为空，则隐藏大号字体盒子con盒子 代码实现： HTML： <d
阅读全文
摘要：要求： 有一输入框，当用户按下s键，光标自动定位到输入框中。 实现思路： 检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面 使用键盘事件对象里面的keyCode判断用户按下的是否是s键 搜索框获得焦点：使用focus()方法 代码实现： 内容： <input type="text">
阅读全文
摘要：要求： 在浏览器页面中，图片实时跟随鼠标 鼠标在图片的中心位置 实现思路： 鼠标不断移动，使用鼠标移动事件：mousemove 在页面中移动，给document注册事件 图片要移动距离，而且不占位置，使用绝对定位即可 每次鼠标移动，获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可
阅读全文
摘要：前言： Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。 比如： 谁绑定了这个事件。 鼠标触发事件的话，会得到鼠标的相关信息，如鼠
阅读全文
摘要：HTML: <div>123</div> CSS: div { width: 100px; height: 100px; background-color: pink; } JS: 传统注册方式: var div = document.querySelector('div'); div.onclic
阅读全文
摘要：前言： 在DOM节点操作中，innerHTML和createElement都可以实现创建元素。它们实现的功能类似，但是效率却相差很大。本文分别统计用innerHTML字符串拼接方式、innerHTML数组方式和createElement方式创建1000次元素的时间，来比较它们之间效率的高低。 比较思
阅读全文
摘要：三种创建元素的方式： document.write() element.innerHTML document.createElement() 初始HTML内容： <button>btn</button> <p>p</p> <div class="inner">inner</div> <div cla
阅读全文
摘要：要求： HTML标签只写一行表头 通过JS来写动态的表格（有多少组数据，就自动创建多少行表格） 为学习和演示，采用固定的数据，不涉及调用后台数据 代码实现： HTML内容： <table cellspacing="0"> <thead> <tr> <th>姓名</th> <th>科目</th> <t
阅读全文
摘要：要求： 获得下一个/上一个兄弟元素节点，不包括文本节点等 解决IE兼容性问题 代码实现： 获得下一个兄弟元素节点： function getNextElement(element) { var el = element; while (el = el.nextSibling) { if (el.no
阅读全文
摘要：代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http
阅读全文
摘要：要求： 有一系列按钮，要求每单击其中一个，该按钮改变样式（以背景颜色为例），其他按钮恢复保持默认样式。 实现思路： 获取所有按钮元素 首先先把其他按钮的背景颜色去掉 再单独设置自己的样式 代码实现： 仅展示<body></body>标签内的内容 <body> <button>按钮1</button>
阅读全文
摘要：要求： 输出一个给定字符串abdgdbcaethbganmugthaesqszaphfdvwd中出现次数最多的字符，并统计其次数。 实现思路： 利用charA()遍历这个字符串 把每个字符都存储给对象，如果对象没有该属性，就先幅值为1，如果存在了就+1 遍历对象，得到最大值和该字符 在遍历的过程中，
阅读全文
浙公网安备 33010602011771号