JavaScript
木易一
这个作者很懒,什么都没留下…
展开
-
阻止事件冒泡与阻止事件默认行为
1.event.stopPropagation()阻止事件冒泡2.event.preventDefault()阻止事件默认行为。3.return false等效于同时调用event.preventDefault()和 event.stopPropagation() return false除了阻止默认行为之外,还会阻止事件冒泡。...原创 2019-05-29 11:12:29 · 519 阅读 · 0 评论 -
JavaScript 图片无缝滚动
图片无缝滚动案例效果图ps:允许上传图片大小有限制,只能录一点点......代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <st原创 2019-03-12 17:23:22 · 196 阅读 · 0 评论 -
JavaScript Date 对象
Date 对象用于处理日期和时间。创建 Date 对象的语法:var myDate=new Date()注意:Date 对象会自动把当前日期和时间保存为其初始值。列举一些常用的Date对象方法:<script> var time=new Date(); console.log(time); console.log(time.getFull...原创 2019-03-12 11:23:44 · 104 阅读 · 0 评论 -
验证码案例
我们常见的验证码,其中包括汉字,字母,数字,随机生成,用户输入后进行验证。效果图:代码:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> &l原创 2019-03-12 11:10:47 · 473 阅读 · 0 评论 -
JavaScript Math 对象
Math 对象用于执行数学任务。Math对象里有自己封装的方法<script> console.log(Math.PI);//圆周率 console.log(Math.abs(-1));//取绝对值 console.log(Math.ceil(2.45));//向上取整 console.log(Math.floor(2.45));//向下取整...原创 2019-03-12 10:26:26 · 72 阅读 · 0 评论 -
怎么判断设备加载不同的js脚本
Navigator 对象包含有关浏览器的信息。在控制台输出navigator对象,我们可以看到Navigator 对象属性属性 描述 appCodeName 返回浏览器的代码名。 appMinorVersion 返回浏览器的次级版本。 appName 返回浏览器的名称。 appVersion 返回浏览器的平台和版本信息。 brows...原创 2019-03-11 16:22:11 · 957 阅读 · 0 评论 -
js中的继承
继承的是对象,对象具有三大特征:封装,继承和多态(同一个类对象在不同环境中的多种状态),继承是指子类继承父类的属性和行为。js里面如何实现继承?无论是哪一种实现方式,都首先需要一个父类对象。<script> //定义一个父类对象,定义其属性行为 function Animal(){ //属性 this.name=null;...原创 2019-02-20 16:53:51 · 236 阅读 · 0 评论 -
Javascript window对象
window对象所有浏览器都支持window对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一:window.document....<scrip...原创 2019-02-23 17:10:10 · 542 阅读 · 0 评论 -
js写贪吃蛇案例
<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; }原创 2019-02-23 14:38:16 · 525 阅读 · 1 评论 -
浏览器切换tab 或者隐藏 计时器出现的bug
当浏览器切换页面或者最小化页面时,网页中如果存在计时器,再次打开可能出现bug,如使用计时器的图片轮播,在网页来回切换的时候图片会乱,解决方法:由visibilitychange 判断当前的活动状态,当前页面有没有被隐藏 hidden<script> var bowhidden="hidden" in document?"hidden": "webkithidde...原创 2019-04-02 11:50:24 · 1253 阅读 · 0 评论 -
History对象和Location对象
History 对象History 对象包含用户(在浏览器窗口中)访问过的 URL。History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。所有浏览器都支持该对象。History 对象属性我们可以 console.log(history)来看一下输出结果:可以看到history只有length一个属性,返回的是浏览器历...原创 2019-04-02 12:04:16 · 2594 阅读 · 0 评论 -
处理浏览器的默认选中
在网页上连续点击时,页面会出现蓝色背景的选中框,处理浏览器的默认选择:document.onselectstart=function(){ return false;};原创 2019-03-28 19:54:37 · 332 阅读 · 0 评论 -
案例——跨域调用百度接口
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .block{ width: 600px; heig...原创 2019-05-13 15:43:42 · 1400 阅读 · 0 评论 -
跨域问题
跨域问题是由于浏览器为了防止CSRF攻击,避免恶意攻击而带来的风险而采取的同源策略限制。当一个页面中使用XMLHTTPRequest对象发送HTTP请求时(XHR请求),必须保证当前页面和请求的对象是同源的,即协议、域名和端口号要完全一致,否则浏览器就会阻止此跨域请求返回的数据。分享几篇文章,写的十分详细,https://www.cnblogs.com/2050/p/3191744.h...原创 2019-05-07 19:55:10 · 73 阅读 · 0 评论 -
封装Ajax
封装过程的框架如下:<script>function ajax_method(url,data,method,success) { // 异步对象 var ajax = new XMLHttpRequest(); // get 跟post 需要分别写不同的代码 if (method == 'get') { // get请求 ...原创 2019-05-07 17:47:47 · 59 阅读 · 0 评论 -
Ajax
传统方法的缺点:传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽,由于每次应用的交互都需要向服务器发送请求,应用的...原创 2019-05-07 17:14:11 · 99 阅读 · 1 评论 -
清除浮动的方法
当父元素不设置高或者高设置为auto或者父元素的高度小于子元素高度时,子元素若浮动,即脱离文本流(这时无论你怎么调子元素的高度,父元素的高度都不会有变化),此时父元素就会出现塌陷(即高度为0或者为你设置的高度),这可能会影响页面下面的布局,所以在设置了浮动后要清除浮动。那么,清除浮动有哪些方式?一、overflow:hidden我们最常使用的就是给子元素设置浮动后,给父元素写overf...原创 2019-04-09 16:25:15 · 80 阅读 · 0 评论 -
正则表达式
正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。正则表达式是由普通字符(例如字符 a 到 z)以及特殊字符(称为"元字符")组成的文字模式。模式描述在搜索文本时要匹配的一个或多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。普...原创 2019-04-02 16:06:48 · 267 阅读 · 0 评论 -
表单验证
form标签作用是用于将其他表单标签"包"起来,以便作为一个整体,可以提交数据到服务器。写法:<form name="表单名称" action="目标地址" method="数据提交方式" ></form>name:只是给该表单命名,用于js技术使用。action:设定表单数据提交给哪个文件,用于后端技术(比如php)来接受并处理数据method:...原创 2019-04-02 15:04:50 · 150 阅读 · 0 评论 -
图片轮播
一、淡入淡出轮播特点:实现图片自动以淡入淡出的方式轮播,当鼠标悬停在图片上面的时候轮播停止;图片下面表示顺序的原点会随着图片切换颜色改变,当鼠标悬停在圆点上时图片切换为鼠标当前悬停的圆点对应的图片;图片两边代表左右的箭头在点击的时候切换前后的图片;图片的淡入淡出轮播,可以理解为每一张图片切换到最上面的时候透明度由0慢慢变为1;<!DOCTYPE html&g...原创 2019-03-28 20:29:09 · 4868 阅读 · 0 评论 -
js中的开发模式
一、工厂模式 工厂模式是我们最常用的实例化对象模式了,是用工厂方法代替new操作的一种模式。工厂模式就相当于创建实例对象的new,所以以后new时就要多个心眼,是否可以考虑使用工厂模式,虽然这样做,可能多做一些工作,但会给你系统带来更大的可扩展性和尽量少的修改量。工厂模式简单来说就是:调用函数 返回对象 在函数里实例化对象 直接返回对象<script>fu...原创 2019-02-23 10:29:28 · 597 阅读 · 0 评论 -
省市区三级联动案例
<html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body>省:<select id="city_1">原创 2019-02-11 21:16:40 · 4370 阅读 · 1 评论 -
DOM元素的操作
dom元素的操作有动态创建dom元素,子父元素操作, dom元素追加,属性设置等等....一、dom元素的获取前面详细的总结了dom元素的获取方式,这里复习总结一下下...document.getElementsByClassName("") //获取到的是集合 使用规则是 数组方式 document.getElementsByName("") ...原创 2019-02-11 20:41:24 · 363 阅读 · 0 评论 -
JavaScript中的事件委托
事件的委托是指利用冒泡的原理,把事件加到父级上,触发执行效果。使用事件的委托优点是优化代码的性能。案例首先看不使用事件委托时的代码,<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style&am原创 2019-02-08 17:29:26 · 265 阅读 · 0 评论 -
JavaScript中的事件冒泡与捕获
DOM事件流DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的。当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程就是DOM事件流。 DOM事件标准定义了两种事件流,分别是捕获事件和冒泡事件。 DOM标准同时支持捕获事件模型和冒泡事件模型,捕获事件模型先发生。两种事件流都会触发DOM中的所...原创 2019-02-08 17:12:12 · 600 阅读 · 0 评论 -
JavaScript中DOM元素的事件
事件,是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互。事件触发和函数一起使用,当触发事件的时候,调用相应的代码去处理接下来的事情,例如,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出反应,返回给用户一个结果。javascript里面的事件分为键盘事件,鼠标事件,窗口事件,移动端的事件(触屏...原创 2019-02-08 16:26:07 · 345 阅读 · 0 评论 -
JavaScript中DOM基础语法
一、关于DOM DOM全称为document object model(文本对象模型), 当网页被加载时,浏览器会创建页面的文档对象模型,即dom元素。 document对象指的是所有的html对象,通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变...原创 2019-02-08 13:37:18 · 1057 阅读 · 0 评论 -
JavaScript逻辑结构
一、if语句1.if(条件){ 只有当条件为 true 时执行的代码 }2.If(条件){ 当条件为 true 时执行的代码}else{ 当条件不为 true 时执行的代码}3.If(条件1){ 当条件 1 为 true 时执行的代码}else if(条件2){ 当条件 2 为 true 时执行的代码}...原创 2019-02-08 11:48:07 · 350 阅读 · 0 评论 -
JavaScript中的函数问题
1.函数的声明 函数的声明分为两种:函数声明式和函数表达式。区别如下:函数声明式定义的函数,函数名是必须的;函数表达式的函数名是可选的. 函数声明式定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 函数声明式定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally...原创 2019-02-07 13:33:20 · 173 阅读 · 0 评论 -
JavaScript操作运算符
一、算术运算符 + (加)-(减)*(乘) /(除) %(取余) ++(自加) --(自减) parseInt() 强制转换为整型 parseFloat() 强制转换为小数点类型eg:运行结果:++和-- 分为前置还是后置: 前置++ 是先自加再运算,前置-- 是先自减再运算; 后置++ 是先运算再自加,后置-- 是先运算后自减;eg:运行...原创 2018-12-19 19:26:42 · 157 阅读 · 0 评论 -
JavaScript循环结构
一、for循环结构:for(表达式1 ;表达式2;表达式3){ } 注意:return(只能用于函数) break(跳出当前循环) continue (跳出当前循环 进入下次循环)关于for循环,3个表达式的都可以省略,即for(; ;){ } ,这个循环可以运行,但是是一个死循环!!! 对表达式1和表达式3省略,对for循环没有影响,只是少执行了代码而已。 如果表达式2...原创 2018-12-19 19:51:36 · 700 阅读 · 0 评论 -
网页加载时触发的事件及顺序
当我们打开网页,网页加载过程大致为解析HTML文档结构 加载外部样式表及JavaScript脚本 执行JavaScript脚本 DOM树渲染完成 加载未完成的外部资源(如图片,音频等) 页面加载完成对于以上过程,发生的事件有document readystatechange事件 readyState 属性描述了当前文档的加载状态,在整个加载过程中 document.rea...原创 2019-02-08 17:51:24 · 4478 阅读 · 0 评论 -
JavaScript中事件的参数
案例一光标在某一区域内移动时,获取光标坐标值并输出到控制台<html><head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function ()原创 2019-02-08 18:16:34 · 1429 阅读 · 1 评论 -
JavaScript写图片放大镜
第一个JavaScript案例,写的是网页中经常可以见到的图片放大镜, 看一下效果,如下图:代码如下:<html><head lang="en"> <meta charset="UTF-8"> <title>放大镜</title> <style>原创 2019-02-08 18:56:51 · 226 阅读 · 0 评论 -
JavaScript写购物车
话不多说,看一下图代码:<html><head lang="en"> <meta charset="UTF-8"> <title>购物车</title> <style> table{ border-collapse:原创 2019-02-11 17:31:40 · 1916 阅读 · 1 评论 -
逻辑算法题小合集
1.输入两个字符串,从第一个字符串中删除第二个字符串中的所有字符串不可以使用replace 例如:输入“They are students” 和“aeiou” 由题知删除后的第一个字符串变成 “Thy r stdnts”<script> var str="aeiou"; var strData="They are students"; var arr=...原创 2019-02-10 20:53:03 · 1513 阅读 · 0 评论 -
JavaScript写计算器案例
写一个计算器,实现加减乘除的功能。<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> table { border-collapse: col原创 2019-02-10 18:29:19 · 465 阅读 · 0 评论 -
JavaScript中的数组
什么是数组数组就是一组数据的集合,其表现形式就是内存中的一段连续的内存地址。一、数组的内置对象——Array 对象Array 对象用于在单个的变量中存储多个值。创建 Array 对象的语法:new Array();new Array(size);new Array(element0, element1, ..., elementn);参数参数 size 是期望的...原创 2019-02-10 17:57:35 · 270 阅读 · 0 评论 -
JavaScript字符串的内置函数
1.concat将两个或多个字符的文本组合起来,返回一个新的字符串。var a = "hello";var b = ",world";var c = a.concat(b);alert(c);//c = "hello,world"2.indexOf返回字符串中一个子串第一处出现的索引(从左到右搜索)。如果没有匹配项,返回 -1 。var index1 = a.indexOf("l");...原创 2019-02-10 15:42:59 · 3231 阅读 · 0 评论 -
JavaScript中的排序算法
一、冒泡排序冒泡排序,它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果它们的顺序(如从大到小、首字母从A到Z)错误就把它们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换,也就是说该元素已经排序完成。算法原理:比较相邻的元素。如果第一个比第二个大,就交换他们两个。 对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。...原创 2019-02-10 15:03:02 · 156 阅读 · 0 评论