Can1997-优快云博客

原创 AJAX的简单封装

创建一个发送按钮<button id='btn'>发送一个请求</button>主要封装的需求：1：可以发送请求。2：可以处理响应数据，用回调函数完成功能。3：携带数据：允许用户传入对象格式的数据。判断对象,返回true/falsefunction isObject(data) { return typeof (data === "object") && data !== null && !(data ins

2022-05-10 20:49:20 231

原创 JS简单的运动封装

function animate(options, dom, callback) { // 之前的参数是 attr 和 target ,但是没办法满足多个属性同时传入的需求; // - 因此我们把attr和target参数优化成了 options 对象参数 , 这样方便多条数据传入; // 1. 格式化options对象，把原本只有目标点的数据变成 : // { 属性 : { 目标点信息 , 当前位置信息 } } for (var attr in o.

2022-05-08 16:00:06 263

原创 JS实现轮播图

HTML结构部分  <div class="container">  <div class="wrapper"> <div class="slide"><img src="https://img.zcool.cn/tubelocation/dfd162562d160002e0326467a4f3.jpg" alt=""&g

2022-05-07 20:52:10 187

原创 JS中的表单验证。

HTML部分： <form action="javascript:void(0)" id="login"> <p>账号:&emsp;&emsp;<input type="text" id="email"> &

2022-04-19 14:04:56 2938

原创 JS实现：盒子随着鼠标点击在页面跳动的效果

HTML：<div id='box'> <img src='图片链接' alt=''></div>CSS：<style> #box{ width: 100px; height: 100px; overflow: hidden; position: absolute; left: 45%; /* 因为我们在使用过渡效果时

2022-04-18 10:32:38 1177

原创 JS实现单选按钮和多选功能

HTML部分：//容器 <div class="container"> <div class="all"> 全选<div class="checkbox"></div> </div> <div class="btns"> <div class="checkbox"></div> &lt

2022-04-14 23:23:06 5573

原创 JS实现回到顶部按钮

CSS部分忽略。//1.当我们的页面高度隐藏了800px的时候，让回到顶部按钮显示出来;//2.当我们点击回到顶部按钮的时候，页面的隐藏高度设置为0;知识点：用：document.documentElement.scrollTop; 获取当前页面的滚动条纵坐标位置，而不是：document.body.scrollTop; documentElement 对应的是 html 标签，而 body 对应的是 body 标签。在标准w3c下，docume...

2022-04-13 17:04:25 814

原创 JS实现时钟。

此处CSS的样式忽略。HTML简单结构如下:JS简单代码如下：<body> <div id="clock"> <p id="hours"></p> <span>:</span> <p id="min"></p> <span>:</span> <p id="sec"></p

2022-04-12 23:14:24 1261

原创 JS之倒计时。

//-在所有使用定时器的功能上，我们都需要先把功能封装在一个函数之中;知识点：1、new Date():创建一个Date对象。2、Date.now()获取时间戳，默认时间是1970/01/01/00:00:00，单位毫秒。3、getTime()获取目标时间的时间戳。<script>function countDown(){// 倒计时功能分成两个部分 : // - 目标点时间; var date = new Date("2022/04/0...

2022-04-07 11:21:53 490

原创 JS之简单的页面渲染。

// 渲染页面流程 :// - 1. 我们需要先去排页面;// - 2. 结构排列好了之后我们才能考虑使用js进行页面渲染;// 渲染的字符串结构 :// 1. 容器结构开头 : <div class="container">// 2. box结构 (根据我们创建的商品列表，进行box结构拼接)// 3. 容器结构结尾 : </div>CSS样式部分忽略。<script>//容器 document.write('<div cla

2022-04-07 09:45:17 4047

原创 JS的冒泡排序

//冒泡排序:从左到右两两比对，不符合规则就换位;//规则:从小到大排列;-左小右大，从小排到大。<script> var arr = [ 5,3,2,7,1,6,4 ]; //对比次数 for(var count = 0;count < arr.length-1;count++){ //执行第一轮之后就可以找到最大值，则不需要再去对比最大值，减少对比次数 for(var i = 0;i < arr.l...

2022-04-06 16:51:59 176

原创 JS中的数组扁平化，以及数组方法

JS中的数组扁平化，以及数组方法

2022-04-06 14:18:23 481

原创选项卡，JS应用写法思路。

实现功能：鼠标移动到某标题，显示相应的内容。CSS样式部分此处忽略。HTML部分：重要思路 :鼠标移入到哪个元素里面，哪个按钮元素就添加active同时清除其余按钮的active类名。使用this标记触发事件的元素。利用伪数组之中的下标找到对应内容。知识点1、QS选择器：document.querySelectorAll(); 选择所有相同类名的标签。2...

2022-04-04 18:29:47 215

Can1997的博客