摘要: 实现思路: 调用显示剩余时间函数,具体见countDown(time) 使用定时器setInterval(countDown, 1000),每隔一秒调用一次,即每秒刷新一次剩余时间,实现倒计时的动态效果 代码实现: HTML: <div> <span class="day">1</span> <sp 阅读全文
posted @ 2020-10-11 09:16 火星飞鸟 阅读(1115) 评论(0) 推荐(0) 编辑
摘要: 区别: setTimeout延时时间到了,就去调用这个回调函数。调用一次后,就结束了这个定时器。 setInterval每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数。 案例: setTimeout: // 过1秒后输出'只输出一次' setTimeout(function( 阅读全文
posted @ 2020-10-11 08:40 火星飞鸟 阅读(218) 评论(0) 推荐(0) 编辑
摘要: 要求: 用户在输入框输入内容时,上面的大号字体盒子con显示(这里面的字号更大) 实现思路: 表单检测用户输入:给表单添加键盘事件 同时把快递单号里面的值value获取过来赋值给con盒子innerText做为内容 如果快递单号里面内容为空,则隐藏大号字体盒子con盒子 代码实现: HTML: <d 阅读全文
posted @ 2020-10-11 08:06 火星飞鸟 阅读(564) 评论(0) 推荐(0) 编辑
摘要: 要求: 有一输入框,当用户按下s键,光标自动定位到输入框中。 实现思路: 检测用户是否按下了s键,如果按下s键,就把光标定位到搜索框里面 使用键盘事件对象里面的keyCode判断用户按下的是否是s键 搜索框获得焦点:使用focus()方法 代码实现: 内容: <input type="text"> 阅读全文
posted @ 2020-10-11 07:52 火星飞鸟 阅读(705) 评论(0) 推荐(0) 编辑
摘要: 要求: 在浏览器页面中,图片实时跟随鼠标 鼠标在图片的中心位置 实现思路: 鼠标不断移动,使用鼠标移动事件:mousemove 在页面中移动,给document注册事件 图片要移动距离,而且不占位置,使用绝对定位即可 每次鼠标移动,获得最新的鼠标坐标,把这个x和y坐标作为图片的top和left值就可 阅读全文
posted @ 2020-10-10 21:12 火星飞鸟 阅读(1514) 评论(0) 推荐(0) 编辑
摘要: 前言: Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法。 比如: 谁绑定了这个事件。 鼠标触发事件的话,会得到鼠标的相关信息,如鼠 阅读全文
posted @ 2020-10-09 21:33 火星飞鸟 阅读(2500) 评论(0) 推荐(4) 编辑
摘要: HTML: <div>123</div> CSS: div { width: 100px; height: 100px; background-color: pink; } JS: 传统注册方式: var div = document.querySelector('div'); div.onclic 阅读全文
posted @ 2020-10-09 20:51 火星飞鸟 阅读(203) 评论(0) 推荐(0) 编辑
摘要: 前言: 在DOM节点操作中,innerHTML和createElement都可以实现创建元素。它们实现的功能类似,但是效率却相差很大。本文分别统计用innerHTML字符串拼接方式、innerHTML数组方式和createElement方式创建1000次元素的时间,来比较它们之间效率的高低。 比较思 阅读全文
posted @ 2020-10-09 19:21 火星飞鸟 阅读(963) 评论(0) 推荐(0) 编辑
摘要: 三种创建元素的方式: document.write() element.innerHTML document.createElement() 初始HTML内容: <button>btn</button> <p>p</p> <div class="inner">inner</div> <div cla 阅读全文
posted @ 2020-10-09 18:51 火星飞鸟 阅读(3865) 评论(0) 推荐(0) 编辑
摘要: 要求: HTML标签只写一行表头 通过JS来写动态的表格(有多少组数据,就自动创建多少行表格) 为学习和演示,采用固定的数据,不涉及调用后台数据 代码实现: HTML内容: <table cellspacing="0"> <thead> <tr> <th>姓名</th> <th>科目</th> <t 阅读全文
posted @ 2020-10-09 15:49 火星飞鸟 阅读(980) 评论(0) 推荐(0) 编辑