javascript 是 web 的编程语言。
所有现代的 html 页面都使用 javascript。
javascript 非常容易学。
阅读本教程，您需要有以下基础：
ps ：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、设置时间弹出链接
<p>
<span id="time">5</span>之后跳转
</p>
<script>
var data = 5;
function fun(){
data--;
if(data<=0){
location.href="https://www.sina.cn";
}
time.innerhtml = data;
}
setinterval(fun,1000);
</script>
03、轮播图
<img src="img/img/banner_1.jpg" id="img" width="100%" />
<script>
var number =1;
function fun(){
number++;
if(number>3){
number=1;
}
var img =document.getelementbyid("img");
img.src="img/img/banner_"+number+".jpg";
}
setinterval(fun,3000);
</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>\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>
05.动态表格
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>动态表格</title>
<style>
table {
border: 1px solid;
margin: auto;
width: 500px;
}
td, th {
text-align: center;
border: 1px solid;
}
div {
text-align: center;
margin: 50px;
}
</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" value="添加" id="btn_add">
</div>
<table cellspacing="0" cellpadding="0">
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="deltr(this);">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="deltr(this);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="deltr(this);">删除</a></td>
</tr>
<script>
/* // 1、获取按钮
document.getelementbyid("btn_add").onclick =function () {
//2、获取文本框的内容
var id = document.getelementbyid("id").value;
var name = document.getelementbyid("name").value;
var gender = document.getelementbyid("gender").value;
//3、创建td，赋值td的标签体
//id的td
var td_id = document.createelement("td");
var text_id = document.createtextnode(id);
td_id.appendchild(text_id);
//name的td
var td_name = document.createelement("td");
var text_name = document.createtextnode(name);
td_name.appendchild(text_name);
//gender的td
var td_gender = document.createelement("td");
var text_gender = document.createtextnode(gender);
td_gender.appendchild(text_gender);
//a标签的td
var td_a = document.createelement("td");
var ele_a = document.createelement("a");
ele_a.setattribute("href","javascript:void(0)");
ele_a.setattribute("onclick","deltr(this);");
var text_a = document.createtextnode("删除");
ele_a.appendchild(text_a);
td_a.appendchild(ele_a);
var tr = document.createelement("tr");
tr.appendchild(td_id);
tr.appendchild(td_name);
tr.appendchild(td_gender);
tr.appendchild(td_a);
document.getelementsbytagname("table")[0].appendchild(tr);
}*/
// 1、获取按钮
document.getelementbyid("btn_add").onclick = function () {
//2、获取文本框的内容
var id = document.getelementbyid("id").value;
var name = document.getelementbyid("name").value;
var gender = document.getelementbyid("gender").value;
//3、 获取table
var table = document.getelementsbytagname("table")[0];
// 4、追加一行
table.innerhtml+="<tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0);\" onclick=\"deltr(this);\">删除</a></td>\n" +
" </tr>";
}
// 删除方法
function deltr(obj) {
var table = obj.parentnode.parentnode.parentnode;
var tr = obj.parentnode.parentnode;
table.removechild(tr);
}
</script>
</table>
</body>
</html>
06.表格全选
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>表格全选</title>
<style>
table{
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
margin-top: 10px;
margin-left: 30%;
}
.out{
background-color: white;
}
.over{
background-color: pink;
}
</style>
<script>
/*
1.全选：
获取所有的checkbox
遍历cb，设置每一个cb的状态为选中 checked
2.全不选
获取所有的checkbox
遍历cb，设置每一个cb的状态为选不中
3．反选
获取所有的checkbox
遍历cb，设置每一个cb的状态取反
*/
window.onload=function(){
document.getelementbyid("selectall").onclick=function(){
var cbs=document.getelementsbyname("cb");
for(var i=0;i<cbs.length;i++){
cbs[i].checked=true;
}
};
document.getelementbyid("unselectall").onclick=function(){
var cbs=document.getelementsbyname("cb");
for(var i=0;i<cbs.length;i++){
cbs[i].checked=false;
}
};
document.getelementbyid("selectrev").onclick=function(){
var cbs=document.getelementsbyname("cb");
for(var i=0;i<cbs.length;i++){
cbs[i].checked=!cbs[i].checked;
}
};
}
</script>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstcb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</table>
<!--<input type="checkbox" name="cb" id="firstcb" />
<input type="checkbox" name="cb" id="secondcb" />
<input type="checkbox" name="cb" id="thirdcb" />-->
<div>
<input type="button" id="selectall" value="全选" />
<input type="button" id="unselectall" value="全不选" />
<input type="button" id="selectrev" value="反选" />
<script>
var selectall =document.getelementbyid("selectall");
var cbs =document.getelementsbyname("cb");
selectall.onclick=function(){
for (var i=0;i<cbs.length;i++) {
cbs[i].checked = true;
}
}
var unselectall =document.getelementbyid("unselectall");
var cbs =document.getelementsbyname("cb");
unselectall.onclick=function(){
for (var i=0;i<cbs.length;i++) {
cbs[i].checked = false;
}
}
var selectrev=document.getelementbyid("selectrev");
var cbs =document.getelementsbyname("cb");
selectrev.onclick=function(){
for (var i=0;i<cbs.length;i++) {
cbs[i].checked = !cbs[i].checked;
}
}
</script>
</div>
</body>
</html>
07.输出时间
<script>
var mydate =new date();
var year =mydate.getfullyear();
var month =mydate.getmonth()+1;
var day =mydate.getdate();
var hour =mydate.gethours();
var min =mydate.getminutes();
var second = mydate.getseconds();
//如果为单数时，在前面补0
year = year < 10 ? "0" :year;
month =month <10 ? "0" :month;
day =day < 10 ? "0" :day;
hour = hour <10 ? "0" :hour;
min =min <10 ? "0" :min;
second = second <10 ? "0" :second;
//输出时间
document.write(year+"-"+month +"-"+day+"-"+hour+"-"+min+"-"+second);
</script>
08.根据输入的行和列，创建表格
<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>
09.表单验证
<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>
如对本文有疑问，
点击进行留言回复！！
我要评论
网友评论