Bonjourliked-CSDN博客

原创＜js＞轮播图

一、静态版本 OOA：轮播图点击按钮切换图片 0.布局可视区(r定位)>图片盒子(a定位)+按钮(a定位) 0-1.设置可视区box 溢出隐藏 0-2.设置放图片的大盒子imgbox，让图片浮动一行显示 (width宽度和left位置由js自动设定) 0-3.把左右按钮定位到box上 0-4.为了实现无缝轮播图，复制第一张图到最后，利用视觉欺骗效果，改变索引和位置实现 1.获取元素设置默认索引补全布局：图片大容器宽和位置 2.绑定点击事件 3.改...

2021-09-28 09:44:12 135

原创＜js＞倒计时

思路：（1）获取导航栏和页面结构 (注意是全部选中) （2）给导航的按钮(li)手动添加键值对用于索引（3）遍历对象，当li点下时执行：(prev上一个 this当前) 取消上一个按钮的颜色，隐藏上一个页面；设置下一个按钮的颜色，显示下一个页面；将当前点击的设置为下一个的上一个（1）HTML部分 <div class="box"> <ul> <li s...

2021-09-27 00:02:02 93

原创＜js＞进度条

进度条思路：随着时间的改变，进度条的长度改变（兼容ie）（1）定时器控制步长（2）判断目标长度-现在长度是否小于步数长（3）小于的话(不够跨一步了，会超出目标长度)执行计时器清除、现在长度强行为目标长度（4）不小于就继续加步长（1）HTML部分 <div class="box"> <p></p> </div> （2）CSS部分 .box { width: ...

2021-09-26 23:59:16 210

原创＜js＞小练习题

1.为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？ var a = 89; var d = parseInt(a / 24); var h = a % 24 console.log("需要" + d + "天" + h + "小时") 2.输入月份显示当月天数利用case穿透简化代码 var m = 4; switch (m) { case 2: console.log("28");

2021-09-26 23:56:15 433

原创代码的设计模式

① 定义：是一套经过反复使用、多人知晓的、经过分类的、代码设计经验的总结 ② 为什么使用设计模式？ 1.为了代码的可重用性、更容易被他人理解、保证代码的可靠性 2.设计模式使代码的编写真正的工程化，是软件工程的基石脉络，如同大厦的结构 ③ 有哪些？构造器模式，模块化模式，暴露模块模式，单例模式，中介者模式，原型模式，命令模式，外观模式，工厂模式，Mixin模式，装饰模式，亨元(Flyweight)模式，MVC模式，MVP模式，MVVM模式，组合模式，适配器模式，外观模式，观察者...

2021-09-24 20:13:57 730

原创＜js＞鼠标拖拽窗口

增加功能：把box拖拽改为标题栏h2的 bug1：拖拽幅度过大文字会被选择 solve1：阻止按下时的默认事件拖拽思路（1）box(标题栏)要跟随鼠标移动需要有定位（2）按下的同时移动松开 --> 框架 down>move+up （3）移动获取鼠标位置 bug1：直接写页面坐标会获取到鼠标最新位置卡顿 solve1：移动的page坐标 - 点击的offset坐标 == 距离网页的距离（4）up之后取消移动（删除） ...

2021-09-23 20:10:47 340

原创 ajax封装

针对于get和post两种方式的统一封装，用于传输前后端数据 ajax({ type: "get", //可选，默认get url: "", //必传 succes: res => {console.log(res);}, //必传（回调函数返回请求是否成功） err: code => {console.log(code);}, //可选，默认不执行 data: {...

2021-09-16 17:48:46 53

原创＜node.js＞搭建简易服务器

// 1.引入模块 const http = require("http"); const fs = require("fs"); const qs = require("querystring"); const url = require("url"); // 2.创建服务器 const serverObj = http.createServer((req, res) => { const urlObj = url.parse(req.url); // 路由判断 pathname.

2021-09-15 19:42:39 83

原创＜js＞瀑布流

瀑布流：所有图片宽度相等，高度不相等第一行从左到右排好，第二行的第一个在第一行高度最小的下面，第二个在第一行第二小的.... （1）HTML部分 <div class="cont"> <div class="box"> <div class="imgbox"> <img src="./imgs/m2.jpg" alt=""> </div> </div>

2021-09-15 00:31:18 46

原创＜js＞选项卡

OOA：点击按钮显示对应内容（通过索引一一对应） 1. 布局 2.获取元素设置默认索引 3.点击事件 4.获取上一个索引 5.隐藏上一个内容 6.获取下一个索引 7.显示下一个内容（1）HTML部分 <div class="box"> <ul> <li class="active">热门推荐</li> <li>限时抢购</li> ...

2021-09-14 08:43:29 36

原创＜js＞放大镜列表

放大镜列表核心思想：选项卡功能+放大镜功能（1）HTML部分 <div class="cont"> <div class="small_box"> <img src="./imgs/m0.jpg" alt="">  <span></span> <!-- 盖住在获取鼠标定位时不..

2021-09-13 23:21:49 107

原创＜js＞放大镜效果

1. 放大镜核心思想：等比缩放跟随移动 ① 鼠标位于遮罩中心：鼠标坐标xy-遮罩宽高一半 ② 自动计算遮罩宽高：sSpan/sBox=bBox/bImg => sSpan=(bBox/bImg)*sBox ③ 大图移动：遮罩移动的距离/遮罩可移动总距离=？/大图可移动总距离（反方向移动-） (1) HTML部分 <div class="small_box"> <img src="./imgs/m0.jpg" alt=""> ...

2021-09-13 23:04:24 81

Bonjourliked的博客