JavaScript实例练习
程序员文章站
2022-06-11 22:24:12
...
目录
1. 搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function Focus() {
var ele=document.getElementById("ID1");
if (ele.value=="请输入用户名"){
ele.value="";
}
}
function Blur() {
var ele=document.getElementById("ID1");
if (!ele.value.trim()){
ele.value="请输入用户名";
}
}
</script>
</head>
<body>
姓名<input id="ID1" type="text" value="请输入用户名" onfocus="Focus()"
onblur="Blur()">
<!--注意方法名的命名 不能使用focus() 和blur()
focus() 方法用于从下拉列表中移开焦点。
blur() 方法用于从下拉列表中获得焦点。
-->
</body>
</html>2. 模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
margin: 0;
}
#div1{
height: 20px;
background-color: gray;
position: fixed;
top: 0;
left: 0;
width: 100%; //脱离文档流 必须加width 才能显示出元素
z-index: 1000; //z-index 代表显示的优先级
}
#div2{
position: fixed;
width: 100%;
z-index: 1001;
top:0;
left:0;
right: 0;
bottom: 0;
background-color: red;
opacity: 0.5;
}
#div3{
height: 250px;
width: 250px;
position: absolute;
background-color: yellow;
top:50%;
left: 50%;
margin-left: -125px;
margin-top: -125px;
z-index: 1002;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id="div1">
<input type="button" value="click" onclick="show()">
</div>
<div id="div2" class="div hide"></div>
<div id="div3" class="div hide">
姓名<input type="text" name="username" ><br/>
密码<input type="password" name="password"><br/>
<input type="button" value="点我" onclick="cancel()">
</div>
<script>
function show() {
var ele=document.getElementsByClassName("div");
for (var i=0;i<ele.length;i++){
ele[i].classList.remove("hide")
}
}
function cancel() {
var ele=document.getElementsByClassName("div");
for (var i=0;i<ele.length;i++){
ele[i].classList.add("hide")
}
}
</script>
</body>
</html>3. 全选反选取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
function select(choice) {
var inputs=document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
var ele2=inputs[i];
if(choice=='all'){
ele2.checked=true;
}else if(choice=='cancel'){
ele2.checked=false;
}else {
if(ele2.checked){
ele2.checked=false;
}else {
ele2.checked=true;
}
}
}
}
</script>
</head>
<body>
<button onclick="select('all')">全选</button>
<button onclick="select('cancel')">取消</button>
<button onclick="select('reverse')">反选</button>
<table border="1" id="Table">
<tr>
<td><input type="checkbox" ></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
</body>
</html>
4. 两级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="province" >
<option>请选择省</option>
</select>
<select id="city">
<option>请选择市</option>
</select>
<script>
data={"河北省":["廊坊","邯郸"],"北京":["朝阳区","海淀区"]};
var p=document.getElementById("province");
var c=document.getElementById("city");
for (var i in data){
var option_pro=document.createElement("option");
option_pro.innerHTML=i;
p.appendChild(option_pro)
}
p.onchange=function () {
pro=(this.options[this.selectedIndex]).innerHTML;
// function func1(self) { //函数里面加一个参数 this(实参) 当前标签的触发对象 self表示形参
// self.options[self.selectedIndex].innerHTML
// }
citys=data[pro];
c.options.length=0; //c.options是一个select下的数组
//var option=c.children; //返回所有的父标签的所有子元素
// for(var k=0;k<option.length;k++ ){
// c.removeChild(option[k]);
// k--; //每次删第一个,0
// }
//for i in 数组 i是下标
//for i in 字典 i是键
for(var i in citys){
var option_city=document.createElement("option");
option_city.innerHTML=citys[i];
c.appendChild(option_city)
}
}
</script>
</body>
</html>5. select左右移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
float: left;
width: 20%;
position: relative;
}
#box2{
top: 0;
width: 60%;
clear: right;
margin-left: 500px;
position: absolute;
}
#choice{
float: left;
width: 20%;
height: 50%;
}
</style>
<script>
function add() {
var right=document.getElementById('right');
var options=document.getElementById("left").getElementsByTagName("option");
for (var i=0;i<options.length;i++){
var option=options[i];
if(option.selected==true){
right.appendChild(option);
i--;
}
}
}
function addAll() {
var right=document.getElementById("right");
var options=document.getElementById("left").getElementsByTagName("option");
for (var i=0;i<options.length;i++){
var option=options[i];
right.appendChild(option);
i--;
}
}
function remove() {
var left=document.getElementById("left");
var options=document.getElementById("right").getElementsByTagName("option");
for(var i =0;i<options.length;i++){
var option=options[i];
if(option.selected){
left.appendChild(option);
}
}
}
function reAll() {
var left=document.getElementById("left");
var options=document.getElementById("right").getElementsByTagName("option");
for(var i =0;i<options.length;i++){
var option=options[i];
left.appendChild(option);
}
}
</script>
</head>
<body>
<div id="box1">
<select multiple="multiple" size="10" id="left">
<option>book</option>
<option>book2</option>
<option>book3</option>
<option>book4</option>
<option>book5</option>
<option>book6</option>
</select>
</div>
<div id="choice">
<input class="add" type="button" value="--->" onclick="add()"><br>
<input class="remove" type="button" value="<---" onclick="remove()"><br>
<input class="add-all" type="button" value="===>" onclick="addAll()"><br>
<input class="remove-all" type="button" value="<===" onclick="reAll()"><br>
<div id="box2">
<select multiple size="10" id="right">
<option>book9</option>
</select>
</div>
</div>
</body>
</html>
上一篇： ajax实现区域-街道多级联动
下一篇： asp.net六大对象