javascript总结
来源：互联网 发布：海岛奇兵上尉升级数据 编辑：程序博客网 时间：2024/06/03 23:00
第一(------>)
1.在html中嵌入javascript格式为：
<script type="text/javascript">
中间写功能代码...
</script>
2.输出格式为：document.write("内容...");
alert("内容...");
3.调用javascript代码：
<input type="button" value="有参函数" onclick="函数名(document.getElementById('idvalue').value)"/>
4.例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* function sayhello(){
for(var i=0;i<5;i++){
document.write("<h2>say Hello!!<h2>")
}
}
*/
function sayhello(count){
for(var i=0;i<count;i++){
document.write("<h2>say Hello!!<h2>")
}
}
</script>
</head>
<body>
<!-- <input type="button" value="无参函数" onclick="sayhello()"></input> -->
请输入循环次数<input name="a" type="text" id="count"/>
<input type="button" value="有参函数" onclick="sayhello(document.getElementById('count').value)"/>//得到输入的值
</body>
</html>
第二(------>)
1.弹出窗口：
window.open();
关闭弹出窗口：
window.close();
2.例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function open_adv(){
//window.showModalDialog("adv.html","","dialogWidth:200px;dialogHeight:200px;");
window.open("adv.html","aa","width=200 ,height=200,top=200,left=400");
}
</script>
</head>
<body>
<input type="button" onclick="open_adv()" value="弹出框"/>
</body>
</html>
(adv.html------>)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" onclick="window.close()" value="关闭">
</body>
</html>
第三(----->)
1.带返回值的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var a=prompt("请输入第一个数", 0);
var b=prompt("请输入第二个数",0);
function cal(a,b){
var result=parseInt(a)+parseInt(b);
return result;
}
var result=cal(a, b);
alert("计算结果："+result);
</script>
</head>
<body>
</body>
</html>
第四(---->)
1.刷新，返回后退，前进
history.back();history.go(-1);后退
history.go(1);前进
2.例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="happyboy.html"><img src="1.jpg" width="100px" height="100px"></a>
<a href="javascript:location.reload()">刷新</a>
</body>
</html>
(happyboy.html---->)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
happyboy
<input type="button" value="返回" onclick="history.back()">
</body>
</html>
第五(---->)
1.输出指定的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//显示input标签的值
function showInput(){
var str1=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<str1.length;i++){
sStr+=str1[i].value+"<br/>"
}
document.getElementById("s").innerHTML=sStr;
}
//显示季节
function showSeason(){
var str1=document.getElementsByName("season");
var sStr="";
for(var i=0;i<str1.length;i++){
sStr+=str1[i].value+"<br/>";
}
document.getElementById("s").innerHTML=sStr;
}
</script>
</head>
<body>
<input name="season" type="text" value="春">
<input name="season" type="text" value="夏">
<input name="season" type="text" value="秋">
<input name="season" type="text" value="冬">
<br />
<input type="button" value="显示input内容" onclick="showInput()" />
<input type="button" value="显示season内容" onclick=" showSeason()" />
<p id="s"></p>
</body>
</html>
第六(----->)
1.弹出框信息，用户选择：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>confirm</title>
<script type="text/javascript">
function showInfo(){
var flag=confirm("确定取消订单吗？");
if(flag==true){
alert("订单已经取消");
}else{
alert("取消删除");
}
}
</script>
</head>
<body>
<input type="button" onclick="showInfo()" value="删除订单"/>
</body>
</html>
第七(----->)
1.计算器实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var number1=prompt("请输入一个数字",0);
var number2=prompt("请输一个数字",0);
var op=prompt("请输一个字符","+");
if(isNaN(number1)||isNaN(number2)){//判断是不是数字，如果不是数字返回true
alert("不是数字");
}else if(op=="+"||op=="-"||op=="*"||op=="/"){
var result=eval(number1+op+number2);
document.write("计算结果"+result)
}else{
alert("只做加减乘除");
}
</script>
</head>
<body>
</body>
</html>
第八(----->)
1.全选按钮：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function quanxuan(){//全选
var str=document.getElementsByName("aa");
for(var i=0;i<str.length;i++){
str[i].checked=true;
}
}
function quanbuxuan(){//全部选
var str=document.getElementsByName("aa");
for(var i=0;i<str.length;i++){
str[i].checked=false;
}
}
function fanxuan(){//反选，当有一个已经选过，按反选按钮则其他选前者不选
var str=document.getElementsByName("aa");
for(var i=0;i<str.length;i++){
if(str[i].checked==true){
str[i].checked=false;
}else{
str[i].checked=true;
}
}
}
function danxuan(){//当点击全部内容时，全选按钮选，如果有一个没选，全选按钮则不选
var str=document.getElementsByName("aa");
var str1=document.getElementById("bb");
var flag=true;
for(var i=0;i<str.length;i++){
if(str[i].checked==false){
flag=false;
}
}
if(flag==false){
str1.checked=false;
}else{
str1.checked=true;
}
}
function buxuan() {//当点击全选按钮时，判断是全选还是全不选
var str=document.getElementById("bb");
if(str.checked==true){
quanxuan()
}else{
quanbuxuan()
}
}
</script>
</head>
<body>
<input name="aa" type="checkbox" value="a" onclick="danxuan()" >洗衣机
<br/>
<input name="aa" type="checkbox" value= "b" onclick="danxuan()">冰箱
<br/>
<input name="aa" type="checkbox" value="c" onclick="danxuan()" >抽油烟机
<br/>
<input id="bb" type="checkbox" onclick="buxuan()">全选
<input type="checkbox" onclick="fanxuan()">反选
</body>
</html>
第九(---->)
1.获取当前日期时间：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myday(){
var day=new Date();
var year=day.getFullYear();
var month=day.getMonth();
var date=day.getDate();
var hour=day.getHours();
var minute=day.getMinutes();
var second=day.getSeconds();
var str=year+"年"+(month+1)+"月"+date+"日"+hour+"时"+minute+"分"+second+"秒";
document.getElementById("a").innerHTML=str;
}
setInterval("myday()",1000);
/* document.getElementById("a").innerHTML=22;顺序加载，函数不包括在内，边解释边执行 */
</script>
</head>
<body>
现在时间：<p id ="a"></p>
</body>
</html>
第十(----->)
1.例子：试题选择：增加节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function add(num){
var olnode=document.getElementById("olone");
var li=document.createElement("li")
var li_ol=document.createElement("ol");
li_ol.setAttribute("style","list-style: upper-alpha");
for(var i=1;i<=num;i++){
var liol_li=document.createElement("li");
var input=document.createElement("input");
input.setAttribute("type","text");
liol_li.appendChild(input);
li_ol.appendChild(liol_li);
}
var input2=document.createElement("input");
input2.setAttribute("type","text");
input2.setAttribute("style","width:400px");
li.appendChild(input2);
li.appendChild(li_ol);
olnode.appendChild(li);
}
</script>
</head>
<body>
<input id="a" type="button" value="增加" onclick="add(document.getElementById('b').value)"/>
试题选项数量<input id="b" type="text" />
<ol id="olone">
<li><input type="text" style="width: 400px">
<ol style="list-style: upper-alpha;">
<li><input type="text"></li>
</ol>
</li>
</ol>
</body>
</html>
2.删除节点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function deletenode(){
var node=document.getElementById("img2");//得到节点
node.parentNode.removeChild(node);
}
</script>
</head>
<body>
<input type="button" onclick="deletenode()" value="删除"/>
<img src="1.jpg" width="100px" height="100px" id="img1"/>
<img src="2.jpg" width="100px" height="100px" id="img2"/>
</body>
</html>
3.增加文本节点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function change(){
var linode=document.createElement("li");
var inputnode=document.createElement("input");
inputnode.setAttribute("type","text");
linode.appendChild(inputnode);
var ol=document.getElementById("a");
ol.appendChild(linode);
}
</script>
</head>
<body>
<input type="button" onclick="change()" value="增加文本框"/>
<ol id="a">
<li><input type="text"></li>
</ol>
</body>
</html>
4.增加图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function newnode(){
var img=document.createElement("img");
img.setAttribute("src","1.jpg");
img.setAttribute("width","100px")
img.setAttribute("height","100px");
document.body.appendChild(img);
}
</script>
</head>
<body>
<h2>喜欢的图片<h2>
<input id="a" type="button" value="添加图片" onclick="newnode()"/>
</body>
</html>
第十一(------>)
1.表单验证：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function checkname() {
var username=document.getElementById("username").value;
if(username==""){
document.getElementById("namespan").innerHTML="用户名不能为空";
/* alert("用户名不能为空"); */
return false;
}
if(username.length<6){
document.getElementById("namespan").innerHTML="用户名长度必须大于6位";
/* alert("用户名长度必须大于6位"); */
return false;
}else{
document.getElementById("namespan").innerHTML="用户名合法";
return true;
}
}
function checkpassword() {
var password=document.getElementById("password").value;
if(password==""){
document.getElementById("passwordspan").innerHTML="密码不能为空"
/* alert("密码不能为空"); */
return false;
}
if(password.length<6){
document.getElementById("passwordspan").innerHTML="密码长度必须大于6位"
/* alert("密码长度必须大于6位"); */
return false;
}else{
document.getElementById("passwordspan").innerHTML="输入正确"
return true;
}
}
function checkpassword1() {
var password=document.getElementById("password").value;
var password1=document.getElementById("password1").value;
if(password==""||password1==""){
document.getElementById("passwordspan").innerHTML="密码不能为空"
/* alert("密码不能为空"); */
return false;
}
if(password1!=password){
document.getElementById("password1span").innerHTML="两次密码输入不一致"
/* alert("两次密码输入不一致"); */
return false;
}else{
document.getElementById("password1span").innerHTML="输入正确"
return true;
}
}
function checkemail() {
var emailname=document.getElementById("email").value;
if(emailname==""){
document.getElementById("emailspan").innerHTML="邮箱不能为空"
/* alert("邮箱不能为空"); */
return false;
}
var reg1=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
var flag=reg1.test(emailname);
if(flag){
document.getElementById("emailspan").innerHTML="邮箱合法"
return true;
}else{
document.getElementById("emailspan").innerHTML="邮箱不合法"
return false;
}
/* if(emailname.match("@")!="@"||emailname.match(".com")!=".com"||emailname.indexOf("@")>emailname.indexOf(".com")){
document.getElementById("emailspan").innerHTML="输入形式不合法"
alert("输入形式不合法")
return false;
}else{
document.getElementById("emailspan").innerHTML="输入正确"
return true;
} */
}
function checkform() {
if(checkname()&&checkpassword()&&checkpassword1()&&checkemail()){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form action="adv.html" onsubmit="return checkform()">
<table>
<tr><td>用户名：</td>
<td><input type="text" id ="username" name="username" onkeyup="checkname()"/>
<span id="namespan"></span></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" id="email" name="email" onkeyup="checkemail()"><span id="emailspan"></span></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="password" name="password" onkeyup="checkpassword()" onmouseover="checkpassword1()"><span id="passwordspan"></span></td>
</tr>
<tr>
<td>重新输入密码：</td>
<td><input type="password" id="password1" name="password1" onkeyup="checkpassword1()" onmouseover="checkpassword1()" ><span id="password1span"></span></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="gender" id="male"/><label for="male">男</label><span id="sexspan"></span>
<input type="radio" name="gender" id="female" checked="checked"><label for="female">女</label><span id="sexspan1">
</span></td>
</tr>
<tr>
<td><input type="submit" value="注册"></td>
<td><input type="reset" value="重置"></td>
</tr>
</table>
</form>
</body>
</html>
第十二(------>)
1.级联菜单：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var provinces=new Array(new Array("00","-选择省份-"),new Array("01","北京市"),
new Array("02","湖北省"),new Array("03","四川省"),new Array("04","江苏省"),
new Array("05","湖北省"));
var citys=new Array(new Array("0101","北京市"),new Array("0201","武汉"),new Array("0202","荆州"),
new Array("0301","成都"),new Array("0302","绵阳"),new Array("0401","南京"),new Array("0402","苏州"),
new Array("0501","长沙"),new Array("0502","株洲"));
function fillprovince() {
var selprovince=document.getElementById("selprovince");
for(var i=0;i<provinces.length;i++){
var option=new Option(provinces[i][1],provinces[i][0]);
selprovince.add(option);
}
selprovince.options[0].selected=true;
}
function changecity(){
var selprovince=document.getElementById("selprovince");
var provincecode=selprovince.options[selprovince.selectedIndex].value;
var selcity=document.getElementById("selcity");
selcity.options.length=0;
for(var i=0;i<citys.length;i++){
if(citys[i][0].substring(0,2)==provincecode){
selcity.add(new Option(citys[i][1],citys[i][0]),null);
}
}
selcity.options[0].selected=true;
}
</script>
</head>
<body>
<form action="" method="get">
<select id="selprovince" onchange="changecity()" style="width: 100px">
<script type="text/javascript">fillprovince();</script>
</select>
<select id="selcity" style="width: 100px"></select>
</form>
</body>
</html>
</select>
<select id="selcity" style="width: 100px"></select>
</form>
</body>
</html>
</select>
<select id="selcity" style="width: 100px"></select>
</form>
</body>
</html>
</select>
<select id="selcity" style="width: 100px"></select>
</form>
</body>
</html>
</select>
<select id="selcity" style="width: 100px"></select>
</form>
</body>
</html>
</select>
<select id="selcity" style="width: 100px"></select>
</form>
</body>
</html>
1.在html中嵌入javascript格式为：
<script type="text/javascript">
中间写功能代码...
</script>
2.输出格式为：document.write("内容...");
alert("内容...");
3.调用javascript代码：
<input type="button" value="有参函数" onclick="函数名(document.getElementById('idvalue').value)"/>
4.例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* function sayhello(){
for(var i=0;i<5;i++){
document.write("<h2>say Hello!!<h2>")
}
}
*/
function sayhello(count){
for(var i=0;i<count;i++){
document.write("<h2>say Hello!!<h2>")
}
}
</script>
</head>
<body>
<!-- <input type="button" value="无参函数" onclick="sayhello()"></input> -->
请输入循环次数<input name="a" type="text" id="count"/>
<input type="button" value="有参函数" onclick="sayhello(document.getElementById('count').value)"/>//得到输入的值
</body>
</html>
第二(------>)
1.弹出窗口：
window.open();
关闭弹出窗口：
window.close();
2.例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function open_adv(){
//window.showModalDialog("adv.html","","dialogWidth:200px;dialogHeight:200px;");
window.open("adv.html","aa","width=200 ,height=200,top=200,left=400");
}
</script>
</head>
<body>
<input type="button" onclick="open_adv()" value="弹出框"/>
</body>
</html>
(adv.html------>)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" onclick="window.close()" value="关闭">
</body>
</html>
第三(----->)
1.带返回值的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var a=prompt("请输入第一个数", 0);
var b=prompt("请输入第二个数",0);
function cal(a,b){
var result=parseInt(a)+parseInt(b);
return result;
}
var result=cal(a, b);
alert("计算结果："+result);
</script>
</head>
<body>
</body>
</html>
第四(---->)
1.刷新，返回后退，前进
history.back();history.go(-1);后退
history.go(1);前进
2.例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="happyboy.html"><img src="1.jpg" width="100px" height="100px"></a>
<a href="javascript:location.reload()">刷新</a>
</body>
</html>
(happyboy.html---->)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
happyboy
<input type="button" value="返回" onclick="history.back()">
</body>
</html>
第五(---->)
1.输出指定的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//显示input标签的值
function showInput(){
var str1=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<str1.length;i++){
sStr+=str1[i].value+"<br/>"
}
document.getElementById("s").innerHTML=sStr;
}
//显示季节
function showSeason(){
var str1=document.getElementsByName("season");
var sStr="";
for(var i=0;i<str1.length;i++){
sStr+=str1[i].value+"<br/>";
}
document.getElementById("s").innerHTML=sStr;
}
</script>
</head>
<body>
<input name="season" type="text" value="春">
<input name="season" type="text" value="夏">
<input name="season" type="text" value="秋">
<input name="season" type="text" value="冬">
<br />
<input type="button" value="显示input内容" onclick="showInput()" />
<input type="button" value="显示season内容" onclick=" showSeason()" />
<p id="s"></p>
</body>
</html>
第六(----->)
1.弹出框信息，用户选择：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>confirm</title>
<script type="text/javascript">
function showInfo(){
var flag=confirm("确定取消订单吗？");
if(flag==true){
alert("订单已经取消");
}else{
alert("取消删除");
}
}
</script>
</head>
<body>
<input type="button" onclick="showInfo()" value="删除订单"/>
</body>
</html>
第七(----->)
1.计算器实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var number1=prompt("请输入一个数字",0);
var number2=prompt("请输一个数字",0);
var op=prompt("请输一个字符","+");
if(isNaN(number1)||isNaN(number2)){//判断是不是数字，如果不是数字返回true
alert("不是数字");
}else if(op=="+"||op=="-"||op=="*"||op=="/"){
var result=eval(number1+op+number2);
document.write("计算结果"+result)
}else{
alert("只做加减乘除");
}
</script>
</head>
<body>
</body>
</html>
第八(----->)
1.全选按钮：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function quanxuan(){//全选
var str=document.getElementsByName("aa");
for(var i=0;i<str.length;i++){
str[i].checked=true;
}
}
function quanbuxuan(){//全部选
var str=document.getElementsByName("aa");
for(var i=0;i<str.length;i++){
str[i].checked=false;
}
}
function fanxuan(){//反选，当有一个已经选过，按反选按钮则其他选前者不选
var str=document.getElementsByName("aa");
for(var i=0;i<str.length;i++){
if(str[i].checked==true){
str[i].checked=false;
}else{
str[i].checked=true;
}
}
}
function danxuan(){//当点击全部内容时，全选按钮选，如果有一个没选，全选按钮则不选
var str=document.getElementsByName("aa");
var str1=document.getElementById("bb");
var flag=true;
for(var i=0;i<str.length;i++){
if(str[i].checked==false){
flag=false;
}
}
if(flag==false){
str1.checked=false;
}else{
str1.checked=true;
}
}
function buxuan() {//当点击全选按钮时，判断是全选还是全不选
var str=document.getElementById("bb");
if(str.checked==true){
quanxuan()
}else{
quanbuxuan()
}
}
</script>
</head>
<body>
<input name="aa" type="checkbox" value="a" onclick="danxuan()" >洗衣机
<br/>
<input name="aa" type="checkbox" value= "b" onclick="danxuan()">冰箱
<br/>
<input name="aa" type="checkbox" value="c" onclick="danxuan()" >抽油烟机
<br/>
<input id="bb" type="checkbox" onclick="buxuan()">全选
<input type="checkbox" onclick="fanxuan()">反选
</body>
</html>
第九(---->)
1.获取当前日期时间：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myday(){
var day=new Date();
var year=day.getFullYear();
var month=day.getMonth();
var date=day.getDate();
var hour=day.getHours();
var minute=day.getMinutes();
var second=day.getSeconds();
var str=year+"年"+(month+1)+"月"+date+"日"+hour+"时"+minute+"分"+second+"秒";
document.getElementById("a").innerHTML=str;
}
setInterval("myday()",1000);
/* document.getElementById("a").innerHTML=22;顺序加载，函数不包括在内，边解释边执行 */
</script>
</head>
<body>
现在时间：<p id ="a"></p>
</body>
</html>
第十(----->)
1.例子：试题选择：增加节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function add(num){
var olnode=document.getElementById("olone");
var li=document.createElement("li")
var li_ol=document.createElement("ol");
li_ol.setAttribute("style","list-style: upper-alpha");
for(var i=1;i<=num;i++){
var liol_li=document.createElement("li");
var input=document.createElement("input");
input.setAttribute("type","text");
liol_li.appendChild(input);
li_ol.appendChild(liol_li);
}
var input2=document.createElement("input");
input2.setAttribute("type","text");
input2.setAttribute("style","width:400px");
li.appendChild(input2);
li.appendChild(li_ol);
olnode.appendChild(li);
}
</script>
</head>
<body>
<input id="a" type="button" value="增加" onclick="add(document.getElementById('b').value)"/>
试题选项数量<input id="b" type="text" />
<ol id="olone">
<li><input type="text" style="width: 400px">
<ol style="list-style: upper-alpha;">
<li><input type="text"></li>
</ol>
</li>
</ol>
</body>
</html>
2.删除节点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function deletenode(){
var node=document.getElementById("img2");//得到节点
node.parentNode.removeChild(node);
}
</script>
</head>
<body>
<input type="button" onclick="deletenode()" value="删除"/>
<img src="1.jpg" width="100px" height="100px" id="img1"/>
<img src="2.jpg" width="100px" height="100px" id="img2"/>
</body>
</html>
3.增加文本节点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function change(){
var linode=document.createElement("li");
var inputnode=document.createElement("input");
inputnode.setAttribute("type","text");
linode.appendChild(inputnode);
var ol=document.getElementById("a");
ol.appendChild(linode);
}
</script>
</head>
<body>
<input type="button" onclick="change()" value="增加文本框"/>
<ol id="a">
<li><input type="text"></li>
</ol>
</body>
</html>
4.增加图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function newnode(){
var img=document.createElement("img");
img.setAttribute("src","1.jpg");
img.setAttribute("width","100px")
img.setAttribute("height","100px");
document.body.appendChild(img);
}
</script>
</head>
<body>
<h2>喜欢的图片<h2>
<input id="a" type="button" value="添加图片" onclick="newnode()"/>
</body>
</html>
第十一(------>)
1.表单验证：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function checkname() {
var username=document.getElementById("username").value;
if(username==""){
document.getElementById("namespan").innerHTML="用户名不能为空";
/* alert("用户名不能为空"); */
return false;
}
if(username.length<6){
document.getElementById("namespan").innerHTML="用户名长度必须大于6位";
/* alert("用户名长度必须大于6位"); */
return false;
}else{
document.getElementById("namespan").innerHTML="用户名合法";
return true;
}
}
function checkpassword() {
var password=document.getElementById("password").value;
if(password==""){
document.getElementById("passwordspan").innerHTML="密码不能为空"
/* alert("密码不能为空"); */
return false;
}
if(password.length<6){
document.getElementById("passwordspan").innerHTML="密码长度必须大于6位"
/* alert("密码长度必须大于6位"); */
return false;
}else{
document.getElementById("passwordspan").innerHTML="输入正确"
return true;
}
}
function checkpassword1() {
var password=document.getElementById("password").value;
var password1=document.getElementById("password1").value;
if(password==""||password1==""){
document.getElementById("passwordspan").innerHTML="密码不能为空"
/* alert("密码不能为空"); */
return false;
}
if(password1!=password){
document.getElementById("password1span").innerHTML="两次密码输入不一致"
/* alert("两次密码输入不一致"); */
return false;
}else{
document.getElementById("password1span").innerHTML="输入正确"
return true;
}
}
function checkemail() {
var emailname=document.getElementById("email").value;
if(emailname==""){
document.getElementById("emailspan").innerHTML="邮箱不能为空"
/* alert("邮箱不能为空"); */
return false;
}
var reg1=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
var flag=reg1.test(emailname);
if(flag){
document.getElementById("emailspan").innerHTML="邮箱合法"
return true;
}else{
document.getElementById("emailspan").innerHTML="邮箱不合法"
return false;
}
/* if(emailname.match("@")!="@"||emailname.match(".com")!=".com"||emailname.indexOf("@")>emailname.indexOf(".com")){
document.getElementById("emailspan").innerHTML="输入形式不合法"
alert("输入形式不合法")
return false;
}else{
document.getElementById("emailspan").innerHTML="输入正确"
return true;
} */
}
function checkform() {
if(checkname()&&checkpassword()&&checkpassword1()&&checkemail()){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form action="adv.html" onsubmit="return checkform()">
<table>
<tr><td>用户名：</td>
<td><input type="text" id ="username" name="username" onkeyup="checkname()"/>
<span id="namespan"></span></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" id="email" name="email" onkeyup="checkemail()"><span id="emailspan"></span></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="password" name="password" onkeyup="checkpassword()" onmouseover="checkpassword1()"><span id="passwordspan"></span></td>
</tr>
<tr>
<td>重新输入密码：</td>
<td><input type="password" id="password1" name="password1" onkeyup="checkpassword1()" onmouseover="checkpassword1()" ><span id="password1span"></span></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="gender" id="male"/><label for="male">男</label><span id="sexspan"></span>
<input type="radio" name="gender" id="female" checked="checked"><label for="female">女</label><span id="sexspan1">
</span></td>
</tr>
<tr>
<td><input type="submit" value="注册"></td>
<td><input type="reset" value="重置"></td>
</tr>
</table>
</form>
</body>
</html>
第十二(------>)
1.级联菜单：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var provinces=new Array(new Array("00","-选择省份-"),new Array("01","北京市"),
new Array("02","湖北省"),new Array("03","四川省"),new Array("04","江苏省"),
new Array("05","湖北省"));
var citys=new Array(new Array("0101","北京市"),new Array("0201","武汉"),new Array("0202","荆州"),
new Array("0301","成都"),new Array("0302","绵阳"),new Array("0401","南京"),new Array("0402","苏州"),
new Array("0501","长沙"),new Array("0502","株洲"));
function fillprovince() {
var selprovince=document.getElementById("selprovince");
for(var i=0;i<provinces.length;i++){
var option=new Option(provinces[i][1],provinces[i][0]);
selprovince.add(option);
}
selprovince.options[0].selected=true;
}
function changecity(){
var selprovince=document.getElementById("selprovince");
var provincecode=selprovince.options[selprovince.selectedIndex].value;
var selcity=document.getElementById("selcity");
selcity.options.length=0;
for(var i=0;i<citys.length;i++){
if(citys[i][0].substring(0,2)==provincecode){
selcity.add(new Option(citys[i][1],citys[i][0]),null);
}
}
selcity.options[0].selected=true;
}
</script>
</head>
<body>
<form action="" method="get">
<select id="selprovince" onchange="changecity()" style="width: 100px">
<script type="text/javascript">fillprovince();</script>
</select>
<select id="selcity" style="width: 100px"></select>
</form>
</body>
</html>
</select>
<select id="selcity" style="width: 100px"></select>
</form>
</body>
</html>
</select>
<select id="selcity" style="width: 100px"></select>
</form>
</body>
</html>
</select>
<select id="selcity" style="width: 100px"></select>
</form>
</body>
</html>
</select>
<select id="selcity" style="width: 100px"></select>
</form>
</body>
</html>
</select>
<select id="selcity" style="width: 100px"></select>
</form>
</body>
</html>
0 0
- Javascript总结
- Javascript总结
- JavaScript总结
- JavaScript总结
- javascript总结
- javascript 总结
- javascript总结
- Javascript总结
- Javascript 总结
- JavaScript总结
- javascript总结
- Javascript总结
- javascript总结
- javascript 总结
- javascript总结
- javascript总结
- Javascript总结
- javascript总结
- UVA 11388-GCD LCM（数学）
- Non-transactional data access and the auto-commit mode
- cocos2dx3.2学习之路之目录结构及包含库
- 转： 高人博客
- 修改Linux内核的启动Logo和禁用启动光标
- javascript总结
- Vmware Centos中安装vmtools工具
- 模仿去哪儿的磁贴效果
- leetcode Two Sum
- 对request,session,application作用域形象理解
- rails respond_to
- 在eclipse配置完tomcat后，发布到的路
- 偶尔也翻下《c++编程思想》---之对象的创建与使用
- 论文中的FN FP TN TP
