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 ...
随机推荐
- maven 中的mirror详解
一.前言 今天同事遇到个问题,本来公司是有maven私服的,但同事觉得上面有些东西下载不到,于是在自己本地的maven配置中加了: <mirrors> <mirror> < ...
- javascript变量作用域 全局及局部
$("#inStartTime").datetimepicker({ format: 'yyyy-mm-dd hh:ii', autoclose: true, todayBtn: ...
- Python——rrdtool模块的安装
一.Centos环境yum命令安装 yum install rrdtool rrdtool-devel 二.源码安装 wget https://pypi.python.org/packages/99/ ...
- Java基础&面向对象（二）
(七)函数 1.数的定义:具有特定功能的一段小程序,也称为方法: 2.函数的特点: 3.函数的应用:结果.是否需要未知内容参与运算: 4.函数的重载:在同一个类中,允许存在一个以上的同名函数,只要它们 ...
- Codeforces 1090B - LaTeX Expert - [字符串模拟][2018-2019 Russia Open High School Programming Contest Problem B]
题目链接:https://codeforces.com/contest/1090/problem/B Examplesstandard input The most famous characters ...
- LeetCode 19 - 删除链表的倒数第N个节点 - [链表]
题目链接:https://leetcode-cn.com/problems/remove-nth-node-from-end-of-list/ 题解: 两个 $p,q$ 指针均指向头,然后 $q$ 先 ...
- Codeforces 706C - Hard problem - [DP]
题目链接:https://codeforces.com/problemset/problem/706/C 题意: 给出 $n$ 个字符串,对于第 $i$ 个字符串,你可以选择花费 $c_i$ 来将它整 ...
- bug修复记录
telnet 网址 ping netaddr traceroute netaddr ,这是一个linux下的命令可以通过Vmmap观察程序运行时所需要的依赖库协议里面涉及到数组的, 一定要判断最大值 ...
- MAVEN day04 SSH之分模块开发
一.创建父工程 1.选择>>"Maven Project"创建Maven工程.并且选择Packaging为 POM. 创建父工程主要是让子工程区继承父工程,减少冗余,多 ...
- MongoDB 目录
MongoDB 介绍 centos7.6 安装与配置 MongoDB yum方式 MongoDB 数据库操作 MongoDB 用户管理 MongoDB 新建数据库和集合 查询集合 MongoDB 增删 ...