小夏的猪窝 - JavaScript

JavaScript - 轮播图

小夏 — Tue, 27 Sep 2022 08:00:00 +0000

轮播图的几点功能：

鼠标移入显示上一张、下一张，移出则隐藏。
点击上下一张，自动切换显示图片，做到有动画效果、无缝切换。
鼠标移出时自动每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获取页面元素

小夏 — Wed, 06 Jul 2022 16:01:00 +0000

目前本人在学习JavaScript中WebAPI教学，本篇为学习笔记，本人所有笔记都同步在个人资源站点 - 笔记中，欢迎学习，任何意见问题请联系我，谢谢。

根据id获取

使用 getElementById() 方法可以获取带有ID的元素对象

id大小写敏感，代表了所查找的元素的唯一ID

let 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 - 语言基础笔记

小夏 — Thu, 30 Jun 2022 10:14:32 +0000

本笔记没有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 则返回的是undefined
arguments的使用
他是伪数组
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();
里面的属性方法采用键值对的形式
多个属性方法中间使用逗号隔开
方法后面跟的是一个匿名函数
new
for ··· 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.html
function 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

小夏的猪窝 - JavaScript

JavaScript - 轮播图

JavaScript - DOM获取页面元素

根据id获取

根据标签名获取

通过HTML5新增的方法获取

普通

query选择器

queryall选择器

特殊元素获取

获取body元素

获取html元素

JavaScript - 语言基础笔记

常用函数

alert() 弹窗测试

对事件的反应

改变 HTML 内容

我的第一段 JavaScript

JavaScript：验证输入

JavaScript 用法

中的 JavaScript

中的 JavaScript 函数

我的 Web 页面

外部的 JavaScript

变量

数据类型

简单数据类型

复杂数据类型

三元表达式

断点调试

数组

创建数组

使用

添加新元素

案例

去重

颠倒

升序

降序

转换字符串

函数

参数匹配问题

返回值

arguments的使用

预解析

对象

创建

使用

new

for ··· in ····

内置对象

Math数学

日期对象

倒计时案例

String 字符串

instanceof类型判断

`instanceof`类型判断