介于JS写一个点击按钮的代码是什么

发布时间：2023-08-04 13:01:46 所属栏目：语言来源：

导读：在这篇文章中我们来了解一下“基于JS写一个点击按钮的代码是什么”，一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往

在这篇文章中我们来了解一下“基于JS写一个点击按钮的代码是什么”，一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

小轮播图滑动滚播，好不好看你说了算。

结构就两行

<main>

</svg></button>

</div>

</svg></button>

<button class="particles-button">Upload</button>

</div>

</svg></button>

<button class="particles-button">Delete</button>

</div>

</svg></button>

<button class="particles-button">Submit</button>

</div>

</svg></button>

<button class="particles-button">refresh</button>

</div>

</svg></button>

<button class="particles-button">Bookmark</button>

</div>

</svg></button>

<button class="particles-button">Subscribe</button>

</div>

</svg></button>

<button class="particles-button">Logout</button>

</div>

</svg></button>

</div>

</svg></button>

<button class="particles-button">Pause</button>

</div>

</svg></button>

<button class="particles-button">Register</button>

</div>

</svg></button>

<button class="particles-button">Export</button>

</div>

</main>

样式

样式代码太长了，影响阅读

表现

关键代码，总共没几行，让它动起来，你们直接复制拿去用就行

/* eslint-disable */

