JavaScript 示例
<html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div id="i1">泥瓦匠疯狂当上了飞机了看电视</div> <script> //创建一个函数 function func() { // 根据ID获取指定标签的内容，定于局部变量接收 var tag = document.getElementById(‘i1‘); // 获取标签内部的内容 var content = tag.innerText; // 获取内容第一个字符 var f = content.charAt(0); // 获取第二个字符到最后一个字符 var l = content.substring(1,content.length); // 字符串拼接 var new_content = l + f; // 赋值替换变量，显示浏览器中 tag.innerText = new_content; } // 定时器执行函数 setInterval(‘func()‘,500) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 隐藏标签 */ .hide { display: none; } /* 页面1 */ .c1 { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } /* 页面2 */ .c2 { width: 500px; height: 400px; background: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <!-- 去掉body两边默认边距 --> <input style="margin: 0;"/> <div> <!-- 添加按钮 --> <input type="button" value="添加" onclick="ShowModel()"/> <input type="button" value="全选" onclick="ChooseAll()"/> <input type="button" value="取消" onclick="CancleAll()"/> <input type="button" value="反选" onclick="ReverseAll()"/> <!-- 指定表格标签 --> <table> <!-- 指定表头 --> <thead> <!-- 指定行标签 --> <tr> <!-- 指定列标签 --> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <!-- 设置表内容,定义值 --> <tbody id="tb"> <!-- 指定行标签 --> <tr> <!-- 指定列标签,第一列为选择框--> <td><input type="checkbox"/></td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox"/></td> <td>1.1.1.2</td> <td>191</td> </tr> </tbody> </table> </div> <!-- 遮罩层开始 --> <div id="i1" class="c1 hide"></div> <!-- 弹出框开始 --> <div id="i2" class="c2 hide"> <p><input type="text"/></p> <p><input type="text"/></p> <p> <!-- 添加标签到页面1 --> <input type="button" value="取消" onclick="HideModel();"/> <input type="button" value="确认"/> </p> </div> <script> /* 删除关闭标签 */ function ShowModel() { document.getElementById(‘i1‘).classList.remove(‘hide‘); document.getElementById(‘i2‘).classList.remove(‘hide‘); } /* 添加关闭标签 */ function HideModel() { document.getElementById(‘i1‘).classList.add(‘hide‘); document.getElementById(‘i2‘).classList.add(‘hide‘); } /* 添加全选标签 */ function ChooseAll() { var tbody = document.getElementById(‘tb‘); // 获取所有的tr var tr_list = tbody.children; for (var i = 0; i < tr_list.length; i++) { // 循环所有的tr,current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; // checked 修改点击框 checkbox.checked = true; } } /* 添加取消标签 */ function CancleAll() { var tbody = document.getElementById(‘tb‘); // 获取所有的tr var tr_list = tbody.children; for (var i = 0; i < tr_list.length; i++) { // 循环所有的tr,current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } /* 添加反选标签 */ function ReverseAll() { var tbody = document.getElementById(‘tb‘); // 获取所有的tr var tr_list = tbody.children; for (var i = 0; i < tr_list.length; i++) { // 循环所有的tr,current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; if (checkbox.checked) { checkbox.checked = false; } else { checkbox.checked = true; } } } </script> </body> </html>
原文：https://www.cnblogs.com/xiangsikai/p/10417596.html
