文章目录
前言
代码谁都能敲，但不是谁都会敲。电脑执行有很强的逻辑性，要想把我们所需的效果通过代码表达出来，还需要清楚整个事件的具体过程。
代码已经敲的很多了，但是具体敲代码的逻辑思想才是解题的关键。本文记录了几个案例的编程思想，可以跟随思路在脑海中过一遍代码方法，下面一起来看看吧！
提示：以下是本篇文章正文内容，下面案例可供参考
一、事件概述
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解： 触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
二、事件三要素
- 事件源（谁）：触发事件的元素
- 事件类型（什么事件）： 例如 click 点击事件
- 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数
三、执行事件的步骤
1、获取事件源
2、注册事件（绑定事件）
3、添加事件处理程序（采取函数赋值形式）
案例思路及实现
案例一 分时问候
案例描述
根据不同事件，页面显示不同图片，同时显示不同的问候语
如上午打开页面，显示上午好，显示上午好的图片，以此类推
案例分析
1、根据系统不同事件来判断，所以需要用到日期内置对象
2、利用多分支语句来设置不同图片
3、需要一个图片，并且根据时间修改，需要操作图片元素src属性
4、需要一个div元素，显示不同问候语，根据时间修改元素内容
代码如下（示例）：
<body>
<img src="images/s.gif" alt="">
<div>上午好</div>
<script>
// 获取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
// 得到当前小时数
var date = new Date();
var h = date.getHours();
// 判断小时数改变图片和文字信息
if(h < 12) {
img.src = 'images/s.gif';
div.innerHTML = '上午好';
}else if (h < 18) {
img.src = 'images/x.gif';
div.innerHTML = '下午好';
}else {
img.src = 'images/w.gif';
div.innerHTML = '晚上好';
}
</script>
</body>
案例二 仿京东显示密码
案例描述
点击小眼睛按钮可将密码框切换为文本框，并可以查看密码明文
案例分析
1、核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
2、一个按钮两个状态，点击一次，切换为文本框，再点击一次切换为密码框
3、算法：利用一个flag变量，来判断flag的值
如果是1就切换为文本框，flag设置为0；
如果是0就切换为密码框，flag设置为1；
<body>
<div class="box">
<label for="">
<img src="../images/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
// 获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 注册事件 处理程序
var flag = 0;
eye.onclick = function(){
if(flag == 0) {
pwd.type = 'text';
eye.scr = '../images/open.png'
flag = 1;
}else {
pwd.type = 'password';
eye.src = '../images/close.png'
flag = 0;
}
}
</script>
</body>
案例三 循环精灵图背景
案例描述
利用for循环设置一组精灵图背景
案例分析
1、首先精灵图排列有规律
2、核心思路：利用for循环修改精灵图片 背景位置background-position
3、计算图片背景位置与y坐标的数学关系
4、让for循环里的i索引号*倍数表示图片的x和y坐标
<script>
// 获取元素 放精灵图的小li
var lis = document.querySelectorAll('li');
for (var i = 0;i < lis.length; i++) {
// 找到精灵图坐标规律 ，更改index倍数关系；
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
案例四 密码框格式提示错误信息
案例描述
用户离开密码框，里面密码个数或字符不符合规范，则提示错误信息，否则提示输入正确
案例分析
1、首先判断的事件是表单失去焦点 onblur
2、判断输入内容是否正确，提示相关信息
3、因为里面样式变化较多，采取className修改样式
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
// 1 获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
// 2 注册事件 失去焦点
ipt.onblur = function(){
// 根据表单长度 ipt.value.length
if(this.value.length < 6 || this.value.length > 16){
// console.log('错误');
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对要求6~16位';
}else {
message.className = 'message right';
message.innerHTML = '您输入的正确';
}
}
</script>
</body>
案例五 表格隔行变色
案例描述
鼠标在表格哪一行停留，哪一行背景颜色改变便于查看
案例分析
1、用到鼠标事件 鼠标经过onmouseover 鼠标离开onmouseout
2、核心思路：鼠标经过tr行，当前行变换背景颜色，鼠标离开去掉背景颜色
3、注意：表头第一行thead不需要换色，获取tbody里面的行
<script>
// 1.获取元素 获取的是 tbody 里面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2. 利用循环绑定注册事件
for (var i = 0; i < trs.length; i++) {
// 3. 鼠标经过事件 onmouseover
trs[i].onmouseover = function() {
// console.log(11);
this.className = 'bg';
}
// 4. 鼠标离开事件 onmouseout
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>
案例六 全选
案例描述
1、选框一开始默认未选中状态
2、复选框全部选中则全选框也选中，反之亦然
3、再次点击全选框取消全选
案例分析
- 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
2、复选框全部选中，全选框才选中做法：给所有的子复选框注册单击事件，每次点击下面的复选框都要循环检查全部复选框是否全被选中，如果有一个没选中则全选不选中
<script>
// 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
// 获取元素
var j_cbAll = document.getElementById('j_cbAll');
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
// 全选按钮注册事件
j_cbAll.onclick = function() {
// this.checked 当前复选框的选中状态
console.log(this.checked);
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
// 给所有的子复选框注册单击事件
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break;
}
}
// 设置全选按钮的状态
j_cbAll.checked = flag;
}
}
</script>
案例七 tab栏切换
案例描述
鼠标点击tab选项，下面显示对应内容
案例分析
1、Tab栏切换有2个大的模块
2、tab栏选项卡点击后当前样式变化，其余不变，使用排他思想修改类
3、下面的模块内容跟随选项卡变化，写到点击事件里
4、下面模块内容与选项卡一 一对应，相匹配
5、核心思路：给上面的选项小li添加自定义属性索引，属性值从0开始编号
6、当点击小li时，下面对应序号的模块使用排他思想显示内容，其余隐藏
<script>
// 获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循环，给选项卡绑定点击事件
for (var i = 0; i < lis.length; i++) {
// 开始给5个小li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 1. 上的模块选项卡，当前这一个底色会是红色，其余不变（排他思想）
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
</script>
案例八 新浪下拉菜单
案例描述
仿写网页页面下拉菜单
案例分析
1、导航栏里的li要有鼠标经过效果，所以循环注册鼠标事件
2、核心原理： 当鼠标经过，下拉菜单显示，鼠标离开，下拉菜单隐藏
<script>
// 1. 获取元素
var nav = document.querySelector('.nav');
var lis = nav.children; // 得到4个小li
// 2.循环注册事件
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}
</script>
案例九 简易留言发布
案例描述
制作一个简易留言板，输入内容，点击按钮，新增留言
案例分析
1、核心思路：点击按钮后，动态创建一个小li，添加到ul里
2、创建li的同时，把文本域里的值通过li.innerHTML赋值给li
3、新留言从后面显示就用appendChild，从前面显示就用insertBefore
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. 注册事件
btn.onclick = function() {
if (text.value == '') {
alert('您没有输入内容');
return false;
} else {
// console.log(text.value);
// (1) 创建元素
var li = document.createElement('li');
// 先有li 才能赋值
li.innerHTML = text.value;
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
}
}
</script>
</body>
案例十 留言删除
案例描述
将发布的不良留言删除
案例分析
1、在将文本域里面的值赋值给新增的小li时，多添加一个删除链接
2、需要把所有的链接获取过来，当点击当前删除链接时删除当前链接所在小li
3、阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. 注册事件
btn.onclick = function() {
if (text.value == '') {
alert('您没有输入内容');
return false;
} else {
// console.log(text.value);
// (1) 创建元素
var li = document.createElement('li');
// 先有li 才能赋值
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
// (3) 删除元素 删除的是当前链接的li 它的父亲
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// 删除的是 li 当前a所在的li this.parentNode;
ul.removeChild(this.parentNode);
}
}
}
}
</script>
案例十一 跟随鼠标的天使
案例描述
让小天使图片一直跟随鼠标移动
案例分析
1、鼠标移动事件：mousemove
2、在页面中移动，给document注册事件
3、图片要移动距离，且不占位置，使用绝对定位
4、核心原理：每次鼠标移动，获去最新鼠标坐标，把鼠标x和y坐标作为定位图片的left值和top值即可
<style>
img {
position: absolute;
}
</style>
<body>
<img src="../images/angel.gif" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove',function(e){
// 1、mousemove 鼠标移动1px 就会触发事件
//
// 2、核心原理： 每次鼠标移动，获取最新的鼠标坐标作为定位图片的top和left值
var x = e.pageX;
var y = e.pageY;
console.log('x坐标' + x,'y坐标是' + y);
// 3 千万不要忘记给left和top值添加px单位
pic.style.left = x - 50 + 'px';
pic.style.top = y - 40 + 'px';
})
</script>
</body>
案例十二 模拟京东按键输入内容
案例描述
当我们按下 s 键， 光标就定位到搜索框（文本框获得焦点）。
案例分析
1、核心思路：检测用户是否按下s键，如果按下就把光标定位到搜索框里面
2、使用键盘事件对象里的keyCode判断用户按下的是否是s键
3、搜索框获得焦点：使用js里面的focus（）方法
注意：触发获得焦点事件，可以使用 元素对象.focus()
<input type="text">
<script>
// 获取输入框
var search = document.querySelector('input');
// 给document注册keyup事件
document.addEventListener('keyup', function(e) {
// 判断keyCode的值
if (e.keyCode === 83) {
// 触发输入框的获得焦点事件
search.focus();
}
})
</script>
案例十三 模拟京东快递单号查询
案例描述
当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。
案例分析
1、快递单号输入内容时，上面的大号字体盒子（con）显示这里面的盒子
2、同时把快递单号里面的值（value）获取过来赋值给con盒子（innerText）作为内容
3、如果快递单号里面内容为空，则隐藏盒子
4、注意：keydown 和keypress 在文本框中的特点：事件触发时，文字还未落入文本框中
5、keyup事件触发时，文字已经落入文本框里。所以此案例用keyup比较合适
6、失去焦点时隐藏盒子
7、获得焦点且内容不为空就显示此盒子
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
// 获取要操作的元素
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
// 给输入框注册keyup事件
jd_input.addEventListener('keyup', function() {
// 判断输入框内容是否为空
if (this.value == '') {
// 为空，隐藏放大提示盒子
con.style.display = 'none';
} else {
// 不为空，显示放大提示盒子，设置盒子的内容
con.style.display = 'block';
con.innerText = this.value;
}
})
// 给输入框注册失去焦点事件，隐藏放大提示盒子
jd_input.addEventListener('blur', function() {
con.style.display = 'none';
})
// 给输入框注册获得焦点事件
jd_input.addEventListener('focus', function() {
// 判断输入框内容是否为空
if (this.value !== '') {
// 不为空则显示提示盒子
con.style.display = 'block';
}
})
</script>
以上是JavaScript学习过程中的部分案例思路总结及代码实现
总结
思路和算法对刚接触编程的我们来说确实是个难点，当然，已经有很多前辈精简了一些案例的算法，我们需要学习这些算法思想，多敲多练，掌握算法的具体实现，熟能生巧，在今后接触到其他案例时，会自己思考编程思路，找到属于自己的最优算法。
一起加油啊！在发光路上的我们
1724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
