您的位置：首页 > 编程语言 > Java开发

Java Script/Html 多种高级页面属性

2016-10-11 20:45 441 查看
完成效果：利用java script完成多种高级页面动画。

1.图片轮播和点击换图。

代码：



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播（JSP）</title>
</head>
<script>
function t1() {
var img=document.getElementById("img");
img.src="../image/1.jpg";
}
function t2() {
var img=document.getElementById("img");
img.src="../image/2.jpg";
}
function t3() {
var img=document.getElementById("img");
img.src="../image/3.jpg";
}

var s = ['../image/1.jpg'
,'../image/2.jpg'
,'../image/3.jpg']

var index = 0;
function imgGo() {
setInterval(function () {
var img =document.getElementById("img");
img.src = s[index];
index++;
if(index>2){
index==0;
}
show(index);
},2000)
}
</script>
<body onload="imgGo()">
<div>
<img id="img" src="../image/1.jpg" height="200" width="200" />
</div>

<div id="tab1" onclick="t1()">
<table style="border:1px solid red;background-color:
orange;height: 20px;width: 10px;float: left;position: relative;left: 80px;top: -25px">
</table>
</div>

<div id="tab2" onclick="t2()">
<table style="border:1px solid red;background-color:
orange;height: 20px;width: 10px;float: left;position: relative;left: 90px;top: -25px">
</table>
</div>

<div id="tab3" onclick="t3()">
<table style="border:1px solid red;background-color:
orange;height: 20px;width: 10px;position: relative;left: 100px;top: -25px">
</table>
</div>
</body>
</html>
效果：




2.点击一条信息下面出来多条信息。

代码：



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function ol1() {
var obj1=document.getElementById("ol1");
if(obj1.style.display=="none"){
obj1.style.display="block";
}else if(obj1.style.display=="block"){
obj1.style.display="none"
}
}
function show(d2,d3,d4) {
if(document.getElementById(d2).style.display=='none'){
document.getElementById(d2).style.display='block'
}else {
document.getElementById(d2).style.display='none'
}
}
</script>
</head>
<body>
<ul>
<li  onclick="ol1()">注册 & 认证
<ol  id="ol1" style="display: none">
<li>注册激活</li>
<li>安全登录</li>
<li>支付宝认证</li>
</ol>
</li>
<li onclick="show('2','3','4')">买家帮助
<ol id="2" style="display: none">
<li>宝贝搜索、浏览</li>
<li>了解卖家</li>
<li>出价及付款</li>
</ol>

</li>
<li onclick="show('2','3','4')">卖家帮助
<ol id="3" style="display: none">
<li>店铺设置管理</li>
<li>商品发布出售＆推荐</li>
<li>成交后发货＆评价 </li>
<li>优惠券和红包 </li>
</ol>
</li>
<li onclick="ol4()">个人资料修改
<ol id="ol4" style="display: none">
<li>我的淘宝功能介绍</li>
<li>修改个人信息</li>
<li>淘宝/支付宝帐户绑定</li>
</ol>
</li>
</ul>
</body>
</html>
效果：






3.鼠标移动时，右下角有一个div跟着移动，并显示当前位置（类似于QQ截图）

代码：



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function getXY() {
var move=document.getElementById("box");
move.innerHTML=event.clientX+":"+event.clientY;
move.style.left=event.clientX+5+"px";
move.style.top=event.clientY+5+"px";
}
</script>
</head>
<body onmousemove="getXY()">
<div id="box" style="border: 1px solid red ;width: 80px;height: 80px;position: absolute;left:5px;top:5px">
</div>
</body>
</html>


效果：






4.表单的动态增加行、删除所选中行、批量修改所选中行。并且选中第一个单选框会全选。

代码：



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<script>
function $(name) {
return document.getElementById(name);
}
function addRow() {
var add=$("table");
var name=$("name");
var age=$("age");
var address=$("address");

var row=add.insertRow(2);
var idx=add.rows.length-2;

var c1=row.insertCell(0);
var c2=row.insertCell(1);
var c3=row.insertCell(2);
var c4=row.insertCell(3);
c1.innerHTML="<input type='checkbox' value='"+idx+" 'id='ch"+idx+"'>";
c2.innerText=name.value;
c3.innerText=age.value;
c4.innerText=address.value;
}

function del() {
var tab=$("table");
for (var i= tab.rows.length - 1; i>0;i--) {
if(tab.rows[i].cells[0].getElementsByTagName("input")[0].checked){
tab.deleteRow(i);
}
}
}

