分类：JS

2021
02-01

JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法

JavaScripthasOwnProperty()方法是Object的原型方法（也称实例方法），它定义在Object.prototype对象之上，所有Object的实例对象都会继承hasOwnProperty()方法。hasOwnProperty()方法用来检测一个属性是否是对象的自有属性，而不是从原型链继承的。如果该属性是自有属性，那么返回true，否则返回false。换句话说，hasOwnProperty()方法不会检测对象的原型链，只会检测当前对象本身，只有当前对象本身存在该属性时才... 继续阅读 >
2021
02-01

Javascript实现打鼓效果

Javascript实现打鼓效果 本文实例为大家分享了Javascript实现打鼓效果的具体代码，供大家参考，具体内容如下按住响应的键盘显示不同的声音<divclass="keys"><divdata-key="65"class="key"><kbd>A</kbd><spanclass="sound">clap</span></div><divdata-key="83"class="key"><kbd>S</kbd><spanclass="sound">hihat</span></div><divdata-key="68"class="key"><kbd>D</kbd><spanclass="sound">kick</span></div><di... 继续阅读 >
2021
02-01

Javascript实现关闭广告效果

Javascript实现关闭广告效果 用Javascript实现关闭广告案例，供大家参考，具体内容如下正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教。我们在网页中经常可以看见烦人的小广告，并且广告的旁边通常会有一个特定的位置和图标来关闭这个广告图。下面用JS代码来简单的实现<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>*{padding:0;margin:0;border:0;}... 继续阅读 >
2021
01-27

JavaScript实现点击切换功能

JavaScript实现点击切换功能 本文实例为大家分享了JavaScript实现点击切换功能的具体代码，供大家参考，具体内容如下在实际应用中，点击或者移入某一元素上，弹出下拉菜单或者页面，是网页设计的常见操作。下面我们实现一种点击菜单实现菜单切换，使用js提供三种方式实现该功能。1.使用html设计基本结构<body><h2>多Tab点击切换</h2><ulid="tab"><liid="tab1"value="1">10元套餐</li><liid="tab2"value="2">30元套餐</li><liid="tab3"value="3">50元... 继续阅读 >
2021
01-26

原生JS实现音乐播放器

原生JS实现音乐播放器 本文实例为大家分享了JS实现音乐播放器的具体代码，供大家参考，具体内容如下首先，使用HTML搭好我们的框架结构。这一步为了提高我们代码的可读性，多写注释。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>原生JS音乐播放器</title><linkrel="stylesheet"href="css/public.css"><linkrel="stylesheet"href="css/css.css"></head><body><!--音乐播放器--><divclass="music"><!--歌曲信... 继续阅读 >
2021
01-26

全面解析js中的原型,原型对象,原型链

理解原型我们创建的每一个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。看如下例子：functionPerson(){}Person.prototype.name='ccc'Person.prototype.age=18Person.prototype.sayName=function(){console.log(this.name);}varperson1=newPerson()person1.sayName()//-->cccvarperson2=newPerson()person2.sayName(... 继续阅读 >
2021
01-26

js中实现继承的五种方法

借用构造函数这种技术的基本思想很简单，就是在子类型构造函数的内部调用超类型的构造函数。另外，函数只不过是在特定环境中执行代码的对象，因此通过使用apply()和call()方法也可以在新创建的对象上执行构造函数。functionBox(name){this.name=name}Box.prototype.age=18functionDesk(name){Box.call(this,name)//对象冒充，对象冒充只能继承构造里的信息}vardesk=newDesk('ccc')console.log(desk.name)//-->... 继续阅读 >
2021
01-26

javascript代码实现简易计算器

javascript代码实现简易计算器 本文实例为大家分享了javascript实现简易计算器的具体代码，供大家参考，具体内容如下编辑了几个小时研发了一个简易好理解的计算器。不停改Bug，终于改好了。这是样式这是Css部分<style>#box{background-image:linear-gradient(120deg,#84fab00%,#8fd3f4100%);width:500px;height:420px;margin:auto;margin-top:200px;position:relative;}.reckon{width:280px;height:200px;backgr... 继续阅读 >
2021
01-22

原生js实现自定义难度的扫雷游戏

本文实例为大家分享了js实现扫雷游戏的具体代码，供大家参考，具体内容如下游戏功能：1、有四个难度2、可以自定难度1、html相关代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>扫雷</title><scriptsrc="js/mine.js"></script><linkrel="stylesheet"href="./css/mine.css"></head><!--需求分析：1.游戏的区域：9*... 继续阅读 >
2021
01-22

js canvas实现五子棋小游戏

js canvas实现五子棋小游戏 本文实例为大家分享了canvas实现五子棋小游戏的具体代码，供大家参考，具体内容如下效果思路canvans绘制棋盘，绘制时候边缘预留棋子位置监听点击事件绘制落子并记录到字典中获胜判定，在四个方向上检测是否有足够数量的连贯棋子代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>ym</title><style>canvas{display:block;margin:0auto;border:0}.result{... 继续阅读 >
2021
01-22

原生js实现放大镜组件

原生js实现放大镜组件 本文实例为大家分享了js实现放大镜组件开发的具体代码，供大家参考，具体内容如下功能需求：1、根据图片数组创建图标列表；2、鼠标滑过图标时，当前图标增加红色边框；3、鼠标滑过图标时，上方图片区域显示对应的图片，右侧显示放大后的图片内容；4、鼠标在图片区域移动时，在右侧实现放大效果；5、下方图标列表，点击左右按钮，实现翻页效果；6、当图标内容不够一页时，只移动到最后一个图标的位置；以京东的详情页为例，看一下效... 继续阅读 >
2021
01-21

原生js实现自定义滚动条组件

原生js实现自定义滚动条组件 本文实例为大家分享了js实现自定义滚动条组件的具体代码，供大家参考，具体内容如下功能需求：1、按照数据结构创建菜单内容，显示在页面中；2、点击菜单后，显示对应的下级菜单内容，如果整体内容溢出，则出现滚动条；3、滚动条的高度要随着整体内容高度的改变而改变。4、鼠标拖动滚动条，整体内容要随着向上滚动。5、当鼠标滚动时，滚动条和整体内容也要相应滚动。来看一下效果：默认状态：点击菜单，内容溢出后，出现滚动条；鼠... 继续阅读 >
2021
01-21

原生js实现自定义滚动条

本文实例为大家分享了js实现自定义滚动条的具体代码，供大家参考，具体内容如下1.HTML文件div1是滚动条，div2是滚动小球，div3是文本区域容器，div4是文本区域。<divid="div"><divid="div1"><divid="div2"></div></div><divid="div3"><divid="div4"><p>CSS3教程</p><p>CSS3教程</p><p>CSS3简介</p><p>CSS3边框</p><p>CSS3圆角</p><p>CSS3背景</p><p>CSS3渐变</p><p>CSS3文本效果</p><p>CSS3字体</p>... 继续阅读 >