22、继续javascript,左边选中的跳到右边
1、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
<tr>
<td><select name="select1" multiple="multiple" id="first"
size="10">
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
<option>选项六</option>
</select></td>
<td><input type="button" value="=>" id="moveRS"> <input
type="button" value="==>" id="moveRA"> <input type="button"
value="<=" id="moveLS"> <input type="button" value="<=="
id="moveLA"></td>
<td><select name="select2" multiple="multiple" id="second"
size="10"> </select></td>
</tr>
</table>
</body>
<script type="text/javascript">
document.getElementById("moveRS").onclick = function() {
var select1 = document.getElementById("first");
var select2 = document.getElementById("second");
var options = select1.options;
for (var i = 0; i < options.length; i++) {
if (options[i].selected) {
select2.appendChild(options[i]);
i--;
}
}
}
document.getElementById("moveRA").onclick = function() {
var select1 = document.getElementById("first");
var select2 = document.getElementById("second");
var options = select1.options;
for (var i = 0; i < options.length; i++) { select2.appendChild(options[i]);
i--; }
}
document.getElementById("moveLS").onclick = function() {
var select1 = document.getElementById("second");
var select2 = document.getElementById("first");
var options = select1.options;
for (var i = 0; i < options.length; i++) {
if (options[i].selected) {
select2.appendChild(options[i]);
i--;
}
}
}
document.getElementById("moveLA").onclick = function() {
var select1 = document.getElementById("second");
var select2 = document.getElementById("first");
var options = select1.options;
for (var i = 0; i < options.length; i++) { select2.appendChild(options[i]);
i--; }
}
</script>
</html>
2、计时器，开始和结束
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
input {
width: 400px;
}
</style>
</head>
<body>
<input type="text" id="two">
<br />
<input type="button" value="开始" onclick="setTime()">
<input type="button" value="结束" onclick="endTime()">
<script type="text/javascript">
var id;
function setTime() {
if (!id)
getTime();
}
function getTime() {
//获得input输入框
var two = document.getElementById("two");
//创建出当前时间的Date对象
var date = new Date();
//将时间添加到input中
two.value = date.toLocaleString();
//ID=调用自己的setTimeout(getTime,1000)
id=setTimeout(getTime, 1000);
}
function endTime() {
clearTimeout(id);
id = undefined;
}
</script>
</body>
</html>
3、使用xml对dom对象进行操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#one {
background-color: yellow;
width: 300px;
height: 200px;
} #two {
background-color: blue;
width: 300px;
height: 200px;
} #three {
background-color: green;
width: 300px;
height: 200px;
} #four {
background-color: purple;
width: 300px;
height: 200px;
}
</style>
<script type="text/javascript">
//创建一个节点
function createNode() {
var div_1 = document.getElementById("one");
var child = document.createElement("a");
child.setAttribute("href", "http://www.baidu.com");
child.innerHTML = "www.baidu.com";
div_1.appendChild(child);
}
//删除一个div
function deleteNode() {
var div_2 = document.getElementById("two");
var parent = div_2.parentNode;
parent.removeChild(div_2);
}
//将div替换成图片
function updateNode() {
var div_3 = document.getElementById("three");
var parent = div_3.parentNode;
var img = document.createElement("img");
img.setAttribute("src", "2.jpg");
parent.replaceChild(img, div_3);
}
//复制div,并将复制后的div添加到末尾
function copyNode() {
var div_4 = document.getElementById("four");
var cloneDiv = div_4.cloneNode(true);
//true表示如果div中又子节点，那么连子节点也一起复制
//如果是false表示只复制div不复制子节点
var parent = div_4.parentNode;
parent.appendChild(cloneDiv);
}
</script>
</head>
<body>
<div id="one">div1</div>
<br />
<div id="two">div2</div>
<br />
<div id="three">div3</div>
<br />
<div id="four">div4</div>
<br />
<hr>
<input type="button" value="增加div中的元素" onclick="createNode()">
<input type="button" value="删除div" onclick="deleteNode()">
<input type="button" value="修改div中的元素" onclick="updateNode()">
<input type="button" value="复制div" onclick="copyNode()">
</body>
</html>
4、牛逼的表达验证，为什么JS这么这么牛逼呀！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table, td {
border: 1px solid blue;
}
</style>
</head>
<body>
<form name="form1" onsubmit="return check()">
<table>
<tr>
<th colspan="2">表单提交</th> </tr>
<tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" value="1" name="sex">男 <input
type="radio" value="0" name="sex">女</td>
</tr>
<tr>
<td>爱好</td>
<td><input type="checkbox" value="吃饭" name="habit">吃饭 <input
type="checkbox" value="睡觉" name="habit">睡觉 <input
type="checkbox" value="打豆豆" name="habit">打豆豆</td>
</tr>
<tr>
<td>学历</td>
<td><select name="edu">
<option>---请选择学历----</option>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
</select></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交"></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
function check() {
var a = true;
a = (checkUserName() & checkEdu() & checkPassword() & checkAge())
return a ? true : false;
}
//验证用户名
function checkUserName() {
var username = document.form1.username.value;
var regex = /^[a-zA-Z][a-zA-Z_0-9]{2,9}$/;
if (regex.test(username)) {
removeError(document.form1.username);
return true;
} else {
addError(document.form1.username, "用户名只能以字母开头");
return false;
}
}
//验证密码
function checkPassword() {
var password = document.form1.password.value;
var regex = /^.{6,10}$/;
if (regex.test(password)) {
removeError(document.form1.password);
return true;
} else {
addError(document.form1.password, "请输入6-10位的密码")
return false;
}
}
//验证年龄
function checkAge() {
var age = document.form1.age.value;
var regex = /^\d{1,3}$/;
if (regex.test(age)) {
removeError(document.form1.age);
return true;
} else {
addError(document.form1.age, "年龄输入的不对");
return false;
}
}
//验证学历
function checkEdu() {
var edu = document.form1.edu;
if (edu.selectedIndex) {
removeError(edu);
return true;
} else {
addError(edu, "请选择学历");
return false;
}
} //添加错误提示标记
function addError(where, what) {
if (where.parentNode.getElementsByTagName("font")[0]) {
return;
}
var font = document.createElement("font");
font.setAttribute("color", "red");
font.innerHTML = what;
where.parentNode.appendChild(font);
}
//删除错误标记
function removeError(where) {
var font = where.parentNode.getElementsByTagName("font")[0];
if (font) {
font.parentNode.removeChild(font);
}
}
</script>
</html>
5、对表格中的元素进行排序
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
table,tr,td {
border: 1px solid blue;
}
</style>
<script type="text/javascript">
function dataSort() {
//1获得表格中所有的行
var table = document.getElementsByTagName("table")[0];
var rows = table.rows;
//2创建一个新的数组，将需要排序的行装入
var arr = [];
for ( var i = 1; i < rows.length; i++) {
arr[i - 1] = rows[i];
}
//3对新的数组排序
arr.sort(abc);
//4排序好的数组遍历插回表格中
for ( var i = 0; i < arr.length; i++) {
table.appendChild(arr[i]);
}
}
function abc(a, b) {
return +a.cells[1].innerHTML - b.cells[1].innerHTML;
}
</script>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td><a href="javascript:void(0)" onclick="dataSort()">年龄</a></td>
<td>电话</td>
</tr>
<tr>
<td>王金鉴</td>
<td>11</td>
<td>18341893452</td>
</tr>
<tr>
<td>冯旭</td>
<td>12</td>
<td>18341893453</td>
</tr>
<tr>
<td>李俊峰</td>
<td>15</td>
<td>18341893373</td>
</tr>
<tr>
<td>赵维真</td>
<td>22</td>
<td>18341893451</td>
</tr>
<tr>
<td>孟凯妮</td>
<td>20</td>
<td>18341893476</td>
</tr>
<tr>
<td>邓一鸣</td>
<td>19</td>
<td>18341893321</td>
</tr>
</table>
</body>
</html>
6、二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title> </head>
<body>
<select id="province">
<option>----请选择省----</option>
</select>
<select id="city">
<option>----请选择市----</option>
</select>
</body>
<script type="text/javascript">
var json = {
"辽宁省" : [ "大连市", "阜新市", "沈阳市", "盘锦市", "营口市" ],
"吉林省" : [ "长春市", "吉林市", "四平市" ]
};
//遍历josn中的所有key,把key封装到option对象当中,把option对象添加到省的select中去
//1获得省的select对象
//2遍历json中的所有key
//3key封装到option对象中
//添加
var province = document.getElementById("province");
var city = document.getElementById("city");
for ( var Key in json) {
var option = document.createElement("option");
option.innerHTML = Key;
province.appendChild(option);
}
//为province添加onchange事件
province.onchange = function() {
//每次联动的时候需要清除city select中的数据
city.options.length = 1;
//1.获得用户选择的省
var provinceKey = this.options[this.selectedIndex].innerHTML;
//2.将选择的省去json中取得对应的市数组
var cities = json[provinceKey];
//3.遍历数组中的所有市，封装到option对象中
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
//4、将option添加到city中
option.innerHTML = cities[i];
city.appendChild(option);
} }
</script>
</html>
7、隔行变色
为什么我们这么牛逼什么玩意都会做，也是日了狗了
8、跨页面通讯，为什么我们这么牛逼，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset rows="30%,70%">
<frame src="top.html" />
<frameset cols="30%,*">
<frame src="left.html"/>
<frame src="main.html"/>
</frameset>
</frameset>
</html> 下边是top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>标签页</h1>
</body>
</html> 下边是left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function check() {
var tr = document.createElement("tr");
var name = document.form1.name.value;
var age = document.form1.age.value;
var sex = document.form1.sex.value;
tr.innerHTML = "<td>" + name + "</td><td>" + age + "</td><td>" + sex
+ "</td>"
window.parent.frames[2].document.getElementsByTagName("table")[0]
.appendChild(tr);
}
</script>
</head>
<body>
<form name="form1" onsubmit="check()">
姓名：<input type="text" name="name"><br /> 年龄：<input
type="text" name="age"><br /> 性别：<input type="text"
name="sex"><input type="button" value="选择"
onclick="window.open('select.html')"> <input type="submit"
value="提交">
</form>
</body>
</html>
下边是main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td><a href="javascript:void(0)" onclick="dataSort()">年龄</a></td>
<td>性别</td>
</tr>
<tr>
<td>王金鉴</td>
<td>11</td>
<td>男</td>
</tr>
<tr>
<td>冯旭</td>
<td>12</td>
<td>男</td>
</tr>
<tr>
<td>李俊峰</td>
<td>15</td>
<td>男</td>
</tr>
<tr>
<td>赵维真</td>
<td>22</td>
<td>男</td>
</tr>
<tr>
<td>孟凯妮</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td>邓一鸣</td>
<td>19</td>
<td>男</td>
</tr>
</table>
</body>
</html>
9、流氓广告，鼠标走到哪里，广告就跟到哪里
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
border: 1px solid red;
} #one {
width: 400px;
height: 400px;
} #two {
background-color: pink;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="one">
<a href="隔行变色.html">这里有你想看的内容</a> <a href="selectMove.html">体育老师视频</a>
</div>
<div id="two">
<a href="formAdd.html" target="_blank" onclick="remove(this)">流氓广告</a>
</div>
</body>
<script type="text/javascript">
document.getElementById("one").onmousemove = function(event) {
var x = event.clientX;
var y = event.clientY;
var div2 = document.getElementById("two");
div2.style.position = "absolute";
div2.style.top = (y - 25) + "px";
div2.style.left = (x - 25) + "px";
}
function remove(a){
a.parentNode.style.display="none";
}
</script>
</html>
22、继续javascript,左边选中的跳到右边的更多相关文章
- JavaScript 操作选中当前的li元素并给他添加select类
JavaScript 操作选中当前的li元素并给他添加select类.之前都是使用jquery写的,今天使用JavaScript写一个. <!DOCTYPE html> <html ...
- javaScript实现选中文字提示新浪微博分享的效果
<!DOCTYPE html> <html xmlns:wb="http://open.weibo.com/wb"> <head> <me ...
- [javascript]各种页面定时跳转(倒计时跳转)代码总结
(1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) <script type="text/javascript"> //3秒钟之后跳转到指定 ...
- NO.14 两个div并排，左边为绝对宽度，右边为相对宽度
两个div并排,左边为绝对宽度,右边为相对宽度,这个问题,我也经常遇到,我一般的处理方法是将最大的容器padding-left固定宽度,左边的固定宽度的一块position:absolute,然后ri ...
- [记录] CSS 左边元素定长，右边元素获得剩余长度
情景:左边元素定长,右边元素获得剩余长度 1. 左边设置浮动,右边元素宽度auto,可以不设置,默认auto,然后设置margin-left:左边元素宽度 <ul class="ent ...
- HTML / JavaScript / PHP 实现页面跳转的几种方式
① HTML 的 meta refresh 标签 <!doctype html> <html lang="en"> <head> <met ...
- javascript获取选中的文本/html
首先来谈一下Selection对象和Range对象. Selection是window.getSelection()方法返回的一个对象,用于表示用户选中的文本区域.Selection对象表现为一组Ra ...
- Python自动化运维之22、JavaScript
一.简介 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理.学习了htm ...
- javascript 自动选中容器里的文字
前些时间有这么个需求,需要实现选中div里面的文字,选中了的文字可直接按ctrl+v(或者右键)实现黏贴操作. html代码: <div id="text" class=&q ...
随机推荐
- Another Blog
I also hold a blog with thoughts of English learning. Get there ===>. It's a private blog. Actual ...
- Xcode5 统计单元测试覆盖率（仅限XCTest）
概要 通过本篇文章,你将学会如何在Xcode5下使用统计XCTest测试代码的覆盖率,以及如何快速得到测试覆盖率的图形化报表. 为什么要特别说明Xcode5下的代码覆盖率统计,原因是,以前的方法在新环 ...
- ALAsset和ALAssetRepresentation详解
ALAsset类代表相册中的每个资源文件,可以通过它获取资源文件的相关信息还能修改和新建资源文件,ALAssetRepresentation类代表相册中每个资源文件的详细信息,可以通过它获取资源的大小 ...
- SQL必知必会——创建和操纵表（十七）
1.创建表 一般有两种创建表的方法: 多数DBMS都具有交互式创建和管理数据库表的工具表也可以直接用SQL语句操纵1.1.表创建基础 CREATE TABLE products( prod_id,CH ...
- Vue的安装和使用详解(一)
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与 ...
- map-DBA-comands
- C++笔试题之宏定义相关
1. #define CALC(X) X*X int i; i=CALC(+)/(+); cout<<i<<endl; 输出:31 宏定义在替换处展开为:i = 5+5*5+5 ...
- Java面试题一览
Java面试题一览
- Rust <0>：源代码组织，Cargo 入门
Rust 源代码组织,使用配套的 Cargo 工具,其功能强大,程序员可摆脱 C/C++ 中需要自行维护 make.cmake 之类配置的工作量. 初始化一个项目: cargo new --bin h ...
- HBase 热点问题——rowkey散列和预分区设计
热点发生在大量的client直接访问集群的一个或极少数个节点(访问可能是读,写或者其他操作).大量访问会使热点region所在的单个机器超出自身承受能力,引起性能下降甚至region不可用,这也会影响 ...