分类：JS

2020
10-10

如何在JS文件中获取Vue组件

1.背景最近在写项目时候遇到这样一个需求：我封装了一个js文件utils.js，然后在组件my-component.vue中引用了该js文件。在utils.js文件中有一些函数，需要操作my-component.vue中的data和methods。为了方便理解，上述js文件和组件名非实际工程中的名字，仅是示例。2.思路通过调用函数把组件实例this传递到被应用的js文件里。3.目录结构src/├──App.vue├──assets├──main.js├──component... 继续阅读 >
2020
10-10

javascript自定义加载loading效果

javascript自定义加载loading效果 本文实例为大家分享了javascript自定义加载loading效果的具体代码，供大家参考，具体内容如下加载中图片，底色为白色(看不到)效果如图：使用方法this.tool.showLoading('加载中',this)this.tool.showLoading('合成中',this)this.tool.hideLoading()引用文件在App.vue中<stylescoped>@import'./common.css';</style>在main.js中importtoolsfrom'./tools'Vue.prototype.tool=toolstools.jsexportdefault{//显示加载框---... 继续阅读 >
2020
10-10

图解JS原型和原型链实现原理

图解JS原型和原型链实现原理 在我初学JS语言的继承机制原型和原型链的时候，我一直理解不了这种设计机制，再加上之前原有对Java继承的理解，在学习JS继承机制的设计上踩了一个大坑，很多知识点前期都是死记硬背，无法真正的理解它的设计思想。JS中的继承机制思想可以说是学习JS的一个核心思想，更可以说是JS中的一个命脉，往往这些复杂、抽象的继承关系，以及专业术语、代名词确成为了困扰初学者的绊脚石。当我真正理解它的设计思想时，其实并没有那... 继续阅读 >
2020
10-10

js+canvas实现转盘效果（两个版本）

本文实例为大家分享了js+canvas实现转盘效果的具体代码，供大家参考，具体内容如下用到了canvas的绘制，旋转，重绘操作，定时器，文本，平移，线条，圆，清理画布等等；版本一不可以点击，刷新旋转<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>转盘抽奖</title><styletype="text/css">#myCanvas{background:#FAEBD7;}</style></head><body><canvasid="myCanvas"width="500"height="500"></canvas... 继续阅读 >
2020
10-10

js实现3D粒子酷炫动态旋转特效

js实现3D粒子酷炫动态旋转特效 js实现3D粒子酷炫动态旋转特效（效果比较酷炫，中途不仅有形态的变换，还有颜色的变化，希望大家能够喜欢）代码实现过程中的静态截图<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><HTML><HEAD><TITLE>NewDocument</TITLE><METANAME="Generator"CONTENT="EditPlus"><METANAME="Author"CONTENT=""><METANAME="Keywords"CONTENT=""><METANAME="Description"CONTENT=""><style>html,body{margi... 继续阅读 >
2020
10-10

原生JS实现九宫格抽奖

本文实例为大家分享了JS实现九宫格抽奖的具体代码，供大家参考，具体内容如下上代码：<divclass="wrapper"><div>谢谢惠顾</div><div>十万元现金</div><div>谢谢惠顾</div><div>iphone11</div><div>抽奖</div><div>美的冰箱</div><div>谢谢惠顾</div><div>50元红包</div><div>谢谢惠顾</div></div><divclass="result"></div>CSS样式代码：<style>.wrapper{width:300px;h... 继续阅读 >
2020
10-10

js+canvas实现画板功能

本文实例为大家分享了js+canvas实现画板功能的具体代码，供大家参考，具体内容如下1.实现了画图，改变画笔粗细，改变画笔颜色，清屏功能<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>画板</title><linkrel="shortcuticon"type="image/x-icon"href="img/an.ico"/><linkrel="stylesheet"type="text/css"href="css/drow.css"/></head><body><canvasid="mycanvas"width="1100px"height="660px"></c... 继续阅读 >
2020
10-10

python与js主要区别点总结

数据类型js和python都是动态语言，a=1;a='abc'，a这个变量是动态的，类型是随时可以被更改的。而在java中就是静态语言变量，inta=1；a='abc'就会报错。基本命令1.输出js里面的console.log()、document.write()、window.alert()、document.writeIn()python里面是print()2.输入js里面是window.prompt()python里面是input()3.加注释js里面//单行注释内容,/*多行注释内容*/python里面#单行注释内容,"... 继续阅读 >
2020
10-10

js+audio实现音乐播放器

js+audio实现音乐播放器 本文实例为大家分享了js+audio实现音乐播放器的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>音乐播放器</title><linkrel="shortcuticon"type="image/x-icon"href="img/an.ico"/><linkrel="stylesheet"type="text/css"href="css/music_Play.css"/></head><body><divclass="music_bg"><divclass="music_cont"><audioid="audio1"src=""></audio><divclass=... 继续阅读 >
2020
10-10

js+canvas实现刮刮奖功能

本文实例为大家分享了js+canvas实现刮刮奖的具体代码，供大家参考，具体内容如下1.实现了PC端的刮刮奖效果2.使用了canvas的文本，像素操作，合成，绘制图形，随机数<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>刮刮奖</title><styletype="text/css">*{margin:0;padding:0;}.box{width:500px;height:500px;margin:0auto;position:relative;background:#00BFFF;}#prize{width:300px;... 继续阅读 >
2020
10-10

js+css3实现简单时钟特效

js+css3实现简单时钟特效 本文实例为大家分享了js+css3实现简单时钟的具体代码，供大家参考，具体内容如下1.实现了时钟的特效，可以转动，时间准确，画面美观大气；2.用到了css3的transform:rotate，transform-origin:,伪元素，border-radius，定位，z-index等等效果如图：代码如下：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>CSS3时钟特效</title><linkrel="shortcuticon"type="image/x-icon"href="img/an.ico"/><style>/*表... 继续阅读 >
2020
10-10

js代码编写无缝轮播图

本文实例为大家分享了js编写无缝轮播图的具体代码，供大家参考，具体内容如下前言这个是一个轮播图提示：请让最后一个img和第一个img是一张图片相同且li数目为img数目-1；一、无缝轮播图让第一张和最后一张相同type:第一张和最后一张相同；在最后一张向下一张切换时，立刻跳到第一张然后向第二张正常切换二、使用步骤1.html代码代码如下（示例）：<divclass="banner"><divclass="qh"><div></div><div></div><div></div... 继续阅读 >
2020
10-10

在js文件中引入（调用）另一个js文件的三种方法

比如我写了一个JS文件，这个文件需要调用另外一个JS文件，该如何实现呢？下面就总结下在js文件中引入另一个js文件的实现方法一，在调用文件的顶部加入下例代码functionaddScript(url){document.write("<scriptlanguage=javascriptsrc="+url+"></script>");}注：有时你引用的文件还可能需要引用其他的js,我们需要将需要的那个js文件也以同样的方法引用进来。方法二，在js中写如下代码：functionaddScript(url){varscript=d... 继续阅读 >
2020
10-10

JavaScript实现简单日历效果

JavaScript实现简单日历效果 本文实例为大家分享了JavaScript实现简单日历效果的具体代码，供大家参考，具体内容如下实现效果：根据所选择的年月，列出当月对应是周几，效果图如下：实现思路：1、使用select标签保存年月的所选菜单。使用table标签保存当月天数，表头为固定的周日周一等。2、使用option对象，给年月循环赋值。3、将每月的天数保存到数组中，根据所选的年月获取当月的天数，以及当月一号对应周几，对应周几就在第一行先打印几个空格，然后从一号... 继续阅读 >
2020
10-10

JS实现密码框效果

JS实现密码框效果 在输入密码时，将密码的长度设置为6-16，且在密码长度出现小于6或是大于16时，会出现提示，效果如下图 1.此事件为失去焦点事件，当鼠标离开密码框且点击旁边就会触发事件 2.输入密码会出现提示，事件发生与密码的长度有关 3.根据长度再来判断该提示的消息与效果.代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.... 继续阅读 >