js

JS实现继承的常用方法

北慕城南 提交于 2020-03-22 18:31:37
1、构造函数继承 function Parent(name){ this.name=name; } Parent.prototype.saiHi=function(){ console.log("hello") } function child(name,age,gender){ Parent.call(this,name) //call改变了this指向,这里指向了 child this.age=age this.gender=gender } let child=new Child("王磊",20,"男") console.log(child.name);// 王磊 child.sayHi(); // Uncaught TypeError:child.sayHi is not a function 缺点:只能解决属性的继承,使用属性的值不重复,但是父级类别的方法不能继承 2、原型链继承  function Parent(name,gender){ this.name=name; this.gender=gender; this.list=[1,2,3] } Parent.prototype.eat=function(){ console.log("晚餐时间到") } function Child(age){ this.age=age; } Child.prototype=new

JS——旋转木马

只谈情不闲聊 提交于 2020-03-22 18:00:41
1、opacity和zIndex的综合运用 2、样式的数组的替换:向右边滑动---删除样式数组第一位并在数组最后添加;向左边滑动---删除样式数组最后一位并在数组前添加 3、开闭原则,只有当回调函数执行完毕以后,我再次点击滑动按钮才有用 初始化 1 2 3 4 5 a b c d e ==>向右边滑动,数字动,样式不变 5 1 2 3 4 a b c d e ==>向右边滑动,字母动---删除第一位并在数组最后添加 1 2 3 4 5 b c d e a ==>向左边滑动,数字动 2 3 4 5 1 a b c d e ==>向左边滑动,字母动---删除最后一位并在数组前添加 1 2 3 4 5 e a b c d <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } .box { width: 1200px; margin: 10px auto; } .content { height: 500px; position: relative; } ul { list-style: none; } li { position: absolute; left: 200px; top: 0; } li

JS中的BOM

荒凉一梦 提交于 2020-03-22 16:01:04
------------恢复内容开始------------ 在JS中有三大块 1. ECMAScript --- javaScript的语法 2. BOM(Browser Object Model)--- 操作浏览器的属性和方法 3. DOM(Document Object Model)--- 操作页面的属性方法 今天我们就说说BOM的内容 1.console.log(navigator)可以在控制台打印浏览器的信息 其中重要的内容是 appName ---浏览器名称 NetScape appCodeName ---浏览器内核 appVersion ---浏览器版本 userAgent ---浏览器的整体信息 2.location 浏览器地址等内容 href---获取/设置 浏览器的地址 search---获取/设置浏览器传来的数据 reload()---刷新页面 语法是 location.href=XXX 其他属性相同 3. screen 屏幕 width---屏幕的宽度 height---屏幕的高度 availWidth---屏幕的可用宽度 availHeight---屏幕的可用高度 4. histiry 浏览历史 back()---后退一个页面 forward()---前进一个页面 go()---前进或后退多个页面 length -- history对象中缓存了多少个URL

js实现图片资源、blob、base64的各种场景转换

