2. 程式人生 > >javaEE (五）javaweb_jQuery (1) jQ重寫廣告彈出

javaEE (五）javaweb_jQuery (1) jQ重寫廣告彈出

阿新 • • 發佈：2018-12-22

Date：2018/11/18

重寫廣告彈出
原始碼：

1、書寫定時廣告圖片的定時操作  time = setInterval("showAd()",3000);  
2、書寫顯示廣告的函式  function showAd()
3、獲取廣告圖片，並顯示   $("#img2").show(4000);   
4、清除顯示圖片的定時操作 clearInterval(time);
5、設定隱藏圖片的定時操作  setInterval("hiddenAd()",3000);   
6、書寫隱藏廣告的函式  function hiddenAd()
7、清除隱藏圖片的定時操作 clearInterval(time);

注：clearInterval
 
(time);是為了讓圖片只彈出一次，清除定時操作，



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首頁</title>
		<style>
			#father{
				border: 0px solid red;
				width: 1300px;
				height: 2170px;
				margin: auto;
			}
			/*#logo{
				border: 0px solid black;
				width: 1300px;
				height: 50px;
			}*/
 

			.top{
				border: 0px solid blue;
				width: 431px;
				height: 50px;
				float: left;
			}
			#top{
				padding-top: 12px;
				height: 38px;
			}
			#menu{
				border: 0px solid red;
				width: 1300px;
				height: 50px;
				background-color: black;
				margin-bottom: 10px;
			}
			ul li{
				display: inline;
 

				color: white;
			}
			#clear{
				clear: both;
			}
			
			#product{
				border: 0px solid red;
				width: 1300px;
				height: 558px;
			}
			#product_top{
				border: 0px solid blue;
				width: 100%;
				height: 45px;
				padding-top: 8px;
			}
			#product_bottom{
				border: 0px solid green;
				width: 100%;
				height: 500px;
			}
			#product_bottom_left{
				border: 0px solid red;
				width: 200px;
				height: 500px;
				float: left;
			}
			#product_bottom_right{
				border: 0px solid blue;
				width: 1094px;
				height: 500px;
				float: left;
			}
			#big{
				border: 0px solid red;
				width: 544px;
				height: 248px;
				float: left;
			}
			.small{
				border: 0px solid blue;
				width: 180px;
				height: 248px;
				float: left;
				/*讓裡面的內容居中*/
				text-align: center;
			}
			
			#bottom{
				text-align: center;
			}
			
			a{
				text-decoration: none;
			}
		</style>
		
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				time = setInterval("showAd()",3000);  
			});
			
			function showAd(){
				$("#img2").(4000);
				clearInterval(time);
				time = setInterval("hiddenAd()",1000);
			}
			
			function hiddenAd(){
				$("#img2").hide(4000);  //4秒
			    clearInterval(time);
			}
			
		
			
			
			
		</script>
		
	</head>
	<body onload="init()">
		<div id="father">
			<!--定時彈出廣告圖片位置-->
			<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>
			
			<!--1.logo部分-->
			<div id="logo">
				<div class="top">
					<img src="../img/logo2.png" height="46px"/>
				</div>
				<div class="top">
					<img src="../img/header.png" height="46px" />
				</div>
				<div class="top" id="top">
					<a href="#">登入</a>
					<a href="#">註冊</a>
					<a href="#">購物車</a>
				</div>
			</div>
			<div id="clear">
				
			</div>
			<!--2.導航欄部分-->
			<div id="menu">
				<ul>
					<a href="#"><li style="font-size: 20px;">首頁</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>手機數碼</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>家用電器</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>鞋靴箱包</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>孕嬰保健</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>奢侈品</li></a>
				</ul>
			</div>
			<!--3.輪播圖部分-->
			<div id="">
				<img src="../img/1.jpg" width="100%" id="img1"/>
			</div>
			<!--4.最新商品-->
			<div id="product">
				<div id="product_top">
					&nbsp;&nbsp;&nbsp;
					<span style="font-size: 25px;padding-top: 8px;">最新商品</span>&nbsp;&nbsp;&nbsp;
					<img src="../img/title2.jpg" />
				</div>
				<div id="product_bottom">
					<div id="product_bottom_left">
						<img src="../img/big01.jpg" width="100%" height="100%"/>
					</div>
					<div id="product_bottom_right">
						<div id="big">
							<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
					</div>
				</div>
			</div>
			<!--5.廣告圖片-->
			<div id="">
				<img src="../img/ad.jpg" width="100%"  />
			</div>
			<!--6.熱門商品-->
			<div id="product">
				<div id="product_top">
					&nbsp;&nbsp;&nbsp;
					<span style="font-size: 25px;padding-top: 8px;">熱門商品</span>&nbsp;&nbsp;&nbsp;
					<img src="../img/title2.jpg" />
				</div>
				<div id="product_bottom">
					<div id="product_bottom_left">
						<img src="../img/big01.jpg" width="100%" height="100%"/>
					</div>
					<div id="product_bottom_right">
						<div id="big">
							<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">電燉鍋</p></a>
							<p style="color: red;">¥399</p>
						</div>
					</div>
				</div>
			</div>
			<!--7.廣告圖片-->
			<div id="">
				<img src="../img/footer.jpg" width="100%"/>
			</div>
			<!--8.友情連結和版權資訊-->
			<div id="bottom">
				<a href="#">關於我們</a>
				<a href="#">聯絡我們</a>
				<a href="#">招賢納士</a>
				<a href="#">法律宣告</a>
				<a href="#">友情連結</a>
				<a href="#">支付方式</a>
				<a href="#">配送方式</a>
				<a href="#">服務宣告<

