- 博客(38)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 常规轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { .
2022-04-27 22:44:25
189
原创 简单的轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } img { vertical-align: .
2022-04-27 22:39:06
215
原创 焦点图【轮播图】
分析：需求①：小图标鼠标经过事件鼠标经过小图片，当前高亮，其余兄弟变淡 添加类② ：大图片跟随变化对应的大图片跟着显示，如果想要过渡效果，可以使用opacity效果，可以利用CSS淡入淡出的效果，还是添加类③：右侧按钮播放效果点击右侧按钮，可以自动播放下一张图片需要一个变化量 index 不断自增然后播放下一张图片如果到了最后一张，必须要还原为第1张图片教你一招： 索引号 = 索引号 % 数组长度 （放到播放前面）④：解决一个BUG点击右侧按钮可以实现播放下一张，但是鼠标经过前面的
2022-04-27 22:30:35
380
原创 电梯导航案例【点击侧边导航栏页面调到位置】
需求：点击可以页面调到指定效果分析：①：点击当前 小导航，当前添加active，其余移除active②：得到对应 内容 的 offsetTop值③：让页面的 scrollTop 走到 对应 内容 的 offsetTop<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device
2022-04-27 15:26:18
527
原创 仿京东固定导航栏案例【滑动到某位置弹出另外一个导航栏】
需求：当页面滚动到秒杀模块，导航栏自动滑入，否则滑出分析：①：用到页面滚动事件②：检测页面滚动大于等于 秒杀模块的位置 则滑入，否则滑出<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport.
2022-04-27 15:21:40
513
原创 页面滚动显示返回顶部按钮 【页面滑动到某个位置出现点击某个图片放回顶部】
需求：当页面滚动500像素，就显示返回顶部按钮，否则隐藏， 同时点击按钮，则返回顶部分析：①：用到页面滚动事件②：检测页面滚动大于等于100像素，则显示按钮③：点击按钮，则让页面的scrollTop 重置为 0<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
2022-04-27 14:51:16
554
1
原创 购物车案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>购物车全
2022-04-27 13:41:30
134
原创 活动倒计时效果
倒计时效果需求：计算到下课还有多少时间案例分析：①：用将来时间减去现在时间就是剩余的时间②：核心： 使用将来的时间戳减去现在的时间戳③：把剩余的时间转换为 天 时 分 秒注意：通过时间戳得到是毫秒，需要转换为秒在计算转换公式： d = parseInt(总秒数/ 60/60 /24); // 计算天数 h = parseInt(总秒数/ 60/60 %24) // 计算小时 m = parseInt(总秒数 /60 %60 ); // 计算分数 s = parseInt(
2022-04-27 13:28:55
387
原创 微博发布案例
分析：需求1注册input事件将文本的内容的长度赋值给对应的数值表单的maxlength属性可以直接限制在200个数之间需求2克隆预定义好的模板,将模板的hidden属性设置为false, 并最终展示到页面上判断如果内容为空，则提示不能输入为空, 并且直接return防止输入无意义空格, 使用字符串.trim()去掉首尾空格, 并将表单的value值设置为空字符串需求3获取文本域的内容, 赋值给由模板克隆出来的新标签里面的content.innerText随机获取数据数组里面的内容
2022-04-27 13:24:06
322
原创 动态创建表格【渲染学生信息案例】
需求：点击录入按钮，可以增加学生信息分析：不管添加还是删除，都是操作的数据（数组），然后从新渲染页面需求①：添加数据点击录入按钮，把表单里面的值都放入数组里面学号自动生成，是数组最后一个数据的学号+1需求②：渲染把数组的数据渲染到页面中，同时清空表单里面的值，下拉列表的值复原注意，渲染之前，先清空以前渲染的内容因为多次渲染，最好封装为函数需求③：删除数据为了提高性能，最好使用事件委托方式，找到点击的是链接 e.target.tagName根据当前的删除链接，找到这条数据需
2022-04-27 13:17:27
919
原创 页面刷新，图片随机更换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2022-04-26 21:53:09
1007
1
原创 启动按钮，勾选复选框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2022-04-26 21:52:33
142
原创 根据数据自动渲染到页面的终极版
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>学.
2022-04-26 16:12:43
141
原创 tab切换
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrapp..
2022-04-26 15:15:15
112
原创 购物车加减操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&.
2022-04-26 03:13:42
304
原创 用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0.
2022-04-26 02:59:55
589
原创 用户输入文字，可以计算用户输入的字数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&.
2022-04-26 02:16:55
223
原创 搜索框案例，表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2022-04-26 02:10:55
510
原创 点击关闭二维码或者弹框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { .
2022-04-25 19:59:46
386
原创 定时器函数（网页轮播图效果【每隔一秒切换一张图】）
6秒倒计时，我已同意注册协议<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
2022-04-25 19:56:18
796
原创 利用DOM随机点名
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2022-04-25 15:37:21
367
原创 遍历对象学生信息表 for (let k in obj){}
let obj = { uname: '小明', age: 18, sex: '男' } // for in 循环语句 // 语法 // for (let k in 对象名) {} 重点 // k 变量 k 或者 key value for (let k in obj) { console...
2022-04-25 11:58:37
1318
1
原创 对象的使用以及方法和操作案例
// 声明人对象 let person = { uname: '刘德华', age: 18, sex: '男', // 方法名：function(){} sayHi: function () { console.log('hi~~~') }, mtv: function (s) { .
2022-04-25 11:54:14
164
原创 随机点名而且不能重复出现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2022-04-25 11:46:53
1095
原创 根据数据自动渲染到页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&...
2022-04-25 11:26:12
130
原创 for 循环求数组最大/最小值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
2022-04-23 18:32:03
1938
1
原创 打印倒三角星星和乘法表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2022-04-23 16:39:57
448
原创 用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息 分析：
①：需要输入3个数据，所以需要3个变量来存储 price num address②：需要计算总的价格 total③：页面打印生成表格，里面填充数据即可④：记得最好使用模板字符串<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <m
2022-04-23 15:42:31
2295
原创 bs.和cs架构
bs.和cs架构b/s 浏览器和服务器架构﹒c/s 客户端和服务器架构,bs和cs.优缺点。1、硬件环境不同:cs.使用局域网（局部专用网络); bs,使用广域网，不需要专用网络;2、安全要求:cs安全性较高;bs面向所有用户（使用浏览器就可以访问）安全性较低。3、系统维护不同:cs表现方式有限，对程序员要求高;bs.表现方式丰富，开发难度低;4、处理问题不同:cs用户固定，安全要求高;bs面向所有用户...
2021-08-20 14:57:49
364
原创 Canvas绘制坐标系详解
Canvas绘制坐标系需求如果需要绘画一个坐标系，那么该怎么画呢，示例如下：从图中可以看出如果想要绘制一个坐标系，具体需要做以下步骤：计算坐标系的原点坐标计算坐标系x轴的最远坐标点以及对应三角形的坐标点计算坐标系y轴的最远坐标点以及对应三角形的坐标点上面是写出了大概的步骤，但是细节该怎么做呢？计算坐标系的原点坐标的思路如果要计算坐标系的原点坐标，首先需要这两个基本要素。从上...
2020-08-05 20:28:55
1773
原创 自适应布局
第一种方式<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>宽度自适应布局</title> <style> .wrap { background-color: #D66464; } .clea
2020-07-08 16:42:19
234
原创 从输入url到页面完成加载发生了什么
先来个流程总述：DNS解析：将域名解析成IP地址TCP连接：TCP三次握手发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析渲染页面连接结束：TCP四次挥手1、DNS解析在浏览器输入URL后，首先要经过域名解析。浏览器通过向 DNS 服务器发送域名，DNS 服务器查询到与域名相对应的 IP地址，然后返回给浏览器，浏览器再将 IP 地址打在协议上，同时请求参数也会在协议搭载，然后一并发送给对应的服务器。|1.什么是URLURL（Uniform Resource Locato
2020-07-03 15:30:09
162
原创 HTML5 Canvas中 绘制圆弧
本文链接：https://blog.youkuaiyun.com/ixygj197875/article/details/80043646绘制圆弧圆弧被定义为假想的圆周上任意两点之间的部分。Canvas的API提供了两个绘制圆弧的方法：arc()和arcTo()方法。arc()方法使用arc()方法绘制圆弧时，假想的圆由圆心和半径来定义，两个点由起始角度和结束角度来定义，还需要一个参数来定义绘制方向。...
2020-04-07 19:53:06
540
原创 canvas绘制点详解
绘制坐标系中的点。示例图如下：基本的绘制步骤如下：设置坐标点的中心圆点位置（x0，y0）设置坐标点的大小 dotSize计算坐标点的上下左右四角的点坐标条件1和2可以直接通过设置获取，而坐标点上下左右四角坐标看看下面的计算示意图。计算坐标点的上下左右四角的点坐标从上图可以看到要绘制一个正方形坐标点的上下左右四角点坐标的计算方式。下面来具体示例代码。<!DOCTYPE ...
2020-04-07 13:13:14
4438
原创 亲自实践整理的安装apache服务安装教程
第一步：由于最新的 Apache 已经不提供 Windows 的安装版本了，所以我们这里使用的是解压版。下载地址：https://www.apachelounge.com/download/使用说明：https://httpd.apache.org/docs/current/platform/windows.html第二步，打开下载地址下载黄色标记这个 ，根据自己电脑选择32位还是64位的...
2020-01-24 12:27:03
644
原创 块级元素和行内元素的区别以及行内块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
2019-10-13 17:53:25
360
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人