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>
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提交表单
<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>
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>
左侧菜单
JavaScript 示例的更多相关文章
- 【译】10个机器学习的JavaScript示例
原文地址:10 Machine Learning Examples in JavaScript 在过去的每一年,用于机器学习(Machine Learning)的库在变得越来越快和易用.一直以来Pyt ...
- DOM&JavaScript示例&练习
以下示例均为html文件,保存至本地就可直接用浏览器打开以查看效果\(^o^)/~ 练习一:设置新闻字体 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
- JavaScript示例
<!DOCTYPE html> <html> <head> <title>单击按钮事件示例</title> <script langu ...
- Javascript -- 示例：多选下拉选框
1. 示例:多选下拉选框 <html> <head> <meta http-equiv="Content-Type" content="te ...
- 一天JavaScript示例-在功能上的标量参数和数组参数的差异
<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h ...
- 一个用于每一天JavaScript示例-使用缓存计算（memoization）为了提高应用程序性能
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 一天JavaScript示例-点击图片显示大图片添加鼠标
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 一天JavaScript示例-判定web页面的区域
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 一个用于每一天JavaScript示例-SVG中间javaScript画廊
<?xml version="1.0" standalone="no"? > <!DOCTYPE svg PUBLIC "-//W3 ...
随机推荐
- 【Static Program Analysis - Chapter 1】 Introduction
Regarding correctness, programmers routinely use testing to gain confidence that their programs work ...
- java高级---->Java观察者的原理
观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态上发生变化时,会通知所有观察者对象,让他们能够自动更新自己.今天我们通过模拟按钮的处理事件来深入Java ...
- [Ubuntu] Git可视化比较工具 P4Merge 的安装/配置及使用
1 下载 下载地址. 链接到上面的下载页后,先找到左边导航的 Clients ,如下图 1 所示. 接着找到 P4Merge: Visual Merge Tool , 如下图 2 所示. 最后,选择好 ...
- [原][openstack-pike][controller node][issue-3][horizon] dashboard show internal error 500 Cannot serve directory /var/www/html
问题点: 安装完pike后发现只能使用 ip:80 登录到http的主页面 不能使用 http://controller_ip:80/dashboard 登录openstack登录页面.如下图 重启h ...
- Ubuntu 安装mono
Ubuntu 安装mono 我的系统:Ubuntu 16 Mono参考: http://www.mono-project.com/docs/getting-started/install/linu ...
- Oracle tablespace 创建表空间
定义: 表空间是一个逻辑概念,它的所有数据和结构信息都存储在一个或多个数据文件中,表空间属于数据库的一部分.数据库自带有几个表空间,如system,temp.一般系统将创建几个私用或业务的表空间. 模 ...
- ArcGIS AddIn 图斑比例分割工具，调用捕捉功能
最近做一个图斑按比例分割的工具,需要绘制一条用以切割的方向线,通过Tool的方式实现 绘制时希望能够使用捕捉功能,查阅相关资料如下: 使用该文章,第Implementing snapping in a ...
- ThinkPHP 缓存技术详解 使用大S方法
如果没有缓存的网站是百万级或者千万级的访问量,会给数据库或者服务器造成很大的压力,通过缓存,大幅减少服务器和数据库的负荷,假如我们把读取数据的过程分为三个层,第一个是访问层,第一个是缓存层,第三个是数 ...
- python----下载与安装
在 Windows 上安装 Python 在 Windows 上安装 Python 请按如下步骤进行. 首先,登录 https://www.python.org/downloads/ 页面,可以在该页 ...
- linux之sed的使用
基本介绍 sed是stream editor的缩写,一种流编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲 ...