Yêu cầu thg 12 8, 2018 2:32 CH 128 0 2
  • 128 0 2
0

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

Chia sẻ
  • 128 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 CÂU TRẢ LỜI


Đã trả lời thg 12 9, 2018 9:54 SA
+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é 😃!

Chia sẻ
Avatar Hòa Vi @viquanghoa
thg 12 11, 2018 1:26 SA

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

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

Avatar NamNV609 @namnv609
thg 12 11, 2018 3:24 SA

@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);
Đã trả lời thg 12 11, 2018 7:40 SA
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

Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí