![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
吃不胖的猫o(=^ェ^=)m
这个作者很懒,什么都没留下…
展开
-
移动端旋转浏览器自动刷新
//全局定义窗口的宽度var x = window.innerWidth;window.onload = function () { //窗体加载时,获取浏览器的窗口宽度 x = window.innerWidth;}//定义一个函数监测当浏览器页面宽度改变时,自动刷新function resizeFresh() { if (x != window.innerWidth) { location.reload(); //alert(x);原创 2020-11-12 11:27:52 · 248 阅读 · 0 评论 -
JavaScript对类的操作(添加移除切换样式)
效果(点击按钮可以改变box的样式,在原有样式上添加移除切换样式):html代码:<button id="btn1">点击改变box1的样式</button><br><br><div id="box1" class="b1 b2"></div>css代码:.b1{ width: 100px; height: 100px; background-color: greenyellow;}.b2原创 2020-10-08 09:18:19 · 947 阅读 · 0 评论 -
JavaScript轮播图(定时器自动轮播,点击按钮切换图片)
效果(在框内实现图片的轮播,点击小方框跳转图片):html代码:<!-- 设置外部div,来作为大的容器 --><div id="outer"> <!-- 创建ul,放置图片 --> <ul id="imgList"> <li><img src="lbimg/1.png" alt=""></li> <li><img src="lbimg/2.png"原创 2020-10-08 09:10:29 · 1798 阅读 · 0 评论 -
JavaScript使用定时器切换图片练习
效果:可以根据按钮来控制图片的开始切换和停止切换html代码:<img id="img1" src="img/1.png" alt=""><br><br><button id="btn1">开始</button><button id="btn2">停止</button>js代码:window.onload = function(){ var img1 = document.getElementByI原创 2020-10-07 09:01:38 · 513 阅读 · 0 评论 -
JavaScript的Bom简介
Bom浏览器对象模型,通过js来操作浏览器Bom对象window:整个浏览器的窗口,也是网页的全局对象Navigator:当前浏览器的信息,通过该对象可以来识别不同的浏览器判断浏览器的类型var ua = navigator.userAgent;if(/firefox/i.test(ua)){ alert("我是火狐");}else if(/chrome/i.test(ua)){ alert("我是Chrome");}else if("ActiveXObject" in原创 2020-10-07 08:53:22 · 112 阅读 · 0 评论 -
JavaScript键盘事件(上下左右键无卡顿移动div)
html代码:<div id="box1"></div>css代码:#box1{ height: 100px; width: 100px; position: absolute; background-color: lightsalmon;}js代码://box根据不同的方向键移动window.onload = function(){ //初始速度 var speed = 10; var dir = 0; //开启一原创 2020-10-07 08:46:59 · 395 阅读 · 0 评论 -
JavaScript鼠标滚轮事件(box随滚轮滚动改变长短)
html代码:<div id="box1"></div>css代码:#box1{ height: 100px; width: 100px; background-color: palegreen; }js代码://事件绑定的函数(适应于所有浏览器)function bind(obj, eventStr, callback){ if(obj.addEventListener){ obj.addEventListener(原创 2020-10-06 10:27:17 · 278 阅读 · 0 评论 -
JavaScript对元素的拖拽(兼容任意浏览器)
思路:鼠标在元素上按下时,开始拖拽 onmousedown鼠标移动时候被拖拽元素跟随鼠标移动onmousemove鼠标松开,元素被固定在当前位置onmouseup全部代码:(1)封装了两个函数,id获取函数、拖拽函数(2)解决了拖动时点击元素中任意位置,指针只会跳在元素左上角的问题(鼠标的坐标 - div的偏移量)(3)解决了事件的兼容性问题,特别是ie8,window.event(4)针对不同的浏览器,对事件的捕获与取消捕获(5)拖拽功能的异常,通过return false来取消默认原创 2020-09-30 15:47:14 · 288 阅读 · 0 评论 -
JavaScript多个事件的绑定(所有浏览器均可以用)
单个事件的绑定添加按钮<button id="btn01">点击</button>使用对象.事件 = 函数的形式绑定响应函数,他只能同时为一个元素的一个事件绑定一个函数//点击按钮以后弹出内容var btn01 = document.getElementById("btn01");btn01.onclick = function(){ alert("1");};若想绑定多个事件使用对象.事件 = 函数的形式绑定响应函数,不能绑定多个函数,如果绑定多了,后面原创 2020-09-30 11:43:58 · 4072 阅读 · 0 评论 -
JavaScript事件的冒泡及委派
事件的冒泡及取消冒泡事件的冒泡(Bubble)事件向上传导,当后代元素的事件被触发时,其祖先元素的相同事件也会被触发在开发中,大部分冒泡都是有用的,如果不希望发生冒泡可以通过冒泡事件来取消冒泡通过一个简单的例子来简述事件的冒泡及取消冒泡html代码:<div id="box1"> 我是box1 <span id="s1">我是span</span></div>css代码:<style> #box1{原创 2020-09-30 10:52:48 · 140 阅读 · 0 评论 -
JavaScript鼠标移动练习:1.显示xy,2.div随鼠标移动
一:当鼠标在areaDiv移动时,在showMsg中显示鼠标的坐标鼠标在元素中移动时触发onmousemoveclientX,clientY用于获取鼠标相对于当前可见窗口的坐标,在ie8中不支持解决事件的兼容性问题e = e ||window.e;效果:html代码:<div id="areaDiv"></div><br><div id="showMsg"></div>css代码:<style> #a原创 2020-09-30 09:53:56 · 509 阅读 · 0 评论 -
JavaScript使用Dom操作CSS (判断滚动条是否到底的用户注册练习)
通过js改元素的样式语法:元素.style.样式名 = 样式值如果css样式中含有-,需要将这样的样式名修改为驼峰命名法box1.style.width = "300px";box1.style.backgroundColor = "yellow";如果在样式中写了!important,用js不能覆盖,因为他有最高的优先级读取样式 (内联样式)通过style属性设置和读取到的都是内联样式,无法读取样式表中的样式box1.style.width获取元素当前显示的样式(只能在ie..原创 2020-09-29 19:03:30 · 379 阅读 · 0 评论 -
JavaScript增删改查练习(将人员信息可以添加到表格中也可以进行删减)
将人员信息可以添加到表格中也可以进行删减html代码: <table style="margin:100px 100px 30px 100px" border="3" id="employeeTable"> <tr> <th style="text-align: center;">Name</th> <th style="text-align: center;">Email&原创 2020-09-29 08:22:19 · 769 阅读 · 0 评论 -
JavaScript Dom其他查询方法 及 js增删改查
Dom其他查询方法获取body标签document.getElementsByTagName("body")[0]或document.body获取页面中所有的元素document.all或 document.getElementsByTagName("*")根据元素的class属性查询一组元素的节点document.getElementsByClassName("box1")ie8及以下浏览器不支持根据CSS选择器来查询元素的节点document.querySelector(".box1 div"原创 2020-09-28 19:52:22 · 153 阅读 · 0 评论 -
JavaScript 事件,Dom查询,图片切换和全选反选例子
DOM(Document Object Model)JS通过DOM来对HTML文档进行操作文档:整个HTML网页文档对象:讲网页中的每一个部分都转化为一个对象模型:使用模型来表示对象之间的关系,方便获取对象节点:Node——构成HTML文档最基本的单元文档节点:整个HTML文档元素节点:HTML文档中HTML标签属性节点:元素的属性文本节点:HTML标签中的文本内容事件:用户和浏览器之间的交互行为例如:按钮点击事件<script> //事件,用户和浏览器原创 2020-09-25 09:44:09 · 154 阅读 · 0 评论 -
JavaScript正则表达式
正则表达式定义字符串的规则计算机可以根据正则表达式,检查字符串是否符合规则,获取字符串中符合规则的内容提取出来创建正则表达式的对象var 变量 = new RegExp("正则表达式",“匹配模式”)使用typeof检查正则对象 会返回object正则表达式的一个方法text(),来检查一个字符串是否符合正则表达式的规则,是true,不是false判断字符串中是否有a var reg = new RegExp("a"); console.log(reg.test("a"));原创 2020-09-23 11:27:10 · 119 阅读 · 0 评论 -
JavaScript Math及字符串的相关方法
Math与其他对象不同,他不是一个构造函数属于工具类不用创建对象,它里面封装了数学相关的属性和方法1.Math.PI圆周率 console.log(Math.PI); //3.1415926535897932.Math.ceil()向上取整只要有小数位就自动进13.Math.floor()向下取整小数部分舍掉4.Math.round()四舍五入5.Math.radom()随机数可以用来生成一个0-1之间的随机数(1)随机生成一个0-10的整数,包括0,原创 2020-08-29 16:44:30 · 202 阅读 · 0 评论 -
JavaScript 函数方法call和apply,arguments,Date对象
函数的方法call和apply相同:call和apply 这两个方法都是对函数对象的方法 function fun(){ alert("llll"); } //三种一样的效果 fun.apply(); //fun.call(); //fun();可以将一个对象指定为第一个参数此时这个对象将会成为函数执行的this function fun(){原创 2020-08-17 19:37:37 · 213 阅读 · 1 评论 -
JavaScript数组的遍历, 数组方法: slice()、splice()、concat()、join()、reverse()、sort()
数组的遍历所谓的数组遍历,就是将数组中的所有元素取出来1. 利用for循环遍历 var arr = ["ha", "ww", "ff", "dwc"]; for(var i = 0; i < arr.length; i++){ console.log(arr[i]); }创建一个函数,可以将perArr中满18岁的Person提取出来然后封装到一个新的数组中并返回 function Person(name,age){原创 2020-08-15 16:11:38 · 655 阅读 · 0 评论 -
JavaScript原型对象及数组Array简介和数组的方法push()、pop()、unshit()、shit()
原型我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype,这个属性对应着一个对象,这个对象就是我们所谓的原型对象。如果函数作为普通函数调用prototype没有任何作用,当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性,指向该构造函数的原型对象,我们可以通过__proto__(两个下划线)来访问该属性。原型对象就相当于一个公共区域,所以同一个类型的实例都可访问这个原型对象,我们可以将对象中共有的内容,同一设置到原型对象中。当我们访问对象的一个属性或方法时,他会先原创 2020-08-15 09:01:21 · 1055 阅读 · 0 评论 -
JavaScript方法,作用域,工厂方法,构造函数
方法 //函数也可以称为对象的属性 //如果一个函数作为一个对象的属性保存 //那我们称这个函数是这个对象的方法 //调用document的write方法 document.write(); //调用函数就称调用函数的方法(Method) //创建一个对象 var obj1 = new Object(); //向对象中添加属性 obj1.name = "猪头";原创 2020-08-13 18:59:52 · 132 阅读 · 0 评论 -
JavaScript对象的基本操作(增删改查),基本数据类型和引用数据类型,函数的参数和返回值
对象基本数据类型都是单一的值,创建的变量独立,不能成为一个整体对象属于复合的数据类型,在对象中可以存放多个不同类型的属性对象的分类1、内建对象由ES标准中定义的对象,在任何 的ES的实现中都能使用如:Math String Number Boolean Function Object等2、宿主对象由JS的运行环境提的对象,目前 来讲主要由浏览器提供的对象。 如Bom浏览器对象模型 Dom 文档对象模型 console.log();document.writre();3、自定义对象由开原创 2020-08-13 09:32:05 · 305 阅读 · 0 评论 -
Javascript for循环的应用, break和continue,定时器
for循环的应用页面中接收一个用户输入的数字,并判断是否是质数(质数是指在大于1的自然数中,除了1和它本身以外不再有其他因数的自然数) //默认flag为质数 var flag = true; var num = prompt("请输入一个数:") for(i = 2; i < num; i++) { //如果num能被i整除,则一定不是质数 if(num % i == 0)原创 2020-08-12 08:35:00 · 334 阅读 · 0 评论 -
javascript关系运算符,Unicode编码表,条件运算符(三元运算符), 运算符的优先级
关系运算符数值情况比较两个值之间的关系,关系成立返回true,不成立返回false1.> 大于号2.>= 大于等于3.<= 小于等于非数值情况 先将其(bool,字符串,null=>0等)转换为数字,再进行比较1.任何值和(“hello”=>)NaN 作比较都是false2.如果符号两侧的值都是字符串,不会将其转换为数字进行比较"11">"4"//true...原创 2020-07-31 21:19:54 · 305 阅读 · 0 评论 -
JavaScript输出语句,编写位置,基本语法6种数据类型
vs code默认字体变大菜单栏File–Preserences–Settings 直接输入确定即可输出语句1.浏览器弹出报警框alert("报警内容")向body(网页)中输出内容document.write("输出的内容")向控制台输出内容 console.log("控制台输出内容")js编写位置虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用1.21.可以将js代码写入标签的onclick属性中,当我们点击按钮时,js才会被执行原创 2020-07-28 14:49:27 · 208 阅读 · 0 评论