JavaScript常见案例
一.点灯开关控制：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <img id="light" src="img/off.gif"> </body> <script>
/*
1、获取图片对象
2、绑定点击事件
3、切换图片
使用flag标注状态
* */
var element = document.getElementById("light");
var flag = false;//关闭状态 element.onclick = function (ev) {
if(flag){//如果灯开着
element.src = "img/off.gif";
flag = false;
}else{
element.src = "img/on.gif";
flag = true;
} } </script>
</html>
二.5s之后自动出现一张图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <span id="time">5</span>
<img id="img" src="img/gui.jpg" style="display: none"> </body> <script>
var time = document.getElementById("time");
var img = document.getElementById("img");
var num = time.innerHTML;
setInterval(function () {
if(num>1){
num--;
time.innerHTML = num;
}else{
img.style.display = "block";
}
},1000);
</script>
</html>
三.轮播图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="img" src="img/banner_1.jpg"> </body> <script> var img = document.getElementById("img");
var num = 1;
setInterval(function () {
num++;
//判断num和3的大小
if(num>3){
num = 1;
}
img.src = "img/banner_"+num+".jpg";
},2000);
</script>
</html>
四.省级联动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="pro" onchange="choice()">
<option value="sc">四川</option>
<option value="cq">重庆</option>
<option value="gd">广东</option>
</select> <select id="city">
<option>成都</option>
<option>德阳</option>
<option>绵阳</option>
</select> </body> <script> var pro = document.getElementById("pro");
var city = document.getElementById("city"); function choice() {
var _pro = pro.value
switch (_pro) {
case "sc":
city.innerHTML = "<option>成都</option>\n" +
" <option>德阳</option>\n" +
" <option>绵阳</option>"
break;
case "cq":
city.innerHTML = "<option>重庆</option>";
break;
case "gd":
city.innerHTML = "<option>广州</option>\n" +
" <option>深圳</option>\n" +
" <option>东莞</option>"
break;
}
}
</script>
</html>
五.动态表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> table{
border: 1px solid;
margin : auto;
width: 500px;
}
td{
border: 1px solid;
}
div{
text-align: center;
}
</style>
</head>
<body> <div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入名字">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" id="add" value="添加" onclick="add()">
</div> <table>
<tr>
<td>id</td>
<td>name</td>
<td>gender</td>
<td>delete</td>
</tr>
<tr>
<td>1</td>
<td>coco</td>
<td>女</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>bobo</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>yoyo</td>
<td>女</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
</table> </body> <script>
function del(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
} function add() {
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value; var table = document.getElementsByTagName("table")[0];
//追加一行
table.innerHTML += " <tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0)\" onclick=\"del(this)\">删除</a></td>\n" +
" </tr>" }
</script>
</html>
六.表格全选：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> table{
border: 1px solid;
margin : auto;
width: 500px;
}
td{
border: 1px solid;
} </style>
</head>
<body> <table>
<tr>
<td></td>
<td>id</td>
<td>name</td>
<td>gender</td>
<td>delete</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" ></td>
<td>1</td>
<td>coco</td>
<td>女</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="choice"></td>
<td>2</td>
<td>bobo</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="choice"></td>
<td>3</td>
<td>yoyo</td>
<td>女</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
</table>
<center>
<button id="qx">全选</button>
<button id="qbx">全不选</button>
<button id="fx">反选</button>
</center>
</body> <script>
document.getElementById("qx").onclick = function () {
var checkboxs = document.getElementsByName("choice");
for (var i = 0;i<checkboxs.length;i++){
checkboxs[i].checked = true;
} } document.getElementById("qbx").onclick = function () {
var checkboxs = document.getElementsByName("choice");
for (var i = 0;i<checkboxs.length;i++){
checkboxs[i].checked = false;
} } document.getElementById("fx").onclick = function () {
var checkboxs = document.getElementsByName("choice");
for (var i = 0;i<checkboxs.length;i++){
checkboxs[i].checked = !checkboxs[i].checked;
} } var trs = document.getElementsByTagName("tr");
for (var i = 0;i<trs.length;i++){
trs[i].onmouseover = function (ev) {
this.style.background = "red"
} trs[i].onmouseout = function (ev) {
this.style.background = "white" }
}
</script>
</html>
七.表单验证：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <form id="form"> 用户名：<input type="text" id="username" name="name" onblur="checkName()">
<span id="sp_name"></span>
<br>
<input type="submit"> </form> </body> <script>
window.onload = function (ev) { document.getElementById("form").onsubmit = function (ev1) { return checkName();
} } function checkName() {
var useranme = document.getElementById("username").value;
var sp_name= document.getElementById("sp_name");
var regExp = new RegExp("^.{3,20}$");
if(regExp.test(useranme)){
sp_name.innerHTML = "可以注册";
sp_name.style.color = "green";
return true;
}else{
sp_name.innerHTML = "用户名格式有误";
sp_name.style.color = "red";
return false;
}
}
</script>
</html>
JavaScript常见案例的更多相关文章
- 关于JavaScript 常见的面试题
关于JavaScript常见的面试题总结 一.JavaScript基本数据类型 null:空.无.表示不存在,当为对象的属性赋值为null,表示删除该属性 undefined:未定义.当声明变量却没有 ...
- jQuery常见案例
jQuery常见案例 通过jQuery实现全选,反选取消: 选择 地址 端口 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> ...
- JavaScript 常见使用误区
JavaScript 常见使用误区,都是平时开发过程中填过的一些坑,整理记录下. 比较运算符常见错误 //在常规的==比较中,数据类型是被忽略的,以下 if 条件语句返回 true: var x = ...
- JavaScript常见集合操作
JavaScript常见集合操作 集合的遍历 FOR循环(效率最高) 优点:JavaScript最普遍的for循环,执行效率最高 缺点:无法遍历对象 for(let i=0;i<array.le ...
- javascript常见的20个问题与解决方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 上海苹果维修点分享苹果电脑MACBOOK故障维修常见案例
苹果的电子设备无论是外观和性能都是无与伦比的美丽,很多开发者都开始选用苹果电脑macbook.近年来苹果售后维修点来维修苹果电脑的用户也越来越多,我们上海苹果维修点就整理分享了一些苹果电脑MACBOO ...
- JavaScript 入门案例
四. JavaScript 入门案例 在看本节之前,笔者建议您先看 JavaScript 基础篇 https://www.cnblogs.com/IT-LFP/p/10945884.html 1. ...
- JavaScript 常见的六种继承方式
JavaScript 常见的六种继承方式 前言 面向对象编程很重要的一个方面,就是对象的继承.A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. 大部分 ...
- JavaScript —— 常见用途
javaScript 简介 第一个JavaScript 程序: 点击按钮显示日期 <!DOCTYPE html> <html> <head> <meta ...
随机推荐
- [iptables] 如何用iptables管理桥接模式下的设备
场景:qemu虚拟机通过tap设备与host的物理网卡通过bridge桥接上网. 如下: [root@host100 ~]# brctl show bridge name bridge id STP ...
- [qemu][kvm] 在kvm嵌套kvm的虚拟机里启动kvm加速
常规情况下,如果在kvm的虚拟机里,又想使用kvm的虚拟机,会报如下的错误信息: [root@host0 nlb]# Could not access KVM kernel module: No su ...
- php 连接 数据库
$mysql_server_name='localhost'; //改成自己的mysql数据库服务器 $mysql_username='root'; //改成自己的mysql数据库用户名 mysql默 ...
- windows 创建共享文件夹
1.右键要共享的文件夹----“共享”------“指定特定用户”,出现如下对话框: 2.选择“Everyone”,点击“共享”按钮,如下: 3.打开“运行“(win+r),输入上图 双反斜杠后面的内 ...
- 从Win32程序中的主函数中获取命令行参数
在标准C或者Win32控制台程序的main函数中,它们都有两个参数:"argc" 和 "argv",如下所示: int main(int argc, char ...
- web前端学习历程--跨域问题
一.同源策略 一个页面的ajax只能获取这个页面相同源(协议.域名.端口号都必须相同)的数据. 二.jsonp方法 1.json和jsonp JSON(JavaScript Object Notati ...
- sersync 开机自启 (仅供自己参考)
sersync是一个实时同步的软件,,将其添加到/etc/rc.local中没有效果 ##之所以没效果是因为:####由于/etc/rc.local是/etc/rc.d/rc.local的软连接,所以 ...
- 详解Python变量在内存中的存储
这篇文章主要是对python中的数据进行认识,对于很多初学者来讲,其实数据的认识是最重要的,也是最容易出错的.本文结合数据与内存形态讲解python中的数据,内容包括: 引用与对象 可变数据类型与不可 ...
- 20190402Linux常用命令week1.1
Linux常用命令详解week1.1 基础命令:lsmanpwdcdmkdirechotouchcpmvrmrmdircatmorelessheadtailclearpoweroffreboot 命令 ...
- tomcat的jks的私钥导出nginx需要的key文件
方法一: 1.先用keytool导出pfx文件.第一个123456是jks密码,后边两个是新生成的pfx的密码 keytool -v -importkeystore -srckeystore D:\\ ...