浮华夕颜

2020年5月24日

① 核心思路：5秒之后，就把这个广告隐藏起来 ② 用定时器setTimeout() <body> <img src="images/ad.jpg" alt="" class="ad"> <script> var ad = document.querySelector('.ad'); setTimeo Read More

posted @ 2020-05-24 16:53 浮华夕颜 Views(584) Comments(0) Diggs(0) Edit

事件高级

下面从这七个方面来介绍事件高级：注册事件（绑定事件）删除事件（解绑事件） DOM事件流事件对象阻止事件冒泡常用的鼠标事件常用的键盘事件 1. 注册事件（绑定事件）给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式。传统注册方式：利用on开头的 Read More

posted @ 2020-05-24 15:24 浮华夕颜 Views(166) Comments(0) Diggs(0) Edit

案例：模拟京东快递单号查询

实现功能：当我们在文本框输入内容时，文本框上面自动显示大字号的内容 ① 快递单号输入内容时，上面的大号字体盒子（con）显示出来（这里面的字号更大） ② 表单检测用户输入：给表单添加键盘事件 ③ 同时把快递单号里面的值（value）获取过来赋值给con盒子（innerText）作为内容 ④ 如果快递 Read More

posted @ 2020-05-24 15:08 浮华夕颜 Views(606) Comments(0) Diggs(0) Edit

2020年5月23日

案例：按下s键时光标就自动定位到搜索框

① 核心思路：检测用户是否按下了s键，如果按下了s键，就把光标定位到搜索框里面 ② 使用键盘事件对象里面的keyCode判断用户按下的是否是s键 ③ 搜索框获得焦点：使用js里面的focus() 方法 <body> <input type="text"> <script> var search = Read More

posted @ 2020-05-23 01:02 浮华夕颜 Views(3252) Comments(0) Diggs(0) Edit

案例：跟随鼠标移动的图片

① 鼠标不断的移动，使用鼠标移动事件：mousemove ② 在页面中移动，给document注册事件 ③ 图片要移动距离，而且不占位置，所以需要使用绝对定位 ④ 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个 x 和 y 坐标作为图片的 top 和 left 值就可以移动图片这个案例 Read More

posted @ 2020-05-23 00:39 浮华夕颜 Views(515) Comments(0) Diggs(0) Edit

如何像豆丁网一样不让复制文字？

1. 禁止鼠标右键菜单 contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单 document.addEventListener('contextmenu', function(e) { e.preventDefault(); }) 2. 禁止鼠标选中（selec Read More

posted @ 2020-05-23 00:18 浮华夕颜 Views(143) Comments(0) Diggs(0) Edit

2020年5月22日

Web APIs——DOM

什么是DOM？文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 ① 对于JavaScript，为了能够使Java Read More

posted @ 2020-05-22 00:41 浮华夕颜 Views(525) Comments(0) Diggs(0) Edit

2020年5月21日

案例：动态生成表格

posted @ 2020-05-21 22:58 浮华夕颜 Views(420) Comments(0) Diggs(0) Edit

案例：简单版发布留言功能

<textarea name="" id=""></textarea > <button>发布</button> <ul></ul> <script> // 1. 获取元素 var btn = document.querySelector('button'); var text = document Read More

posted @ 2020-05-21 22:33 浮华夕颜 Views(245) Comments(0) Diggs(0) Edit

案例：下拉菜单功能

posted @ 2020-05-21 22:32 浮华夕颜 Views(198) Comments(0) Diggs(0) Edit

公告