随笔分类 - 前端小项目详解汇集
前端小项目详解
摘要：原生js实现动画函数的封装及核心原理 一、动画实现原理 核心原理：通过定时器setInterval()不断移动盒子的位置 二、实现步骤 1、获得盒子当前的位置 2、让盒子在当前位置加上移动的距离（步长） 3、注意元素需要添加定位，才能使用element.style.left 4、利用定时器不断重复这
阅读全文
摘要：表格隔行变色 一、案例分析 1、用到新的鼠标事件。鼠标经过onmouseover 鼠标离开onmouseout 2、核心思路：鼠标经过tr行，当前的行变背景颜色，鼠标离开当前行去掉当前的背景颜色 3、注意：第一行（thead里面的行）不需要改变颜色，因此我们获取的是tbody里面的行 二、代码实现
阅读全文
摘要：发送短信 一、案例分析 1、按钮点击后， ①需禁用按钮diaabled为true ②同时按钮里面的内容会发生变化 2、按钮里面的倒计时秒数会发生变化，此时需要用到定时器，定义一个变量，在定时器里不断递减 3、需要设置一个判断条件，如果变量为0，说明到了时间，此时需要 ①停止定时器（清除定时器） ②复
阅读全文
摘要：页面换肤效果 一、要求：点击相应图片，将页面背景设置为相应图片 考察知识点： ①利用for循环注册事件 ②利用js修改样式属性 二、效果展示： 三、代码实现： 1、html结构： <body> <div class="box"> <ul> <li><img src="images/1.jpg" al
阅读全文
摘要：查询商品案例 要求： 1、把数据渲染到页面中（forEach） 2、根据价格显示数据(filter) 3、根据商品名称显示数据（some） 》》页面html结构如下 <style> table { width: 400px; border: 1px solid #000; border-collap
阅读全文
摘要：应用一：点击li输出当前li的索引号 <ul class="nav"> <li>星辰</li> <li>大海</li> <li>春暖</li> <li>花开</li> </ul> 步骤： 》》第1步：获取所有的小li // 获取所有小li var lis = document.querySelect
阅读全文
摘要：写出下列代码的运行结果 1、使用var关键字声明循环变量i var arr = []; for (var i = 0; i < 2; i++) { arr[i] = function() { console.log(i); } } arr[0](); arr[1](); 运行结果：2 2 2、使用l
阅读全文
