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 130

原创＜js＞倒计时

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

2021-09-27 00:02:02 90

原创＜js＞进度条

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

2021-09-26 23:59:16 201

原创＜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 426

原创代码的设计模式

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

2021-09-24 20:13:57 714

原创＜js＞鼠标拖拽窗口

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

2021-09-23 20:10:47 337

原创 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 52

原创＜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 79

原创＜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 41

原创＜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 33

原创＜js＞放大镜列表

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

2021-09-13 23:21:49 103

原创＜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 76

Bonjourliked的博客