python网页优化_python大佬养成计划----JavaScript对html的优化

切换图片

当我们浏览网页时，时常出现图片轮播场景。实现用鼠标点击‘下一页’时，更换图片的功能。

#当前目录下建立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;

}

}

onblur="checkUser()">

onblur="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