切換圖片

當我們瀏覽網頁時，時常出現圖片輪播場景。實現用鼠標點擊‘下一頁’時，更換圖片的功能。

#當前目錄下建立img目錄，存放圖片，圖片命名格式'img1.jpg'

圖片切換

#snow_maps{

width: 600px;

height: 500px;

margin: 0 auto;

text-align: center;

}

var i = 0;

function change_map() {

i+=1;

document.getElementById('show_map').src = 'img/img'+i+'.jpg'

if (i === 6) {

i = 1

}

}

輪播圖片

實現方式：內部引用

自動實現圖片切換，無需點擊

輪播圖片

#sowing_map{

width: 590px;

height:500px;

margin: 0 auto;

text-align: center;

}

window.onload = function () {

setInterval('change_map()',1000)

};

var i = 1;

function change_map() {

// 2. 當點擊下一頁時， i+1, 這個時候， 圖片變成img2;

i += 1;

// 3. 修改img標簽里面的src屬性內容;

document.getElementById('img').src = 'img/img' + i + '.jpg';

// 4. 如果圖片輪播結束， 從頭開始輪播；

if (i === 6){

i = 0;

}

}

這里是動態變化的，大家可以自己試。

實現方式：外部引用

網頁定時彈出廣告圖片，自動消失

//JS文件

window.onload = function () {

// 每隔1s自動執行某一個函數

setInterval('changeImg()', 1000);

//每隔1s執行顯示廣告的函數;

// 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。

//(http://www.w3school.com.cn/jsref/met_win_setinterval.asp)

// 在js的函數里面。 變量名沒有var時， 是一個全局變量;

adtime = setInterval('showAd()', 1000);

};

var i = 1;

function changeImg() {

i += 1;

document.getElementById('img').src = 'img/img' + i + '.jpg';

if (i === 6) {

i = 0;

}

}

// 編寫顯示隱藏圖片的函數

function showAd() {

// 獲取到廣告圖片對應的標簽對象

var adEle = document.getElementById('ad_img');

//修改廣告圖片元素里面的style屬性里面的display

adEle.style.display = 'block';

// 清除顯示圖片的定時操作；

clearInterval(adtime);

// 設置隱藏廣告圖片的定時任務；

hiddentime = setInterval('hiddenAd()', 1000);

}

function hiddenAd() {

// 獲取到廣告圖片對應的標簽對象

var adEle = document.getElementById('ad_img');

//修改廣告圖片元素里面的style屬性里面的display

adEle.style.display = 'none';

//清除隱藏圖片的定時任務;

clearInterval(hiddentime);

}

//css文件

#sowing_map{

width: 590px;

height:500px;

margin: 0 auto;

text-align: center;

}

#ad{

width: 1190px;

height: 80px;

margin: 0 auto;

text-align: center;

}

#主程序

Title

這里也是動態變化的，廣告圖片在輪播里只會出現一次

優化用戶注冊頁面

用戶注冊

#login {

width: 362px;

height: 362px;

border: 1px solid #f10180;

margin: 0 auto;

text-align: center;

margin-top: 100px;

background: snow;

}

#login_top {

width: 100%;

height: 50px;

/*border: 1px solid black;*/

}

#login_font {

color: #f10180;

}

#login-body{

margin: 0 auto;

text-align: center;

}

用戶注冊

用戶名
密????碼

用戶注冊條件的判斷

當我們注冊用戶時，需要對用戶名和密碼進行判斷，是否合法。

注冊判別

function showUserTip() {

document.getElementById('userTip').innerHTML = '用戶名不能為空';

}

function showPwdTip() {

document.getElementById('pwdTip').innerHTML = '密碼必須大于6位';

}

function checkUser() {

//1. 離焦時判斷用戶名是否為空?

var name = document.getElementById('user').value;

// 2. 如果為空， 右邊來一個紅色的提示;

// 3. 如果不為空， 則取消所有提示;

if (name === ''){

document.getElementById('userTip').innerHTML = '用戶名不能為空'

return false;

}else{

document.getElementById('userTip').innerHTML = ' ok ';

return true;

}

}

function checkPwd() {

var pwd = document.getElementById('pwd').value;

if (pwd.length<6){

document.getElementById('pwdTip').innerHTML = '密碼不能少于6位';

return false;

} else {

document.getElementById('pwdTip').innerHTML = ' ok ';

return true;

}

}

οnblur="checkUser()">

οnblur="checkPwd()">

表格全選和全不選

便于操作方便，在表格中，勾選所有或取消勾選項具有使用價值。

表格全選

function checkAll() {

var check= document.getElementById('checkAll');

alert(check.checked);

if (check.checked){

var checkOnes = document.getElementsByName('checkOne');

// 依次遍歷所有的單選框， 設置狀態為選中;li = [1,2,3,4]

for(var i =0; i

// li[0] li[1] li[2] li[3]

checkOnes[i].checked = true;

}

} else {

//- 如果狀態為未選中， 則設置所有的單選框為未選中狀態;

var checkOnes = document.getElementsByName('checkOne');

// 依次遍歷所有的單選框， 設置狀態為選中;li = [1,2,3,4]

for (var i = 0; i < checkOnes.length; i++) {

checkOnes[i].checked = false;

}

}

}

編號姓名性別年齡

	1	1	1	1
	2	1	2	2
	3	3	3	1
	4	4	1	4
	5	5	1	5

總結

以上是生活随笔為你收集整理的python网页优化_python大佬养成计划----JavaScript对html的优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。