Using JavaScript to do a simple page Jump

01? 2022-02-13 07:34:45 阅读数:159

using javascript simple page jump

  Take advantage of html and javascript technology , Made a simple interface

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../img/1.jpg" height="220" width="1250">
<table>
<tr>
<td> <iframe src="picture1.html" height="300" width="410" name="a"></iframe></td>
<td><iframe src="piture2.html" height="300" width="410" name="b"></iframe> </td>
<td><iframe src="piture3.html" height="300" width="410" name="c"></iframe> </td><br/>
</tr>
<tr>
<td><a href="page1.html" target="a" > register </a> </td>
<td><a href="page3.html" target="b"> land </a> </td>
<td><a href="page4.html" target="c"> user </a> </td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var select=document.getElementsByTagName("input");
function onclick1(){
for (var i = 0; i < select.length; i++) {
select[i].checked=true;
}
}
function onclick2(){
for (var i = 0; i < select.length; i++) {
select[i].checked=false;
}
}
function onlick3(){
for (var i = 0; i < select.length; i++) {
if(select[i].checked==true){
select[i].checked=false;
}else{
select[i].checked=true;
}
}
}
var inputtext=document.getElementsByTagName("input")
function onclick4(){
for (var i = 0; i < inputtext.length; i++) {
inputtext[i].value=""
}
}
</script>
</head>
<body>
<h1 align="center" style="color: aqua"> User registration </h1>
<table align="center">
<tr>
<td> User name :</td>
<td><input type="text"></td>
</tr>
<tr>
<td> User password :</td>
<td><input type="password"></td>
</tr>
<tr>
<td> Date of birth </td>
<td><input type="text"></td>
</tr>
<tr>
<td> Hobby :</td>
<td><input type="checkbox" name="hobby"> See a movie
<input type="checkbox" name="hobby"> Play a game
<input type="checkbox" name="hobby"> shopping </td>
</tr>
<tr>
<td><button onclick="onclick1()"> Future generations </button>
<<button onclick="onclick2()"> Totally unselected </button>
<button onclick="onlick3()"> Reverse election </button></td>
</tr>
<tr>
<td> Native place :</td>
<td>
<select>
<option>--- Please select your native place ---</option>
<option> Jieyang, Guangdong </option>
<option> Guangdong guangzhou </option>
<option> Guangdong shenzhen </option>
<option> Shantou, Guangdong </option>
</select>
</td>
</tr>
<tr>
<td><button> register </button></td>
<td><button onclick="onclick4()"> Empty </button></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var inputtext=document.getElementsByTagName("input")
function onclick1(){
for (var i = 0; i < inputtext.length; i++) {
inputtext[i].value=""
}
}
</script>
</head>
<body>
<h1 align="center" style="color: blue"> The user login </h1>
<table align="center">
<tr>
<td> User name :</td>
<td><input type="text" ></td>
</tr>
<tr>
<td> User password :</td>
<td><input type="password"></td>
</tr>
<tr>
<td> Confirm the password :</td>
<td><input type="password"></td>
</tr>
<tr>
<td><button> land </button></td>
<td><button onclick="onclick1()"> eliminate </button></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 align="center" style="color: aquamarine"> The user interface </h1>
<table align="center">
<tr><td> full name : Xiao Ming </td></tr>
<tr><td> Native place : Guangdong guangzhou </td></tr>
<tr><td> achievement :</td></tr>
<tr>
<td>
<table border="1" cellspacing="0">
<tr>
<td> subject </td>
<td> English </td>
<td> Chinese language and literature </td>
<td> mathematics </td>
</tr>
<tr>
<td> achievement </td>
<td>90</td>
<td>88</td>
<td>100</td>
</tr>
<tr>
<td> score </td>
<td> optimal </td>
<td> good </td>
<td> optimal </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../img/2.png" width="400" height="300">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../img/3.jpg" width="400" height="300">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../img/4.jpg" width="400" height="300">
</body>
</html>

 

 

 

 

copyright:author[01?],Please bring the original link to reprint, thank you. https://en.javamana.com/2022/02/202202130734433358.html