小夏的猪窝 - JavaScript

JavaScript - 轮播图

2022-09-27T08:00:00+00:00

轮播图的几点功能：鼠标移入显示上一张、下一张，移出则隐藏。点击上下一张，自动切换显示图片，做到有动画效果、无缝切换。鼠标移出时自动每3秒切换图片，鼠标移入时则不自动切换。移动图片时下方小圆点也跟随改变选中的图片位置。可以点击下方小圆点，切换图片。直接放自己写的例子：首先网页部分及css，自己画的有点潦草...css部分html部分 JavaScript部分 let main_box = document.querySelector(".banner"); let to_left = main_box.children[0]; let to_right = main_box.children[1]; let now_pic = 0; let pic_count = 0; let pic_ul = document.querySelector("#banner_pic"); let ol = document.querySelector(".circle"); let ThrottleValve = false; /** * 自动下一章操作 */ const auto_fun = function () { if (ThrottleValve) return; else ThrottleValve = true; if (now_pic > pic_count - 1) now_pic = 0; else if (now_pic === pic_count - 1) {//无缝处理 new EaseAnimation(pic_ul, (now_pic + 1) * -520, function () { pic_ul.style.left = 0 + "px"; ThrottleValve = false;//节流阀 }); now_pic = 0; for (let i = 0; i < ol.children.length; i++) { ol.children[i].className = ""; } ol.children[now_pic].className = "current"; return; } else now_pic++; new EaseAnimation(pic_ul, now_pic * -520, function () { ThrottleValve = false;//节流阀 }); for (let i = 0; i < ol.children.length; i++) { ol.children[i].className = ""; } ol.children[now_pic].className = "current"; } /** * 选中一张操作 */ const TogglePicture = function (i) { now_pic = i; new EaseAnimation(pic_ul, now_pic * -520); for (let i = 0; i < ol.children.length; i++) { ol.children[i].className = ""; } ol.children[now_pic].className = "current"; } //对齐小圆点 for (let i = 0; i < pic_ul.children.length; i++) { let li = document.createElement("li"); if (i === now_pic) { li.className = "current"; } li.addEventListener("click", function () { TogglePicture(i); }); ol.appendChild(li) pic_count++; } //实现无缝切换 //1. 拷贝第一张复制到最后 let pic_start = pic_ul.children[0].cloneNode(true); pic_ul.appendChild(pic_start) let auto_timer = setInterval(auto_fun, 3000); TogglePicture(now_pic); main_box.addEventListener("mouseenter", function () { to_left.style.display = "block"; to_right.style.display = "block"; clearInterval(auto_timer); }) main_box.addEventListener("mouseleave", function () { main_box.children[0].style.display = "none"; main_box.children[1].style.display = "none"; auto_timer = setInterval(auto_fun, 3000); }) to_left.addEventListener("click", function () { if (ThrottleValve) return; else ThrottleValve = true; if (now_pic < 0) now_pic = pic_count - 1; if (now_pic === 0) {//无缝处理 pic_ul.style.left = pic_count * -520 + "px"; now_pic = pic_count - 1; } else now_pic--; console.log(now_pic) new EaseAnimation(pic_ul, now_pic * -520, function () { ThrottleValve = false; }); for (let i = 0; i < ol.children.length; i++) { ol.children[i].className = ""; } ol.children[now_pic].className = "current"; }) to_right.addEventListener("click", function () { auto_fun(); }) 还需要js外部文件的一个函数：/** * 缓动动画 * @param obj 目标对象 * @param target 目标位置 * @param callback 回调函数 * @constructor */ function EaseAnimation(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(function () { if (obj.offsetLeft === target) { clearInterval(obj.timer); callback && callback(); } else { let step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); obj.style.left = obj.offsetLeft + step + "px"; } }, 20) }B站课程中将下面的圆点索引和第几张图分开了，我不是按照课程上的写的。我把图片和圆点使用同一个索引，将两者联系在一起。轮播图前面还是挺简单的，但是无缝切换的要求给我绕半天....注意：当我们过快的点击切换图片时，动画效果会不好，所以我们需要节流阀利用一个flag标志，来控制用户过快的行为，当用户切换图片时关闭阀门，不允许用户再进行操作，我们开始执行动画效果展示，当动画完成时再将阀门打开。这就是原生的JavaScript轮播图。

JavaScript - DOM获取页面元素

2022-07-06T16:01:00+00:00

目前本人在学习JavaScript中WebAPI教学，本篇为学习笔记，本人所有笔记都同步在个人资源站点 - 笔记中，欢迎学习，任何意见问题请联系我，谢谢。根据id获取使用 getElementById() 方法可以获取带有ID的元素对象id大小写敏感，代表了所查找的元素的唯一IDlet ele = document.getElementById('main1'); console.log(ele);返回的是一个对象根据标签名获取使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合let lis = document.getElementsByTagName('li'); console.log(lis) // console.dir(lis) for (let i = 0; i < lis.length; i++) { console.log(lis[i].textContent) }返回的是获取过来元素对象的集合以伪数组的形式存储的返回的方式需要通过遍历使用如果页面中没有这个标签，则返回的是空的伪数组[]取ol中的li写法let lis = document.getElementsByTagName('ol')[0].getElementsByTagName('li'); console.log(lis) // console.dir(lis) for (let i = 0; i < lis.length; i++) { console.log(lis[i].textContent) }通过HTML5新增的方法获取普通使用 getElementsByClassName('类名') 的写法获取类名的标签不通用不兼容ie5678 写小程序或手机网页可以使用let main = document.getElementsByClassName('main') console.log(main)返回伪数组的形式存储的是对象query选择器返回指定选择器的第一个元素对象let main = document.querySelector('.main') console.log(main) let nav = document.querySelector('#nav') console.log(nav) let li = document.querySelector('li') console.log(li)非常方便，但是只返回查找到的第一个元素queryall选择器和querySelector不同它返回的是所有对象伪数组 let lis = document.querySelectorAll('li') console.log(lis)特殊元素获取获取body元素 let bd = document.body console.log(bd)获取html元素 let hm = document.documentElement console.log(hm)

JavaScript - 语言基础笔记

2022-06-30T10:14:32+00:00

本笔记没有Web APIs的DOM BOM操作！此笔记仅仅是js基础。学习自B站黑马程序员的JS0基础教程JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。Java（由 Sun 发明）是更复杂的编程语言。常用函数浏览器会解释并执行位于之间的 JavaScript 代码那些老旧的实例可能会在 alert() 弹窗测试alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。alert('欢迎!')对事件的反应改变 HTML 内容使用 JavaScript 来处理 HTML 内容是非常强大的功能。x=document.getElementById("demo"); //查找id元素 x.innerHTML="Hello JavaScript"; //改变内容菜鸟教程(runoob.com)

我的第一段 JavaScript

JavaScript 能改变 HTML 元素的内容。

您会经常看到 document.getElementById("some id")。这个方法是 HTML DOM 中定义的。DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。JavaScript：验证输入JavaScript 常用于验证用户的输入，验证输入是否为数字。以上实例只是普通的验证，如果要在生产环境中使用，需要严格判断，如果输入的空格，或者连续空格 isNaN 是判别不出来的。可以添加正则来判断JavaScript 用法HTML 中的脚本必须位于标签之间。脚本可被放置在 HTML 页面的和部分中。您可以在 HTML 文档中放入不限数量的脚本。通常的做法是把函数放入部分中，或者放在页面底部。中的 JavaScript使用document.write写到标签中。中的 JavaScript 函数和body中的js函数两者没有区别。

我的 Web 页面

一个段落

外部的 JavaScript也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在 myScript.js 文件代码如下：function myFunction() { document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; }变量和C差不多啦一次声明多个变量并且赋值var a = 9, b = 10, c = 11; // 多个变量赋值声明时需要使用逗号分割变量声明但未赋值此时输出的是undefined（未定义的）不声明不赋值直接使用会报错不声明直接赋值可以使用！数据类型JS是弱类型的脚本语言，其变量的数据类型是根据欲赋值的变量来确定的。变量的数据类型在运行中是可以改变变化的。简单数据类型Nubmer 数字类型八进制：var num1 = 010; //零开头的是八进制十六进制： var num2 = 0xa; //0x开头的是十六进制数值的最大值：Number.MAX_VALUE 最小值：Number.MIN_VALUE无穷大： Infinity 大于任何数值无穷小： -Infinity 小于任何数值NaN ， Not a number，代表一个非数值String 字符串类型Boolean 布尔值Undefined 未声明Null 空值类型复杂数据类型object 对象类型三元表达式和c一样x?t:f断点调试数组关键字 Array数组就是一组数据的集合创建数组new 创建var arr = new Array();字面量直接创建var arr = [1,2,3,4];var arr = [true,"2",3,"4"];使用利用索引下标从0开始遍历拼接 var arr = [1, 2, 3, 34, 5, 346, 47, 35, 3, 767, 8, 345, 57]; var str = ""; arr.forEach((val, ind, arr) => { if (ind === (arr.length - 1)) { str += val; } else str += val + "|"; } ) console.log(str);添加新元素修改length长度修改数组索引号通过数组对象方法push var arr = [1, 2, 3, 34, 5, 346, 47, 35, 3, 767, 8, 345, 57]; arr.push(1); console.log(arr);案例去重let arr = [1, 2, 3, 4, 5, 5, 1, 1, 1, 14, 6]; let newarr = []; let j = arr[0]; for (let i = 0; i < arr.length; i++) { if (newarr.indexOf(arr[i]) === -1) newarr[newarr.length] = arr[i]; } console.log(arr); console.log(newarr);颠倒let arr = [1, 2, 3, 4, 5, 5, 1, 1, 1, 14, 6]; let newarr = new Array(); for (let i = (arr.length - 1); i >= 0; i--) { newarr[newarr.length] = arr[i]; } console.log(arr); console.log(newarr);升序let arr = [1, 2, 3, 4, 5, 5, 1, 1, 1, 14, 6]; console.log(arr); arr.sort((a, b) => { return a - b; }); console.log(arr);降序let arr = [1, 2, 3, 4, 5, 5, 1, 1, 1, 14, 6]; console.log(arr); arr.sort((a, b) => { return b - a; }); console.log(arr);转换字符串let arr = [1, 2, 3, 4, 5, 5, 1, 1, 1, 14, 6]; arr.join('|');函数包装功能相似的代码经常使用函数定义function f(a, b) { console.log(a, b); }函数定义使用关键字function声明声明调用和c一样函数表达式var fun = function(){};参数匹配问题如果参数匹配一致，则[正常输出结果]如果实参的个数多余形参的个数，[不会报错，会取到形参的个数]如果实参的个数小于形参的个数，形参可以是看做不用声明的变量如果没有接受到值那么就是undefined返回[NaN]返回值C如果没有return 则返回的是undefinedarguments的使用他是伪数组f(12, 32); function f(a, b) { console.log(a, b, arguments.length); }实参长度 arguments.length可以使用它来定义无限形参的函数预解析坑运行顺序：预解析执行代码预解析js引擎会把js里面所有的var 还有 function 提升到当前作用于的最前面变量预解析变量提升就是把所有的变量声明提升到作用于最前面不提升赋值操作函数预解析函数提升就是把所有的函数声明提升到作用于最前面不进行调用对象对象是一组无序的相关属性和方法的集合对象 = 属性 + 方法属性：特征方法：行为创建对象字面量：就是花括号{ }里面包含了表达这个具体事物的属性和方法空对象let obj = {};new Object()创建let obj = new Object();//创建一个空对象 obj.name = '张三丰'; obj.age = 18; 使用构造函数创建语法格式function 构造() { this.name = ''; this.fun = function () { } } new 构造();function Star(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } let str1 = new Star('刘德华', 18, '男'); console.log(str1.name);function Star(name, age, sex) { this.name = name; this.age = age; this.sex = sex; this.sing = function () { for (let i = 0; i < arguments.length; i++) { console.log(arguments[i]); } } } let str1 = new Star('刘德华', 18, '男'); console.log(str1.name); str1.sing('冰雨', '忘情水');使用let obj = { name: '张三丰', age: 18, sex: '男', SayMy: function () { console.log(this.name, this.age, this.sex); } }; obj.name; obj['age']; obj.SayMy();里面的属性方法采用键值对的形式多个属性方法中间使用逗号隔开方法后面跟的是一个匿名函数newfor ··· in ····用来遍历对象 function Star(name, age, sex) { this.name = name; this.age = age; this.sex = sex; this.sing = function () { for (let i = 0; i < arguments.length; i++) { console.log(arguments[i]); } } } let str1 = new Star('刘德华', 18, '男'); for (let tmp in str1) { console.log(tmp); if (typeof str1[tmp] != 'function') console.log(str1[tmp]); else { console.log('this is function!Run') str1[tmp]('bb', 'aa', 'cc'); } console.log(typeof str1[tmp]); }内置对象Math数学随机数方法random()https://www.runoob.com/jsref/jsref-random.htmlfunction getRndInteger(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min; }日期对象let date = new Date(); console.log(date);//Thu Jun 30 2022 16:56:49 GMT+0800 (香港标准时间) let date1 = new Date(2022, 6, 30); console.log(date1);//Sat Jul 30 2022 00:00:00 GMT+0800 (香港标准时间) let date2 = new Date('2022-6-30 16:59:00'); console.log(date2);//Thu Jun 30 2022 16:59:00 GMT+0800 (香港标准时间) let year = new Date().getFullYear(); console.log(year);//2022 let mon = new Date().getMonth() + 1;//得到的是0-11 console.log(mon);//5 let week = new Date().getDay(); console.log(week);//4 注意周日返回的是0倒计时案例String 字符串instanceof类型判断//true //false