99封情书 提交于 2020-03-22 15:50:08
文件转babase64 function getImgToBase64(url,callback){//将图片转换为Base64 var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Anonymous'; img.onload = function(){ canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img,0,0); var dataURL = canvas.toDataURL('image/png'); callback(dataURL); canvas = null; }; img.src = url; } View Code /** * 获取指定文件的base64编码 * @param object File Blob 或 File 对象 这里是file对象 * @param Function callback 返回数据的回调函数 * @return string 返回base64编码 */ function getBase64(File,callback){ var reader = new

网页设计之js

五迷三道 提交于 2020-03-22 14:55:42
1. JavaScript概述 javaScript与ECMAScript的相爱相杀 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这门语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版。 该标准一开始就是针对JavaScript语言制定的,但是没有称其为JavaScript,有两个方面的原因。一是商标,JavaScript本身已被Netscape注册为商标。二是想体现这门语言的制定者是ECMA,而不是Netscape,这样有利于保证这门语言的开发性和中立性。 因此ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。 javaScript与ECMAScript ES6就是指ECMAScript6,尽管ECMAScript是一个重要的标准,但它并不是JavaScript唯一的部分,当然也不是唯一标准化的部分,实际上,一个完整的JavaScript实现是由以下3个不同部分组成的: 核心(ECMAScript) 文档对象模型(DOM)Document object model(整合js,css,html) 浏览器对象模型(BOM)Broswer

Js 时间

不问归期 提交于 2020-03-22 14:10:29
//将秒转成文字描述: //参数: // secondOrigin:单位:秒,示例:"2700"或2700, // formatCode: // 值为0或null,返回中文时间格式,示例:"60"或60 返回 1分 // 值为1,返回数字时间格式:示例:"60"或60 返回 00:01 :00 //返回值: //1.formatCode == null 或 formatCode ==0 // secondOrigin = 2700或"2700",返回:45分 // secondOrigin = 2515或"2515",返回:41分54秒 // secondOrigin = 3960或"3960",返回:1小时6分 // secondOrigin = 60或"60",返回:1分 // //2.formatCode == 1 // secondOrigin = 2700或"2700",返回:00:45 :00 // secondOrigin = 2515或"2515",返回:00:41 :54 // secondOrigin = 3960或"3960",返回:01:06 :00 // secondOrigin = 60或"60",返回:00:01 :00 function secondToDateStr(secondOrigin, formatCode) { if (!hasValue

纯JS实现轮播图特效——详解

爱⌒轻易说出口 提交于 2020-03-22 12:45:41
<div id="slider"> <div id="sliderImgs"> <img src="img/mi04.jpg" width="1000px"/> <img src="img/mi01.jpg" width="1000px" title="oneImg"/> <img src="img/mi02.jpg" width="1000px" title="twoImg"/> <img src="img/mi03.jpg" width="1000px" title="threeImg"/> <img src="img/mi04.jpg" width="1000px" title="fourImg"/> <img src="img/mi01.jpg" width="1000px"/> <!--因为要做无缝滚动,所以要克隆第一张和最后一张,放到最后一张后面和最前面--> </div> <div id="buttons"> <ul> <li class="active"></li> <li></li> <li></li> <li></li> </ul> </div> <div> <span id="prev"><</span> <span id="next">></span> </div> </div> CSS部分 <style type="text/css"> *{ margin

极简单JS轮播图特效

别来无恙 提交于 2020-03-22 12:41:27
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .banner { 13 width: 100%; 14 height: 450px; 15 background: #999; 16 position: relative; 17 } 18 19 .cont { 20 width: 100%; 21 height: 100%; 22 line-height: 450px; 23 text-align: center; 24 display: none; 25 color: #f00; 26 } 27 28 .tip { 29 width: 120px; 30 bottom: 50px; 31 left: 50%; 32 margin-left: -60px; 33 position: absolute; 34 } 35 36 .tip ul { 37 width: 120px; 38 margin: 0 auto; 39 text-align: center; 40 } 41 42 .tip ul li { 43 margin: 0; 44

js简单轮播图特效

我们两清 提交于 2020-03-22 12:40:20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>images</title> <style type="text/css"> .bannerzmm{ width: 55%; margin:0 auto; height: 400px; border: 2px solid red; } .bannerzmm img{ width: 100%; height: 100%; } </style> <script type="text/javascript"> var curIndex = 0; var timeInterval = 2000; var arr = new Array(); arr[0] = "images/b1.png"; arr[1] = "images/b2.png"; arr[2] = "images/b3.png";

JS轮播特效+导航二级菜单

旧城冷巷雨未停 提交于 2020-03-22 12:37:47
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="1.css"> <link rel="stylesheet" href="fonts/iconfont.css"> </head> <body> <div class="main" id="main"> <!-- 子导航 --> <div class="sub-menu hide" id="sub-menu"> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">手机、配件</div> <div class="sub-row"> <span class="bold mr10">手机通讯:</span> <a href="">手机</a> <span class="ml10 mr10">/</span> <a href="">手机维修</a> <span class="ml10 mr10">/</span> <a href="">以旧换新</a> </div> <div class="sub-row"> <span class="bold mr10">手机配件:</span>