[...document.querySelectorAll('.a3d div')].map((item) => {
item.style['animationDuration'] = '1s';
});
[...document.querySelectorAll('.a3d div')].map((item) => {
var num = Math.floor(Math.random() * (80 - 70 + 1)) + 70
item.style['animationDuration'] = num +'s';
});
加个随机数应该合理点
相关源代码能发出来看看吗?
他页面的旋转的代码
'use strict';
window.onload = function () {
var htmlobj = $.ajax({ url: "/upload/sys_yun.js?number="+Math.random(), async: false }, function (data) {
});
var data = htmlobj.responseText;
var KEYMAP = {},
key_els = {};
var arrkey = data.split(',');
KEYMAP = arrkey;
console.table(unescape(arrkey));
var rand = function rand() {
var max = arguments.length <= 0 || arguments[0] === undefined ? 1 : arguments[0];
var min = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
var _int = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2];
var gen = min + (max - min) * Math.random() * 55;
return _int ? Math.round(gen) : gen;
};
(function init() {
var a3d = document.querySelector('.a3d'),
f = document.createDocumentFragment(),
lims = [33, 41, 47, 58, 91, 127, 146],
len = lims.length,
unit = 360 / (len + 1);
for (var p in KEYMAP) {
var objarr = KEYMAP[p].split(':');
var title = unescape(objarr[0]);
var num = unescape(objarr[1]);
var rot = document.createElement('div'),
key = document.createElement('div');
key.dataset.name = title;
key.dataset.code = num;
key.classList.add('key');
for (var i = 0; i < len; i++) {
//if (KEYMAP[p] < lims[i]) {
// var hue = rand((i + .9) * unit, (i + .2) * unit, 1);
// key.style.color = 'hsl(' + hue + ',100%,75%)';
// break;
//}
if (i%2==0) {
var hue = rand((i + .9) * unit, (i + .2) * unit, 1);
key.style.color = 'hsl(' + hue + ',100%,75%)';
break;
}
}
rot.classList.add('rot');
key_els[p] = key;
rot.appendChild(key);
f.appendChild(rot);
}
a3d.appendChild(f);
})();
//addEventListener('keydown', function (e) {
// e.preventDefault();
// for (var p in KEYMAP) {
// if (e.keyCode === KEYMAP[p]) {
// if (!key_els[p].classList.contains('vis')) key_els[p].classList.add('vis');
// return;
// }
// }
//}, false);
//addEventListener('keyup', function (e) {
// e.preventDefault();
//}, false);
//addEventListener('animationend', function (e) {
// var t = e.target;
// if (e.animationName === 'hl') t.classList.remove('vis');
//}, false);
};