js案例-点击+电灯开关+轮播图+动态表格+表格全选+登录表格验证

最新推荐文章于 2024-05-28 13:09:25 发布

木子津

最新推荐文章于 2024-05-28 13:09:25 发布

阅读量214

点赞数 2

分类专栏：前端文章标签： js css html javascript jquery

本文链接：https://blog.csdn.net/weixin_44325370/article/details/111224697

版权

案例

1.点击

<body>
			<img id="light" src="img/off.gif"  onclick="fun();">
			<img id="light2" src="img/off.gif">
  <script>
			    function fun(){
    
			        alert('我被点了');
			        alert('我又被点了');
			    }
			
			    function fun2(){
    
			        alert('咋老点我？');
			    }
			
			    //1.获取light2对象
			    var light2 = document.getElementById("light2");
			    //2.绑定事件
			    light2.onclick = fun2;
    </script>
</body>

2.电灯开关

<!DOCTYPE html>
<html lang="en">
	<head>
		    <meta charset="UTF-8">
		    <title>电灯开关</title>
		
	</head>
	<body>
		<img id="light" src="img/off.gif">
        <script>
	    /*
	     分析：
	            1.获取图片对象
	            2.绑定单击事件
	            3.每次点击切换图片
	                * 规则：
	                    * 如果灯是开的 on,切换图片为 off
	                    * 如果灯是关的 off,切换图片为 on
	                * 使用标记flag来完成
	     */
	
	    //1.获取图片对象
	    var light = document.getElementById("light");
	
	    var flag = false;//代表灯是灭的。 off图片
	
	    //2.绑定单击事件
	    light.onclick = function(){
    
	        if(flag){
    //判断如果灯是开的，则灭掉
	            light.src = "img/off.gif";
	            flag = false;
	
	        }else{
    
	            //如果灯是灭的，则打开
	
	            light.src = "img/on.gif";
	            flag = true;
	        }
            </script>
        </body>
</html>

3.轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>



</head>
<body>

    <img id="img" src="img/banner_1.jpg" width="100%">

    <script>
        /*
            分析：
                1.在页面上使用img标签展示图片
                2.定义一个方法，修改图片对象的src属性
                3.定义一个定时器，每隔3秒调用方法一次。
         */

        //修改图片src属性
        let number = 1;
        function fun(){
    
            number ++ ;
            //判断number是否大于3
            if(number > 3){
    
                number = 1;
            }
            //获取img对象
            let img = document.getElementById("img");
            img.src = "img/banner_"+number+".jpg";
        }

        //2.定义定时器
        setInterval(fun,3000);

    </script>
</body>
</html>

4.动态表格

<!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>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>令狐冲</td>

最低0.47元/天解锁文章

木子津

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
js案例-点击+电灯开关+轮播图+动态表格+表格全选+登录表格验证

案例1.点击<body> <img id="light" src="img/off.gif" onclick="fun();"> <img id="light2" src="img/off.gif"> <script> function fun(){ alert('我被点了'); alert('我又被点了'); } function fun2()
复制链接

扫一扫