(function(global, factory) {

typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('animejs')) :

typeof define === 'function' && define.amd ? define(['animejs'], factory) :

(global.Particles = factory(global.anime));

}(this, (function(anime) {

'use strict';

/* eslint-enable */

function Particles(element, options) {

this.el = getElement(element);

this.options = extend({color: getCSSValue(this.el, 'background-color')}, this.defaults, options);

this.init();

}

Particles.prototype = {

defaults: {

type: 'circle',

style: 'fill',

canvasPadding: 150,

duration: 1000,

easing: 'easeInOutCubic',

direction: 'left',

size: function() { return Math.floor((Math.random() * 3) + 1); },

speed: function() { return rand(4); },

particlesAmountCoefficient: 3,

oscillationCoefficient: 20

init: function () {

this.particles = [];

this.frame = null;

this.canvas = document.createElement('canvas');

this.ctx = this.canvas.getContext('2d');

this.canvas.className = 'particles-canvas';

this.canvas.style = 'display:none;';

this.wrapper = document.createElement('div');

this.wrapper.className = 'particles-wrapper';

this.el.parentNode.insertBefore(this.wrapper, this.el);

this.wrapper.appendChild(this.el);

this.parentWrapper = document.createElement('div');

this.parentWrapper.className = 'particles';

this.wrapper.parentNode.insertBefore(this.parentWrapper, this.wrapper);

this.parentWrapper.appendChild(this.wrapper);

this.parentWrapper.appendChild(this.canvas);

loop: function () {

this.updateParticles();

this.renderParticles();

if (this.isAnimating()) {

this.frame = requestAnimationFrame(this.loop.bind(this));

}

updateParticles: function () {

var p;

for (var i = 0; i < this.particles.length; i++) {

p = this.particles[i];

if (p.life > p.death) {

this.particles.splice(i, 1);

} else {

p.x += p.speed;

p.y = this.o.oscillationCoefficient * Math.sin(p.counter * p.increase);

p.life++;

p.counter += this.disintegrating ? 1 : -1;

}

if (!this.particles.length) {

this.pause();

this.canvas.style.display = 'none';

if (is.fnc(this.o.complete)) {

this.o.complete();

}

renderParticles: function () {

this.ctx.clearRect(0, 0, this.width, this.height);

var p;

for (var i = 0; i < this.particles.length; i++) {

p = this.particles[i];

if (p.life < p.death) {

this.ctx.translate(p.startX, p.startY);

this.ctx.rotate(p.angle * Math.PI / 180);

this.ctx.globalAlpha = this.disintegrating ? 1 - p.life / p.death : p.life / p.death;

this.ctx.fillStyle = this.ctx.strokeStyle = this.o.color;

this.ctx.beginPath();

if ( this.o.type === 'circle' ) {

this.ctx.arc(p.x, p.y, p.size, 0, 2 * Math.PI);

}

else if ( this.o.type === 'triangle' ) {

this.ctx.moveTo(p.x, p.y);

this.ctx.lineTo(p.x+p.size, p.y+p.size);

this.ctx.lineTo(p.x+p.size, p.y-p.size);

}

else if ( this.o.type === 'rectangle' ){

this.ctx.rect(p.x, p.y, p.size, p.size);

}

if ( this.o.style === 'fill' ) {

this.ctx.fill();

}

else if ( this.o.style === 'stroke' ) {

this.ctx.closePath();

this.ctx.stroke();

}

this.ctx.globalAlpha = 1;

this.ctx.rotate(-p.angle * Math.PI / 180);

this.ctx.translate(-p.startX, -p.startY);

}

play: function () {

this.frame = requestAnimationFrame(this.loop.bind(this));

pause: function () {

cancelAnimationFrame(this.frame);

this.frame = null;

addParticle: function (options) {

var frames = this.o.duration * 60 / 1000;

var speed = is.fnc(this.o.speed) ? this.o.speed() : this.o.speed;

this.particles.push({

startX: options.x,

startY: options.y,

x: this.disintegrating ? 0 : speed * -frames,

y: 0,

angle: rand(360),

counter: this.disintegrating ? 0 : frames,

increase: Math.PI * 2 / 100,

life: 0,

death: this.disintegrating ? (frames - 20) + Math.random() * 40 : frames,

speed: speed,

size: is.fnc(this.o.size) ? this.o.size() : this.o.size

});

addParticles: function (rect, progress) {

var progressDiff = this.disintegrating ? progress - this.lastProgress : this.lastProgress - progress;

this.lastProgress = progress;

var x = this.options.canvasPadding;

var y = this.options.canvasPadding;

var progressValue = (this.isHorizontal() ? rect.width : rect.height) * progress + progressDiff * (this.disintegrating ? 100 : 220);

if (this.isHorizontal()) {

x += this.o.direction === 'left' ? progressValue : rect.width - progressValue;

} else {

y += this.o.direction === 'top' ? progressValue : rect.height - progressValue;

}

var i = Math.floor(this.o.particlesAmountCoefficient * (progressDiff * 100 + 1));

if (i > 0) {

while (i--) {

this.addParticle({

x: x + (this.isHorizontal() ? 0 : rect.width * Math.random()),

y: y + (this.isHorizontal() ? rect.height * Math.random() : 0)

});

}

if (!this.isAnimating()) {

this.canvas.style.display = 'block';

this.play();

}

addTransforms: function (value) {

var translateProperty = this.isHorizontal() ? 'translateX' : 'translateY';

var translateValue = this.o.direction === 'left' || this.o.direction === 'top' ? value : -value;

this.wrapper.style[transformString] = translateProperty + '('+ translateValue +'%)';

this.el.style[transformString] = translateProperty + '('+ -translateValue +'%)';

disintegrate: function (options) {

if (!this.isAnimating()) {

this.disintegrating = true;

this.lastProgress = 0;

this.setup(options);

var _ = this;

this.animate(function(anim) {

var value = anim.animatables[0].target.value;

_.addTransforms(value);

if (_.o.duration) {

_.addParticles(_.rect, value / 100, true);

}

});

}

integrate: function (options) {

if (!this.isAnimating()) {

this.disintegrating = false;

this.lastProgress = 1;

this.setup(options);

var _ = this;

this.animate(function(anim) {

var value = anim.animatables[0].target.value;

setTimeout(function() {

_.addTransforms(value);

}, _.o.duration);

if (_.o.duration) {

_.addParticles(_.rect, value / 100, true);

}

});

}

setup: function (options) {

this.o = extend({}, this.options, options);

this.wrapper.style.visibility = 'visible';

if (this.o.duration) {

this.rect = this.el.getBoundingClientRect();

this.width = this.canvas.width = this.o.width || this.rect.width + this.o.canvasPadding * 2;

this.height = this.canvas.height = this.o.height || this.rect.height + this.o.canvasPadding * 2;

}

animate: function (update) {

var _ = this;

anime({

targets: {value: _.disintegrating ? 0 : 100},

value: _.disintegrating ? 100 : 0,

duration: _.o.duration,

easing: _.o.easing,

begin: _.o.begin,

update: update,

complete: function() {

if (_.disintegrating) {

_.wrapper.style.visibility = 'hidden';

}

});

isAnimating: function () {

return !!this.frame;

isHorizontal: function () {

return this.o.direction === 'left' || this.o.direction === 'right';

}

};

// Utils

var is = {

arr: function (a) { return Array.isArray(a); },

str: function (a) { return typeof a === 'string'; },

fnc: function (a) { return typeof a === 'function'; }

};

function stringToHyphens(str) {

return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();

}

function getCSSValue(el, prop) {

if (prop in el.style) {

return getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0';

}

var t = 'transform';

var transformString = (getCSSValue(document.body, t) ? t : '-webkit-' + t);

function extendSingle(target, source) {

for (var key in source)

target[key] = is.arr(source[key]) ? source[key].slice(0) : source[key];

return target;

}

function extend(target) {

if (!target) target = {};

for (var i = 1; i < arguments.length; i++)

extendSingle(target, arguments[i]);

return target;

}

function rand(value) {

return Math.random() * value - value / 2;

}

function getElement(element) {

return is.str(element) ? document.querySelector(element) : element;

}

return Particles;

})));

关于“基于JS写一个点击按钮的代码是什么”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，小编每天都会为大家更新不同的知识。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!