0
Cho em hỏi cách sửa mã javascript và jquery
Em tìm được mã này trên codeopen, khi chạy mã nó bắt buộc phải dùng thư viện jquery. Em phải sửa làm sao để khỏi dùng thư viện ạ? Hay có thể chèn script nào để jquery khỏi bị xung đột hay không? (Vì trang của em còn 1 thư viện jquery nữa). Rất mong được giúp đỡ ạ!
var colors = new Array(
[131,188,253],
[60,255,60],
[81,226,195],
[45,175,230],
[255,0,255],
[255,128,0]);
var step = 0;
var colorIndices = [0,1,2,3];
var gradientSpeed = 0.002;
function updateGradient()
{
if ( $===undefined ) return;
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];
var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";
$('#gradient').css({
background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
background: "-moz-linear-gradient(right, "+color1+" 0%, "+color2+" 100%)"});
step += gradientSpeed;
if ( step >= 1 )
{
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];
colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
}
}
setInterval(updateGradient,10);
Thêm một bình luận
2 CÂU TRẢ LỜI
+4
Theo như mình đọc code thì không có chỗ nào sử dụng đến jQuery để làm việc với DOM cả. Chỉ duy nhất đoạn if ( $===undefined ) return; hình như để kiểm tra xem có jQuery instance hay không. Nếu không có sẽ return luôn. Bạn có thể thử xóa dòng đó đi xem sao nhé 
!
đây gì. $('#gradient').css.
bạn phải thêm thư viện jquery vào
@viquanghoa Ờh ha. Sao mình nhìn mãi chả thấy nhỉ 
! Vậy sửa đoạn jQuery thành như sau:
var gradientElement = document.getElementById("gradient");
gradientElement.style.background = "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))";
gradientElement.style.background = "-moz-linear-gradient(right, "+color1+" 0%, "+color2+" 100%)";
var colors = new Array(
[131,188,253],
[60,255,60],
[81,226,195],
[45,175,230],
[255,0,255],
[255,128,0]);
var step = 0;
var colorIndices = [0,1,2,3];
var gradientSpeed = 0.002;
function updateGradient()
{
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];
var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";
var gradientElement = document.getElementById("gradient");
gradientElement.style.background = "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))";
gradientElement.style.background = "-moz-linear-gradient(right, "+color1+" 0%, "+color2+" 100%)";
step += gradientSpeed;
if ( step >= 1 )
{
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];
colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
}
}
setInterval(updateGradient,10);
0
Một cách đơn giản hơn: trang có jquery rồi thì khỏi cần làm gì, chỉ cần load jquery trước đoạn này là được
