我有一個隨機創建帶有圓圈的 div 的函式。

它有一個隨機的邊框顏色選擇。它可以正常作業。

我還添加了一個盒子陰影，我希望顏色以與邊框相同的方式變化。

我按照與邊界類比的方式進行了所有操作，但出現錯誤：

“訊息”：“未捕獲的語法錯誤：無效或意外令牌”

如何為盒子陰影設定隨機顏色？

function createDiv(id, color) {
  let div = document.createElement('div');
  div.setAttribute('id', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.borderColor = colors[Math.floor(Math.random() * colors.length)];
    div.style.boxShadow = 0px 0px 15px 5px colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.borderColor = color; 
   div.style.boxShadow = 0px 0px 15px 5px color; 
  }
  div.classList.add("circle");
  document.body.appendChild(div);
}
    
let i = 0;

const oneSeconds = 1000;

setInterval(() => {
  i  = 1;
  createDiv(`div-${i}`)
}, oneSeconds);

div {
  display: inline-block;
  margin: 20px;
}

.circle {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  background-color: #ffffff;
  border: 3px solid #000;
  box-shadow: 0px 0px 15px 5px #0ff;
  margin: 20px;
}

uj5u.com熱心網友回復：

句法

“未捕獲的語法錯誤：無效或意外令牌”基本上意味著您的計算機無法決議/理解您提供的代碼。

語法定義為：

單詞和短語的排列以在一種語言中創建格式良好的句子。

當您看到語法錯誤時；這是因為您的代碼格式錯誤。

在這種特定情況下，您需要確保 js 接收字串而不是單獨的屬性：

   div.style.boxShadow = 0px 0px 15px 5px color;

變成

   div.style.boxShadow = "0px 0px 15px 5px "  color;

function createDiv(id, color) {
  let div = document.createElement('div');
  div.setAttribute('id', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.borderColor = colors[Math.floor(Math.random() * colors.length)];
    div.style.boxShadow = "0px 0px 15px 5px " colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.borderColor = color; 
   div.style.boxShadow = "0px 0px 15px 5px "  color; 
  }
  div.classList.add("circle");
  document.body.appendChild(div);
}
    
let i = 0;

const oneSeconds = 1000;

setInterval(() => {
  i  = 1;
  createDiv(`div-${i}`)
}, oneSeconds);

div {
  display: inline-block;
  margin: 20px;
}

.circle {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  background-color: #ffffff;
  border: 3px solid #000;
  box-shadow: 0px 0px 15px 5px #0ff;
  margin: 20px;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/442468.html

標籤：javascript html css

上一篇：如何抓取html檔案中的輸入并將其從javascript檔案中抓取到

下一篇：從HTML*ngFor陳述句呼叫在按鈕陣列中定義的特定函式

boxShadowjavascript的隨機顏色

句法