web网页常见特效1（原生JavaScript）

全选和不全选

// An highlighted block
 
 <script>
        // 1.获取元素 j_cbAll(全选按钮)
        // 全选按钮
        var j_cbAll = document.getElementById('j_cbAll'); 
 
        // 2. 获取下面所有的复选框
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
        //3.当全选状态选中时，让所有的复选框也选中
        j_cbAll.onclick = function () {
            //当全选按钮选中，遍历每一个小复选框，让小复选框的check和全选状态一致，就实现了全选和不全选
            for (let i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked
            }
        }
        //4.当全部小的复选框选中时，让全选框也选中
        //通过for循环遍历每一个小的复选框为其绑定
        for (var i = 0; i < j_tbs.length; i++) {
            //关键点在于这个标志位flag
            //首先默认为true，在每一次点击都会在循环查看小复选框的选中状态，如果有一个没有选中,，全选按钮就是false
            var flag = true
            j_tbs[i].onclick = function () {
                for (var i = 0; i < j_tbs.length; i++) {
                    //
                    if (j_tbs[i].checked == false) {
                        flag = false;
                        break;
                    }
                }
                j_cbAll.checked = flag
            }
        }
    </script>

todolist

	//获取input输入框
	var input = document.querySelector('.inputtxt');
	//获取button按钮元素
	var btn = document.querySelector('.inputbtn');
	// 获取ul元素
	var list = document.querySelector('.list');
	//思路：当btn点击，创建一个li，并把input输入框的value内容赋值给li，然后把li添加到ul第一个位置里面，最后清空input框
	btn.onclick = function () {
		//最后发现如果没输入内容点击也会添加li，这时候就需要对input内容进行判断，如果为空就需要提示输入内容
		if (input.value.length!=0) {
			//点击之后创建li
			var li = document.createElement('li');
			// 把input输入框的值给li
			li.innerHTML = input.value;
			// 把li添加到ul的第一个位置
			list.insertBefore(li, list.children[0]);
			//清空输入框内容
			input.value = ''
		}else{
			alert('请输入内容')
		}
	}

动态创建表格

<table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
   // 步骤1：准备好学生的数据，这一步同学们要想起之前的一个知识点：
        // 用对象存储一个物体多方面的信息
        // 用数组存储多个  结构、数据类型相同  的物体
        var datas = [{
            name: '魏璎珞',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '弘历',
            subject: 'JavaScript',
            score: 80
        }, {
            name: '傅恒',
            subject: 'JavaScript',
            score: 91
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score: 88
        }, {
            name: '大猪蹄子',
            subject: 'JavaScript',
            score: 99
        }];
        //思路：
        //1.首先要创建tr，（有多少个tr呢？有多少个对象就有多少个tr）
        //2.创建td（有多少个td呢，一个对象有多少个属性，就有多少个td）
        //3.将对象 的值作为td的内容
        //4.再次创建td，作为删除一栏
        //5.点击删除，删除这一栏li
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            // 创建tr
            var tr = document.createElement('tr');
            //遍历数组中的每一个对象
            for (var key in datas[i]) {
                // 创建td，并给td添加对象中的属性
                var td = document.createElement('td');
                td.innerHTML = datas[i][key];
                //将td添加到tr里
                tr.appendChild(td)
            }
            //把tr添加到tbody里面
            tbody.appendChild(tr);
            //创建最后一个td，作为删除栏
            var td = document.createElement('td');
            td.innerHTML = '<a href = "javascript:;">删除</a>'
            tr.appendChild(td)
            //对删除做点击操作
            var a = document.querySelectorAll('a');
            for (var i = 0; i < a.length; i++) {
                a[i].onclick = function () {
                    //点击删除，删掉li这一整行
                    this.parentNode.parentNode.removeChild(this.parentNode.parentNode)
                }
            }
        }

<button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <div>
        <span class="hour">00</span>:
        <span class="minute">00</span>:
        <span class="second">00</span>
    </div>
    <script>

        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var inputTime = +new Date('2022-5-8 15:00:00');
        var timer = null
        // 响应begin的点击事件
        begin.onclick = function () {
            // 开始倒计时
            countDown() 
            timer = setInterval(()=>{
                countDown()
            },1000)
        }
        // 响应stop的点击事件
        stop.onclick = function () {
           clearInterval(timer)
        }
        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }

    </script>