相關推薦

javaEE (五）javaweb_jQuery (1) jQ重寫廣告彈出

Date：2018/11/18 重寫廣告彈出 原始碼： 1、書寫定時廣告圖片的定時操作 time = setInterval("showAd()",3000); 2、書寫顯示廣告的函式 function showAd() 3、獲取廣告圖片，並顯示 $

javaEE (五）javaweb_jQuery (3) jQ層級選擇器

Date ： 2018/11/18 層級選擇器，無圖，結衣鎮樓： 原始碼： <!-- 1、body div body元素的所有下級，兒子、孫子、重孫子。。。 2、body > div body元素所有的兒子 3、#two+div t

javaEE (五）javaweb_jQuery (2) toggle切換顯示/隱藏狀態

Date：2018/11/18 用toggle，點選一下可以顯示或者隱藏圖片，回顧style和script的一些屬性用法 效果圖： 原始碼： 1、style裡面：margin: auto;text-align: center; 2、是click不是onclic

javaEE (三）javaweb_JavaScript (2)輪播圖片+彈出廣告

Day：2018/11/13 在網頁上輪圖片和彈出廣告： 原始碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例

javaEE (三）javaweb_JavaScript (1)表單校驗

Date：2018/11/13 1：表單校驗 效果圖：在表單中輸入的資訊不符合時候，會彈窗警告。 原始碼： <!-- 1：將事件函式嵌入到相應的標籤中(如監測提交的onsubmit = “return function()") --> <!-

web前端【第十五篇】popup簡單使用（彈出頁面）

model 循環 sci return submit mutable 數據 src close 一、首先說一下自執行函數 1. 立即執行函數是什麽？也就是匿名函數 立即執行函數就是 聲明一個匿名函數 馬上調用這個匿名函數 2、popup的舉例 點擊，彈出一個新的窗口

javascript學習筆記-jquery學習廣告彈出功能

javascript學習筆記-jquer項目功能:頁面加載完成後開始彈出廣告<!DOCTYPE html><html><head><meta charset="UTF-8"><title>首頁彈出廣告</title>&

劍指offer學習筆記（Python）--棧的壓入、彈出序列

題目描述 輸入兩個整數序列，第一個序列表示棧的壓入順序，請判斷第二個序列是否為該棧的彈出順序。假設壓入棧的所有數字均不相等。例如序列1,2,3,4,5是某棧的壓入順序，序列4，5,3,2,1是該壓棧序列對應的一個彈出序列，但4,3,5,1,2就不可能是該壓棧序列的彈出序列。（注意：這兩個序列

劍指offer——（19）棧的壓入、彈出序列

public class Solution { int top; int[] A; // 陣列棧 public boolean IsPopOrder(int[] pushA, int[] popA) { if(pushA.length==1&

JQ處理刪除彈出模態框

  在實際開發中，經常要求對於載入的表格資料進行刪除，點選刪除的時候彈出模態框。再到模態框上點確定刪除。實現這一套邏輯很多中方法，我經常用的一種： 第一，頁面的資料表格是動態載入的 $("#table_result_per").append( "<tr>

iOS攔截webView的Alert與Confirm並讓地址不顯示，iOS隱藏(或重寫)webView彈出提示的title,http:xxx.xx

實現JS與OC 的互相呼叫，可參考這篇文章 OC與JS互調獲取系統圖片 這裡就不講呼叫的原來了，直接上解決webView中出現的提示title有地址的問題 1.首先新建擴充套件類繼承 JavaScr

Ionic3學習筆記（九）關於 Android 端軟鍵盤彈出後介面被壓縮的問題

本文為原創文章，轉載請標明出處 今天做了一個如下圖所示的頁面。 iOS 端毫無 bug，Android 端卻出現了問題。當軟鍵盤彈出後，Android 端的 tabs 移到了軟鍵盤的上面，再仔細一看，整個介面都被壓扁了，輸入框也不知道去哪兒了。 於是去

Python學習筆記（四十五）網絡編程（1）TCP編程

包含 ipv sina spa 包括 現在 com 訪問 等等 摘抄：https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001432004374523e49

spring boot 1.5.4 集成devTools（五）

springboot springboot1.5.4 springboot整合jsp springboot之web開發 springboot熱部署devtools 上一篇：spring boot 1.5.4 整合JSP（四）1.1 Spring Boot集成devToolssprin

kubernetes 1.8 高可用安裝（五）

k8s 1.8 calico 網絡5安裝網絡組件calico安裝前需要確認kubelet配置是否已經增加--network-plugin=cni如果沒有配置就加到kubelet配置文件裏Environment="KUBELET_NETWORK_ARGS=--network-plugin=cni --cni-

K8S 1.9.0二進制包部署（五）

alt ces map ima config -c tex sta ffffff 6、dashboard v1.8.0在kubernetes目錄下有src的壓縮包，解壓後在cluster/addons/dashboard 下有5個文件dashboard-controller

類與接口（五）java多態、方法重寫、隱藏

增加 object 方法簽名 進行 tcl 覆蓋 get 註意 表現 一、Java多態性 面向對象的三大特性：封裝、繼承、多態。 多態的類型，分為以下兩種： 編譯時多態： 指的是 方法重載。編譯時多態是在編譯時確定調用處選擇那個重載方法，所以也叫 靜態多態，算不上真正的多

Spring Boot教程（三十五）使用MongoDB數據庫（1）

frame 既然 artifact html ace 數據庫 支持 高度 官網 MongoDB簡介 MongoDB是一個基於分布式文件存儲的數據庫，它是一個介於關系數據庫和非關系數據庫之間的產品，其主要目標是在鍵/值存儲方式（提供了高性能和高度伸縮性）和傳統的RDBMS系統

DevExpress v18.1新版亮點——WinForms篇（五）

http 時間 分享 編輯器 doc nag 分享圖片 標題 light 用戶界面套包DevExpress v18.1日前終於正式發布，本站將以連載的形式為大家介紹各版本新增內容。本文將介紹了DevExpress WinForms v18.1 的新功能，快來下載試用新版本！

【JAVA秒會技術之秒殺面試官】JavaEE常見面試題（五）

內存溢出 不可重復讀 cad struts2的 pro 單線程 映射 指定 log 51.事務的特性？ 答：①原子性(Atomicity) 指事務是一個不可分割的工作單位，事務中的操作要麽全都發生，要麽全不發生； ②一致性(Consistency) 事務前後數據的完成性必須