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>


 


 


 




       




 


												


											
JavaScript部分案例的更多相关文章
	

    
						
  1. JavaScript 入门案例
		
    四.  JavaScript 入门案例 在看本节之前,笔者建议您先看 JavaScript 基础篇  https://www.cnblogs.com/IT-LFP/p/10945884.html 1. ...
    
		
    2. 
						
  2. JavaScript小案例-阶乘！
		
    JavaScript小案例-阶乘! 阶乘:就是像台阶一样一阶一阶的,从高阶到低阶,依次乘下来!代码超少!容易理解! // factorial 阶乘 // 如果 function factorial(n ...
    
		
    3. 
						
  3. JavaScript DOM编程艺术第四章 — JavaScript图片库案例研究
		
    这一章通过JavaScript图片库案例,学习了一些DOM属性. HTML代码 <!DOCTYPE html> <html> <head> <meta cha ...
    
		
    4. 
						
  4. javascript基础案例解析
		
    学完了JavaScript基础部分,总结出一些基本案例,以备日后查看! 1.九九乘法口诀表:在控制台中输出九九乘法口诀表!代码如下: <!DOCTYPE html> <html> ...
    
		
    5. 
						
  5. html笔记05：html、css、javascript综合案例
		
    1.首先是html代码: <!-- markup time --> <div class="wrapper wb"> <div class=" ...
    
		
    6. 
						
  6. javascript 精典案例分析一览
		
    1.[优雅代码]深入浅出 妙用Javascript中apply.call.bind http://www.cnblogs.com/coco1s/p/4833199.html 2.1.0.1 ionic ...
    
		
    7. 
						
  7. JavaScript常见案例
		
    一.点灯开关控制: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...
    
		
    8. 
						
  8. JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
		
    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...
    
		
    9. 
								
  9. 【JavaScript】案例三：使用JS完成页面定时弹出广告——事件(onload)
		
     事件(onload) *注意点: 变量加var局部变量,不加var全局变量 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. 返回值:返回 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 初探内核之《Linux内核设计与实现》笔记下
			
    定时器和时间管理 系统中有很多与时间相关的程序(比如定期执行的任务,某一时间执行的任务,推迟一段时间执行的任务),因此,时间的管理对于linux来说非常重要. 主要内容: 系统时间 定时器 定时器相关 ...
    
			
    2. 
						
  2. 为什么不同命名空间的docker容器可以相互通信？
			
    一.什么是容器网络栈 所谓容器能看见的"网络栈",被隔离在自己的Network Namespace当中 1.网卡(network interface) 2.回环设备(loopbac ...
    
			
    3. 
						
  3. Vue-CLI 项目在pycharm中配置
			
    Vue-CLI Vue-CLI 项目在pycharm中配置 第一步 pycharm索引到vue项目的根目录,打开 第二步 安装vue.js插件来高亮 .vue 文件代码(见插图) 第三步 第四步 配置 ...
    
			
    4. 
						
  4. PHP list的赋值
			
    List右边的赋值对象是一个以数值为索引的数组,左边的变量的位置和赋值对象的键值一一对应,有些位置的变量可以省略不写.非末尾的被赋值变量省略时,分隔的逗号不能省略.左边变量被赋值的顺序是从右到左的.  ...
    
			
    5. 
						
  5. PMP（第六版）中的控制账户、规划包、工作包
			
    PMP(第六版)中的控制账户.规划包.工作包 控制账户是一个管理控制点,在该控制点上,把范围.预算和进度加以整合,并与挣值比较,以测量绩效.控制账户拥有2个或以上的工作包,但每个工作包只与一个控制账户 ...
    
			
    6. 
						
  6. python编程系列---global的使用注意点
			
    global用法虽然很简单,当在函数中要修改全局变量时要使用到,但也要注意一个小问题,看下面的代码: 调用append()方法,只是修改,并不是赋值操作,不需要global提前声明 temp_num  ...
    
			
    7. 
						
  7. 微信小程序如何发送订阅消息，正确姿势来了，建议收藏！
			
    小程序订阅消息公测已经有些日子,今天以世界上最好的语言(PHP)为例,说一下如何发送订阅消息. 1.订阅消息 其实如果用过模板消息的话,改用订阅消息挺简单的,看一下官方文档稍加摸索就能使用. 但是对于 ...
    
			
    8. 
						
  8. The usage of Markdown---杂谈：缩进/换行/分割线/注释/文字颜色
			
    目录 1. 序言 2. 缩进 3. 换行 4. 分割线 5. 注释 6. 改变文字大小和颜色 更新时间:2019.09.14 1. 序言   今天一口气更新了接近10篇博客(虽然只是将我之前基本码好的 ...
    
			
    9. 
						
  9. Solr分片机制以及Solrcloud搭建及分片操作
			
    Solr分片描述 分片是集合的逻辑分区,包含集合中文档的子集,这样集合中的每个文档都正好包含在一个分片中.集合中包含每个文档的分片取决于集合的整体"分片"策略. 当您的集合对于一个 ...
    
			
    10. 
						
  10. Javascript进阶必会
			
    概念: 局部块函数声明: ES5才承认有这个东西. function f(){return 'global';} function test(x){ var result = []; if(x) {  ...
    
			
    11.