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>
<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>

<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>

Dom全选反选遮罩层弹框

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>
-----------------------------------------------------

Dom提交表单

单次多次定时器

// 删除操作：删除成功后提示删除成功，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>

TAB切换菜单

<!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>