html灯光效果,HTML5极客LED字母灯光效果-优快云博客

这篇博客通过JavaScript实现了一种闪电效果，主要涉及字符串操作、随机数生成、DOM操作和动画帧循环。代码中定义了常量和函数，包括闪电的起始位置、随机字符生成、随机移动方向选择等，最终在页面上动态显示闪电移动并消失的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

const DICTIONARY = "0123456789qwertyuiopasdfghjklzxcvbnm".split('');

const LETTER_TOTAL = 406;

const CENTER_WORD = 'hacker lightning';

const CW_START = LETTER_TOTAL / 2 - CENTER_WORD.length / 2;

const CW_END = CW_START + CENTER_WORD.length;

const ROW_LENGTH = 45;

var getBoltStartingPositions = function() {

var results = [];

results.push(CW_START);

results.push(CW_END + 1);

for (var i = CW_START; i < CW_END + 1; i++) {

var top = i - ROW_LENGTH;

var bottom = i + ROW_LENGTH + 1;

results.push(top, bottom);

}

return results;

}

const STARTING_POSITIONS = getBoltStartingPositions();

var el = document.getElementById('hackerLightning');

function getRandomIntInclusive(min, max) {

min = Math.ceil(min);

max = Math.floor(max);

return Math.floor(Math.random() * (max - min + 1)) + min;

}

var genRanChar = function() {

var index = Math.floor(Math.random() * DICTIONARY.length);

return DICTIONARY[index];

}

var genRanString = function(amt) {

var string = ``;

var wordIndex = 0;

for (var i = 0; i < amt; i++) {

if (i >= CW_START && i < CW_END) {

string += `${CENTER_WORD[wordIndex]}`;

wordIndex++;

} else {

string += `${genRanChar()}`;

}

return string;

}

function pickRandomProperty(obj) {

var result;

var count = 0;

for (var prop in obj)

if (Math.random() < 1 / ++count)

result = prop;

return result;

}

var Bolt = function() {

this.position = STARTING_POSITIONS[getRandomIntInclusive(0, STARTING_POSITIONS.length)];

this.lastDirection = '';

this.moves = {

left: -1,

right: 1,

up: -ROW_LENGTH,

down: ROW_LENGTH

}

this.move = function() {

var direction = pickRandomProperty(this.moves);

while (direction === this.lastDirection) {

direction = pickRandomProperty(this.moves);

}

this.lastDirection = direction;

var move = this.moves[direction];

var current = document.querySelector(`#hackerLightning span:nth-child(${this.position})`);

var next = document.querySelector(`#hackerLightning span:nth-child(${this.position += move})`);

if (!next) {

current.style.opacity = 0.1;

return false;

} else {

current.style.opacity = 0.1;

next.style.opacity = 1;

}

el.innerHTML = genRanString(LETTER_TOTAL);

var genBolts = function(amt) {

var results = [];

for (var i = 0; i < amt; i++) {

results.push(new Bolt());

}

return results;

}

var animateBolts = function() {

var bolts = genBolts(15);

var count = 0;

var animate = setInterval(function() {

if (bolts.length > 0) {

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

var canMove = bolts[i].move();

if (canMove === false) {

var index = bolts.indexOf(bolts[i]);

if (index > -1) {

bolts.splice(index, 1);

}

count++;

} else {

clearInterval(animate);

}

}, 16);

}

animateBolts();