function change() {
var tab=$("table");
var name=$("name");
var age=$("age");
var address=$("address");
for (var i= tab.rows.length - 1; i>0;i--) {
if(tab.rows[i].cells[0].getElementsByTagName("input")[0].checked){
var c2 = tab.rows[i].cells[1];
var c3 = tab.rows[i].cells[2];
var c4 = tab.rows[i].cells[3];
c2.value="";
c3.value="";
c4.value="";
c2.innerHTML = name.value;
c3.innerHTML = age.value;
c4.innerHTML = address.options[address.selectedIndex].text;
}
}
}

function chAll() {
var ch=$("checkAll");
var tab=$("table");
for(var i=1;i<=tab.rows.length-2;i++){
var chw=$("ch"+i);
if(ch.checked==true){
chw.checked=true;
}else {
chw.checked=false;
}
}
}
</script>
</head>
<body>
<form>
<div style="padding-left: 130px">
<input type="button" value="新增" onclick="addRow()">
<input type="button" value="删除" onclick="del()">
<input type="button" value="修改" onclick="change()">
</div>
<table border="1" id="table">
<tr>
<td align="center"><input type="checkbox" id="checkAll" onclick="chAll()"></td>
<td align="center">姓名</td>
<td align="center">年龄</td>
<td align="center">住址</td>
</tr>
<tr>
<td></td>
<td ><input type="text" width="100px" id="name" align="center" width="100px"></td>
<td ><input type="text" width="100px" id="age" align="center" width="100px"></td>
<td >
<select style="width: 100px;"id="address" align="center" width="100px">
<option>--请选择--</option>
<option>青岛</option>
<option>济南</option>
<opt
b86d
ion>烟台</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
效果：

[b]原本表单样式：
[/b]





增删改后样式：






5.表单各种样式验证。

代码：



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script>
function check() {
var name=document.getElementById("name");
var pwd=document.getElementById("pwd");
var pwd1=document.getElementById("pwd1");
var body=document.getElementById("body");
var phone=document.getElementById("phone");
var mobile=document.getElementById("mobile");
var mail=document.getElementById("mail");
if((name.value).length<8){
alert("用户名长度必须大于8位");
name.value="";
name.focus();
return;
}
if(pwd.value.toLocaleString()==pwd.value.toUpperCase()&&pwd.value.length<6){
alert("密码长度必须大于6位，密码中必须包含字母和数字");
pwd.value="";
pwd.focus();
return;
}
if(pwd.value!=pwd1.value){
alert("输入密码不同");
pwd1.value="";
pwd1.focus();
return;
}
if((body.value.length!=18&&body.value.lastIndexOf("X"))&&body.value.length!=15){
alert("输入身份证错误");
body.value="";
body.focus();
return;
}
if(phone.value.length!=13&&phone.value.indexOf("-")!=4){
alert("输入固定电话错误");
phone.value="";
phone.focus();
return;
}
if(mobile.value.length!=11){
alert("输入手机号码错误");
mobile.value="";
mobile.focus();
return;
}
}
</script>
</head>
<body>
<form>
<table border="1">
<tr>
<td align="center" width="100px">登录名:</td>
<td width="100px"><input type="text" id="name"></td>
<td width="400px">长度必须大于8位</td>
</tr>
<tr>
<td align="center">登录密码：</td>
<td width="100px"><input type="text" id="pwd"></td>
<td width="400px">长度必须大于6位,必须包含数字和字母</td>
</tr>
<tr>
<td align="center">确认密码：</td>
<td width="100px"><input type="text" id="pwd1"></td>
<td width="400px">必须与第一次所输入的密码相同</td>
</tr>
<tr>
<td align="center">身份证号码：</td>
<td width="100px"><input type="text" id="body"></td>
<td width="400px">必须是15位或者18位最后一个为X</td>
</tr>
<tr>
<td align="center">固定电话：</td>
<td width="100px"><input type="text" id="phone"></td>
<td width="400px">格式（xxxx-xxxxxxxx）</td>
</tr>
<tr>
<td align="center">手机号码：</td>
<td width="100px"><input type="text" id="mobile"></td>
<td width="400px">长度必须等于11位</td>
</tr>
<tr>
<td align="center">电子邮件：</td>
<td width="100px"><input type="text" id="mail"></td>
<td width="400px">xxxxxxxxx@xx.xxx(QQ邮箱样式)</td>
</tr>
<tr>
<td align="center" colspan="3">
<input type="button" value="提交" onclick="check()">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>


效果：

原先表单及要求：




输入后效果：














内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JavaScript
相关文章推荐
新的分享
章节导航