2. 程式人生 > >JS操作CSS隨機改變網頁背景實現思路

JS操作CSS隨機改變網頁背景實現思路

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

JS和CSS讓頁面每次重新整理隨機產生一張背景圖，當然我的回答是可以的，下面是具體的實現思路，感興趣的朋友可以參考下

今天有個朋友在weibo上問我可不可以用JS和CSS讓頁面每次重新整理隨機產生一張背景圖，當然我的回答是可以的。具體可以這樣做：  1、用JS定義一個圖片陣列，裡面存放你想要隨機展示的圖片   程式碼如下: var imgArr=["http://www.google.com.hk/intl/zh-CN/images/logo_cn.png",  "http://www.baidu.com/img/baidu_sylogo1.gif",  "http://www.open-open.com/news/uploadImg/20120111/20120111081906_79.jpg", 
"http://www.open-open.com/news/uploadImg/20120111/20120111081906_76.jpg"  ];  這裡我隨便找來了4張圖片，湊活著看看。  2、用JS產生一個隨機數，當然這個隨機數從0開始到imgArr.length-1結束   程式碼如下: var index =parseInt(Math.random()*(imgArr.length-1));  這樣我們就得到當前隨機產生的圖片   程式碼如下: var currentImage=imgArr[index];  3、既然隨機產生了一張背景圖，那就用JS把這個圖片作為背景圖吧。   程式碼如下: document.getElementById("BackgroundArea").style.backgroundImage="url("+currentImage+")"; 
由於這是一個demo，所以我在頁面上定義了一個id為BackgroundArea的div，同時也是為這個div設定隨機背景的。  程式碼如下: <div id="BackgroundArea">  </div> 

相關推薦

JS操作CSS隨機改變網頁背景實現思路

JS和CSS讓頁面每次重新整理隨機產生一張背景圖，當然我的回答是可以的，下面是具體的實現思路，感興趣的朋友可以參考下 今天有個朋友在weibo上問我可不可以用JS和CSS讓頁面每次重新整理隨機產生一張背景圖，當然我的回答是可以的。具體可以這樣做：  1、用JS定義一個

使用js操作css實現js改變背景圖片示例

有個朋友在weibo上問我可不可以用JS和CSS讓頁面每次重新整理隨機產生一張背景圖，當然是可以的。具體的方法看下面的實現程式碼吧 1、用JS定義一個圖片陣列，裡面存放你想要隨機展示的圖片 複製程式碼 程式碼如下: ar imgArr=["http://www.jb5

11.13 js操作css樣式

1.Js操作css樣式 Div.style.width=”100px”.在div標籤內我們添加了一個style屬性，並設定 了width值。這種寫法會給標籤帶來大量的style屬性，跟實際專案是不符。 我們沒有讓css和html分離。 所以如果是為了獲取css樣式 window.getCompute

js操作Css樣式

1、js操作css樣式 div.style.width="100px"; 在div標籤裡我們添加了一個屬性，並設定這種寫法會給標籤帶來大量的style屬性 跟實際專案不符，因為沒有讓CSS和html分離，所以獲取css樣式： window.getComputedStyle()  獲取經過計算

CSS樣式設定網頁背景

首先我們要知道在HTML、CSS裡面，有關背景的設定都與background有關，比如background-color：background-image：等 1、background-color屬性-設定背景顏色 語法：background-color：顏色； 這裡的顏色可

對js操作html的實踐【1】——實現網頁假崩潰吸引網友註意力

code 自己 頁面 註意力 size mat pre fun hidden 前些天逛網站的時候，發現了一些好玩的細節：當網頁失去焦點後標題顯示網頁崩潰，這將使得瀏覽者重新點回網頁。 來自ANOTHERHOME（https://www.anotherhome.net/）與晨

DIV半透明層 CSS來實現網頁背景半透明

js驗證碼實現---使用Canvas繪製一個隨機改變的驗證碼圖片

使用Canvas繪製一個隨機改變的驗證碼圖片,如下圖        var str = 'ABCDEFGHJKLMNPQRSTWXY3456789'; var char = str[ 0~字串長度間的隨機數 ]; 

CSS實現網頁背景顏色漸變效果的程式碼

body { font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica; margin: 0; background-color: #b1e0fa; back

通過JS和CSS，實現網頁載入中的動畫效果

需要材料： 一張loading動畫的gif圖片 基本邏輯： 模態框遮罩 + loading.gif動圖， 預設隱藏模態框 頁面開始傳送Ajax請求資料時，顯示模態框 請求完成，隱藏模態框

JS實現網頁背景旋轉縮放輪播效果

parse html char height sta api接口 圖片地址 wid col 實現效果：效果預覽 css代碼： .switch_images { display: inline-block; margin: 0; padding: 0

CSS網頁背景圖片等比例占滿整個頁面的解決方案

100% 放大縮小 所有 功能 cnblogs 高度 圖片 版本 class 想做一個個人展示類的網站首頁，用整張圖片來當背景，瀏覽器窗口放大縮小時背景圖片不會變形，需要用到分層來實現其他功能，就用DIV來實現了 #bodycontainer { width:10

Day49：CSS屬性操作（文本、背景、邊框、列表、display、邊距）

tro 驗證 介紹 lec ica 基本 next eat 敬畏 一、CSS屬性操作 1、CSS text 文本顏色：color 顏色屬性被用來設置文字的顏色。 顏色是通過CSS最經常的指定： 十六進制值 - 如: ＃FF0000 一個RGB值 - 如: RGB(255,

JS裏的DOM在網頁中的實際操作

星期 str 下拉菜單 line 讓其 margin solid 星空 ext <style type="text/css"> /*大圖輪播*/ *{ margin:0px auto; padding:0px; } #

C#實現的JS操作類實例

www. ora play gpo cursor help tran scrip 文件 本文實例講述了C#實現的JS操作類。分享給大家供大家參考。具體如下： 這個C#類封裝了常用的JS客戶端代碼操作，包括彈出對話框、返回上一頁，通過JS轉向，彈出警告框並轉向等。using

網頁背景視頻的實現

右擊 代碼實現 latex over right 註意 posit otto net 先放上騰訊官網的簡便源碼： 視頻背景時，要註意最重要的一個點： 蒙版是否遮蓋住了視頻控件（右擊） HTML： 1 <!DOCTYPE htm

html 網頁背景圖片根據屏幕大小CSS自動縮放

val apple back clas 交互 dde fun 效果 而且 https://blog.csdn.net/coslay/article/details/47109281 騰訊微博和QQ空間的登錄背景圖片是根據訪客的屏幕大小自動縮放的，但是好像是用JQuery代碼

js和css實現手機橫豎屏預覽思路整理

實現效果，如上圖。   首先，實現手機頁面在PC端預覽， 則先在網上找到一個手機的背景圖片，算好大概內間距，用來放預覽的頁面，我這裡是給手機預覽頁面的尺寸按iphone5的尺寸來的； 一個手機頁面在這裡預覽，要通過<iframe>標籤，左邊選擇不同的select選項，通過監

js+html+css實現本地聊天室

歡迎訪問我的個人部落格：http://mrzyf.club. 程式碼完成效果： 話不多說，直接上程式碼—— css程式碼： <style type="text/css">          &nb

wpf中使用cefsharp加載本地html網頁並實現cs和js的交互,並且cefsharp支持any cpu

[] html ssi using pro itl depend req execute 廢話少說,直接上代碼: 第一步: 第二步: 第三步: 第四步: App.xaml.cs對應的代碼: using CefSharp; using CefSharp.Wp