如何用原生js給特定元素隨機新增背景色

阿新 • • 發佈：2019-02-17

每次做專案都是red,pink,blue,不僅單調乏味，而且充分暴露了自己三級甲等的英語水平，作為一名有理想，積極向上的程式設計師，這是果斷不能忍的事情，今天剛好寫一個用原生js給特定元素隨機新增背景色的方法，瞬間讓單調的生活豐富多彩起來，有了此方法媽媽再也不用擔心我找不到女朋友了。

原始碼：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type 
="text/css">
        .box{
        height: 200px;
        width: 200px;
        background: red;
      }
    </style>
</head>
<body>
      <div class="box"></div>
    <button class="btn">點我隨機變化顏色</button>
    <script type="text/javascript">
          var btn = document.querySelector(".btn" 
);
          var box = document.querySelector(".box");
        btn.onclick = function () {
            randColor(box)
        }
        function randColor(element) { //隨機改變背景色
            var ranColor = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
            element.style.background = ranColor;
        }
     
</script>
</body>
</html>

線上效果

如何用原生js給特定元素隨機新增背景色

每次做專案都是red,pink,blue,不僅單調乏味，而且充分暴露了自己三級甲等的英語水平，作為一名有理想，積極向上的程式設計師，這是果斷不能忍的事情，今天剛好寫一個用原生js給特定元素隨機新增背景色的方法，瞬間讓單調的生活豐富多彩起來，有了此方法媽媽再也不用

原生js給DOM元素新增一個或者多個類的方法總結

先看兩個例子： html: <div class="test" id="test"> 啦啦啦 </div> css： .test{ width: 100px; hei

用magento佈局給特定CMS頁面新增靜態塊

有次在做一個專案的時候，我需要在頭部和某些頁面內容中間加入一個獨有的靜態塊。元素必須完全在magento後臺定義，而且能很輕易地在一個新的CMS頁面建立、定義和移除。因此，元素必須被放置在主內容之外，不可能用後臺CMS新增，而是要用magento佈局新增。下面是我如何實現

簡單JS代--點選誰新增背景色

<!doctype html> <html> <head> <meta charset="utf-8"> <title>簡單JS代--點選誰新增背景色</title> <script src="http://libs.

用原生JS實現HTML5的元素拖拽功能

昨天遇到的一個面試題，題目是這樣的：頁面上有個元素A和帶放置元素B，實現將A拖拽並且下放到B，然後改變B的顏色。以下都是廢話，抒發一下心情請跳過，直接看程式碼吧昨天寫的比較簡陋，今天想想在寫一遍做個記錄，越來越感受到每次面試都是一次很好的學習的機會。發現自己的不足，然後繼續前

用原生js寫2048小遊戲

gin 小遊戲替換上下數位免費學習 title index.php parseint <!DOCTYPE html> <html> <head> <title> 2048-game </title&g

用原生js實現ajax、jsonp

原生js 斜杠 lang settime 發送數據 tro upper 類型之前一、原生js實現ajax $.ajax({ url: ‘‘, type: ‘post‘, data: {name: ‘zhaobao‘, age: 20}, dataTy

用原生js封裝輪播圖

round this getc 行間樣式 gets -m ++ fun ted 原生js封裝輪播圖對於初學js的同學來說，輪播圖還是一個難點，尤其是原生js封裝輪播圖代碼，下面是我之前做的一個輪播圖項目中封裝好的一些代碼，有需要的同學可以看一下，有什麽不懂的可以看註釋，

yii2 用 bootstrap 給元素添加背景色

provide get chmod return chm status 轉載 columns yii2.0 使用 bootstrap 給元素添加背景色 1、bootstrap 官網：http://getbootstrap.com/ 2、bootstrap 中文官網：http

原生js之同級元素添加移除class

添加 elements nts -i fun 訂單元素 set pos <div class="tp-bottom-content"> <div class="tp-nav"> <ul

用原生JS&PHP簡單的AJAX實例

show passwd script pos ner ID title 服務器端更改功能介紹： 1）file.html 使用 xmlhttp 請求服務器端文件 text ，並更新 file.html 的部分內容 2）update.html 使用 xmlhttp 通過 f

用原生JS 寫Web首頁輪播圖

get ext ++ posit containe add adding time 按鈕目前自己在學習JS中，用目前學到的東西寫了一個輪播圖，能完整的實現輪播圖的功能，但是肯定還是有不完善的地方，也希望大家能留言交流，一起學習。一、思路首先將功能一個一個理順

用原生js對表格排序

nts 有一個 tex 表格新建 float length ble inner 阿裏的模擬筆試題，當時時間有限沒寫出來，其實是因為自己對原生dom操作不熟悉，這裏補一下。題目的大意是有一個表格，如代碼所示 <table> <tr&

用原生JS實現多張圖片上傳及預覽功能（相容IE8）

最近需要做一個圖片上傳預覽的功能（相容IE8-11、chrome、firefox等瀏覽器），網上現有的檔案上傳元件（如webuploader）總是會遇到一些相容性問題。於是我參考了一些博文（連結找不到了⊙o⊙…），自己用原生JS寫了一個支援多張圖片上傳預覽功能的Demo 先通過最終效果看一下功能：

JavaScript：用原生js實現重力條件下，可拖拽小球的碰撞運動

本次用原生js，在小球的碰撞運動上添加了重力效應。並且可以拖拽小球，拖拽的方向和力度大小，決定了小球的初始速度和運動方向蠻有趣的，大家可以拷貝程式碼試一試。程式碼也附帶了一些小注釋。 <!DOCTYPE html> <html lang="en"> &l

javascript：用原生js模擬貪吃蛇遊戲練習

本次練習所有的程式碼：可以直接複製全部然後執行看效果~ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <

用原生JS寫無縫輪播

琢磨了幾個小時終於寫出來了，上程式碼這是佈局結構 <div id="box"><ul><li><a href="javascript:;"><img src="images/1.jpg" alt=""></

通過JS給HTML元素增加、刪除和獲取屬性內容

1.通過ID或者其他元素找到要處理的HTML物件：（舉例通過ID） var obj=document.getElementById('id'); 2.操作此物件新增屬性：obj

原生JS查詢相鄰元素——siblings方法

在JQuery中可以很方便地用 elem.siblings() 方法實現查詢相鄰元素，但在JS中並沒有這樣的方法，可以用previousSibling和nextSibling結合來實現。不過在JS中用獲取node的方法會有意想不到的多餘的空文字，所以需要加入判斷條件來判斷

用原生JS實現圖片輪播切換功能

效果如圖：程式碼如下：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title

如何用原生js給特定元素隨機新增背景色

相關推薦