JavaScript 示例
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>
1、input内显示请输入关键字 2、input鼠标点击后变为空 3、input鼠标离开扔是空则变为请输入关键字 ------------------------------------------------------ <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div style="width: 600px;margin: 0 auto;"> <input id="i1" onfocus="Focus();" onblur="Blur()" type="text" value="请输入关键字"/> </div> <script> function Focus() { var tag = document.getElementById('i1'); var val = tag.value; if (val == "请输入关键字") { tag.value = ""; } } function Blur() { var tag = document.getElementById('i1'); var val = tag.value; if (val.length == 0) { tag.value = "请输入关键字"; } } </script> </body> </html> ------------------------------------------------------
<body> <input type="button" onclick="AddEle1();" value="+"/> <input type="button" onclick="AddEle2();" value="+"/> <div id="i1"> <p><input type="text"/> <p/> </div> <script> function AddEle1() { // 方法一 // 新建添加标签 var tag = "<p><input type='text' /><p/>"; // 指定添加标签 document.getElementById('i1').insertAdjacentHTML("beforeEnd", tag); } function AddEle2() { // 方法二 // 新建添加标签 var tag = document.createElement('input'); // 新建添加属性 tag.setAttribute('type', 'text'); // 新建添加属性样式 tag.style.fontSize = '16px'; tag.style.color = 'red'; // 新建添加标签 var p = document.createElement('p'); // 将标tag签添加到p标签内 p.appendChild(tag); // 指定添加标签 document.getElementById('i1').appendChild(p); } </script> </body>
// 任何标签通过DOM都可以提交表单 document.getElementById('id').submit() ----------------------------------------------------- <body> <form id="f1" action="http://www.baidu.com"> <input type="text"/> <input type="submit" value="提交"/> <a onclick="submitForm();">提交</a> </form> <script> function submitForm() { document.getElementById('f1').submit() } </script> </body> </html> -----------------------------------------------------
<script> // 一、持续执定时器 // 创建持续执行定时器对象 var obj1 = setInterval(function () { console.log(1) }, 1000); // 二、定时器没执行之前就删除 // 创建持续执行定时器对象 var obj2 = setInterval(function () { console.log(1) }, 1000); // 删除定时器对象 clearInterval(obj); // 三、定时器只执行一次 // 创建持续执行定时器对象 var obj3 = setInterval(function () { console.log(1); // 删除定时器对象 clearInterval(obj); }, 1000); // 四、定时器只执行一次 setTimeout(function () { console.log('1'); }, 5000) </script>
// 删除操作：删除成功后提示删除成功，5秒后提示自动消失 ------------------------------------------------------ <body> <div id="status"></div> <input type="button" value="删除" onclick="DeleteEle();"/> <script> function DeleteEle() { document.getElementById('status').innerText = "删除成功"; var del = setTimeout(function () { document.getElementById('status').innerText = ""; }, 5000); // 终止定时器 //clearTimeout(del)； } </script> </body> ------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*设置边框间距*/ .container { padding: 50px; border: 1px solid #eeeeee; } /*固定边距大小*/ .item { position: relative; width: 30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> // 点击标签触发事件 $('.item').click(function () { // 执行函数传入点击标签 AddFavor(this) }); // 点赞函数 function AddFavor(self) { // 创建边距变量 var fontSize = 15; var top = 0; var right = 0; var opacity = 1; // dom对象 创建span标签 var tag = document.createElement('span'); // 向span标签内添加+1内容 $(tag).text('+1'); // 设置字体颜色为绿色 $(tag).css('color', 'green'); // 添加依据父标签固定位置 $(tag).css('position', 'absolute'); // 添加设置边距大小 $(tag).css('fontSize', fontSize + "px"); $(tag).css('right', right + "px"); $(tag).css('top', top + "px"); $(tag).css('opacity', opacity); // 传入span标签到指定标签下 $(self).append(tag); // 创建定时器持续时间为4秒 var obj = setInterval(function () { // 添加持续值 fontSize = fontSize + 10; top = top - 10; right = right - 10; // 减少透明度 opacity = opacity - 0.1; // 赋值变量 40毫秒执行一次函数 $(tag).css('fontSize', fontSize + "px"); $(tag).css('right', right + "px"); $(tag).css('top', top + "px"); $(tag).css('opacity', opacity); // 判断透明度到看不见时就终端 if (opacity < 0) { // 删除定时器 clearInterval(obj); // 删除标签 $(tag).remove(); } }, 40); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*去掉标签*/ .hide { display: none; } /*菜单样式*/ .menu { height: 38px; background-color: #eeeeee; } /*菜单一样式*/ .menu .menu-item { float: left; border-right: 1px solid red; padding: 0 5px; /*显示小手*/ cursor: pointer; } /*菜单点击色样式*/ .active { background-color: brown; } /*内容样式*/ .content { min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <!--菜单内容--> <div style="width: 700px;margin: 0 auto;"> <div class="menu"> <div class="menu-item active">菜单一</div> <div class="menu-item">菜单二</div> <div class="menu-item">菜单三</div> </div> <div class="content"> <div b="1">内容一</div> <div class="hide">内容二</div> <div class="hide">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function () { // 出发事件上色，并将其他兄弟标签作色去掉 $(this).addClass('active').siblings().removeClass('active'); // 获取每个标签的索引数 var v = $(this).index(); // 查找菜单与内容对应的标签，显示内容标签，并给其他标签添加hide $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide'); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*关闭标签*/ .hide { display: none; } /*弹窗样式*/ .modal { position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background: #eeeeee; z-index: 10; } /*遮罩层样式*/ .shadow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } </style> </head> <body> <!--添加框--> <a onclick="addElement();">添加</a> <!--列表--> <table border="1" id="tb"> <tr> <td target="hostname">1.1.1.1</td> <td target="port">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">2.1.1.1</td> <td target="port">90</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">3.1.1.1</td> <td target="port">100</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> </table> <!--弹窗--> <div class="modal hide"> <div> <input name="hostname" type="text"/> <input name="port" type="text"/> </div> <div> <input type="button" value="取消" onclick="cancelModal();"/> <input type="button" value="确定" onclick="confirmModel();"/> </div> </div> <!--遮罩层--> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> function addElement() { // 触发事件后弹出遮罩层与弹窗 $(".modal,.shadow").removeClass('hide'); } function cancelModal() { // 触发事件后删除遮罩层与弹窗 $(".modal,.shadow").addClass('hide'); // 清空input数据以免混淆 $('.modal input[type="text"]').val(""); } function confirmModel() { // 方案一 // 静态添加 // 新建tr标签 var tr = document.createElement('tr'); // 新建td标签 var td1 = document.createElement('td'); // 添加td标签数据 td1.innerHTML = "11.11.11.11"; // 添加td标签数据 var td2 = document.createElement('td'); td2.innerHTML = "8001"; // td标签放入tr标签内，将dom通过$（）转换为jquery $(tr).append(td1); $(tr).append(td2); // 放入table标签 $('#tb').append(tr); // 确定后取消弹框 $('.modal,.shadow').addClass('hide'); } $('.edit').click(function () { // this当前点击的标签 // 触发事件后弹出遮罩层与弹窗 $('.modal,.shadow').removeClass('hide'); // 获取横向所有内容的标签 var tds = $(this).parent().prevAll(); tds.each(function () { // 获取td中的target属性值 var n = $(this).attr('target'); // 获取td中的内容 var text = $(this).text(); // 字符串拼接获取相应属性 $('.modal input[name="' + n + '"]').val(text); }); }); $('.del').click(function () { // 删除行 $(this).parent().parent().remove() }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkAll();"/> <input type="button" value="反选" onclick="reverseAll();"/> <input type="button" value="取消" onclick="cancleAll();"/> <table border="1"> <thead> <tr> <th>选项</th> <th>IP</th> <th>端口</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>2.1.1.1</td> <td>90</td> </tr> <tr> <td><input type="checkbox"></td> <td>3.1.1.1</td> <td>100</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() { // 给每一个标签进行指定操作 $(':checkbox').prop('checked', true); } function cancleAll() { $(':checkbox').prop('checked', false); } function reverseAll() { // .each循环选中的每一个元素 $(':checkbox').each(function () { /* // 方案一 // this,代指当前循环的每一个元素 if(this.checked){ this.checked = false; }else{ this.checked = true; } */ /* // 方案二 // .prop如果被选中checked拿到的结果是true、反之false if ($(this).prop('checked')){ // .prop传一个参数为获取值、传两个参数为设置值 $(this).prop('checked',false); }else{ $(this).prop('checked',true); } */ // 方案三 // 三元运算：var v = 条件？ 真值：假值 var v = $(this).prop('checked') ? false : true; $(this).prop('checked', v); }) } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header { background-color: black; color: white; } .content { min-height: 50px; } .hide { display: none; } </style> </head> <body> <div style="height: 400px;width: 200px; border: 1px solid #eeeeee;"> <div class="item"> <div class="header">标题一</div> <div id='i1' class="content">内容</div> </div> <div class="item"> <div class="header">标题二</div> <div class="content hide">内容</div> </div> <div class="item"> <div class="header">标题三</div> <div class="content hide">内容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> // 把所有class=header的标签全部绑定一个onclick事件 $('.header').click(function () { // 当前点击的标签$(this) // 方案二 // 获取某个标签的下一个标签、删除class hide $(this).next().removeClass('hide'); // 查找每个兄弟标签内带有class=".content"的标签 $(this).parent().siblings().find('.content').addClass('hide'); // 方案一 // jQuery 支持链式编程 // $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide'); }) </script> </body> </html>
