JavaScript部分案例
Posted wzhsc
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript部分案例相关的知识，希望对你有一定的参考价值。
01、电灯的开关
<img id="light" src="img/off.gif">
<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>
02、设置时间弹出图片或其他
<span id="time">5</span>
<img id="img" src="img/gui.jpg" style="display: none">
<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>
03、轮播图
<img id="img" src="img/banner_1.jpg">
<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>
04、多级联动
<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>
<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> " +
" <option>德阳</option> " +
" <option>绵阳</option>"
break;
case "cq":
city.innerHTML = "<option>重庆</option>";
break;
case "gd":
city.innerHTML = "<option>广州</option> " +
" <option>深圳</option> " +
" <option>东莞</option>"
break;
}
}
</script>
05、动态表格
<style>
table{
border: 1px solid;
margin : auto;
width: 500px;
}
td{
border: 1px solid;
}
div{
text-align: center;
}
</style>
<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> " +
" <td>"+id+"</td> " +
" <td>"+name+"</td> " +
" <td>"+gender+"</td> " +
" <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td> " +
" </tr>"
}
</script>
06、根据输入的行和列，创建表格
<div>
请输入你想创建的表格：
行：<input type="text" id="row">
列：<input type="text" id="col">
<input type="button" id="creat" value="创建" onclick="creat()">
</div>
<div id="div1">
</div>
<script>
function creat() {
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
var div1 = document.getElementById("div1");
var tab = "<table border=‘1‘ cellpadding=‘0‘ cellspacing=‘0‘ style=‘margin: 50px auto‘>";
for (var i = 1; i <= row; i++) {
tab += "<tr>";
for (var j = 1; j <= col; j++) {
tab += "<td style=‘width: 50px;height: 30px;‘>aa</td>";
}
tab += "</tr>";
}
tab += "</table>";
div1.innerHTML = tab;
}
</script>
07、表单验证
<form id="form">
用户名：<input type="text" id="username" name="name" onblur="checkName()">
<span id="sp_name"></span>
<br>
<input type="submit">
</form>
<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>
以上是关于JavaScript部分案例的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript定时器案例：显示年月日时分秒+每隔60s发送一次短信