Asked Dec 8th, 2018 2:32 PM 92 0 2
  • 92 0 2
0

Cho em hỏi cách sửa mã javascript và jquery

Share
  • 92 0 2

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);

2 ANSWERS


Answered Dec 9th, 2018 9:54 AM
+3

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é 😃!

Share
Hòa Vi @viquanghoa
Dec 11th, 2018 1:26 AM

đây gì. $('#gradient').css.

bạn phải thêm thư viện jquery vào

0
| Reply
Share
NamNV609 @namnv609
Dec 11th, 2018 3:24 AM

@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
| Reply
Share
Answered Dec 11th, 2018 7:40 AM
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

Share