1、模拟bootstrap中的模态框

效果图：（点我后，弹出对话框，最下面的内容可以看到，但是有一定的透明度。）

思路分析：

整体分为三层，最底层（点我），中间透明层（实现透明效果），最顶层（最新内容展示）

很明显，三个div就可以实现，正常情况上面2层div隐藏起来，通过点击“点我”后，上面2层div浮现出来，这样就实现了动画效果。

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>小白教程</title>

</head>

<body>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

	body{

	　　 margin:0;

	}

        .back{

            background-color:yellow;

            height: 2000px;

        }

        .shade{

            position: fixed;

            top: 0;

            bottom: 0;

            left:0;

            right: 0;

            background-color: blue;

            opacity: 0.2;

        }

        .hide{

            display: none;

        }

        .models{

            position: fixed;

            top: 50%;

            left: 50%;

            margin-left: -100px;

            margin-top: -100px;

            height: 200px;

            width: 200px;

            background-color: red;

        }

	#ID1{

		margin-left:500px;

		margin-top:200px;

	}

	#ID2{

		float:right;

	}

    </style>

</head>

<body>

<div class="back">

    <input id="ID1" type="button" value="点我" onclick="action('show')">

</div>

<div class="shade hide"></div>

<div class="models hide">

    <input id="ID2" type="button" value="取消" onclick="action('hide')">

</div>

<script>

    function action(act){

		//获取遮罩层节点、最外层节点

        var shadeNode=document.getElementsByClassName("shade")[0];

        var topNode=document.getElementsByClassName("models")[0];

		//点我后，如果参数为show，则遮罩层和最外层展示出来；如果参数为hide，则遮罩层和最外层隐藏起来。

        if(act=="show"){

              shadeNode.classList.remove("hide");

              topNode.classList.remove("hide");

        }else {

              shadeNode.classList.add("hide");

              topNode.classList.add("hide");

        }

    }

</script>

</body>

</html>

</body>

</html>

　　

知识点分析：

1、body设置margin为0.保证html页面置顶。

2、遮罩层和最外层的position为fixed；

3、遮罩层铺满屏幕，top、right、bottom、left都设为0；

4、最外层位置居中，这个重点说一下：

一般情况下，我们设置最外层div的距离top为50%，left为50%。

但是，这个和我们预想的有些差距，因为div本身有高度和宽度，所以看上去不是居中的位置，这时候我们需要把div整体向上、向左移动50%（height和width）。

            top: 50%;

            left: 50%;

            margin-left: -100px;

            margin-top: -100px;

            height: 200px;

            width: 200px;

　　

2、全选、反选

实现效果：

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>小白教程</title>

<style>

 #selected{

	position:fixed;

	width:50%;

	height:50%;

	margin-left:300px;

	border:1px solid red;

 }

</style>

</head>

<body>

<div id='selected'>

	<button onclick="select('all');">全选</button>

     <button onclick="select('cancel');">取消</button>

     <button onclick="select('reverse');">反选</button>

     <table border="1" id="Table">

         <tr>

             <td><input type="checkbox"></td>

             <td>选项一</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>选项二</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>选项三</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>选项四</td>

         </tr>

     </table>

</div>

</body>

<script>

    function select(choice){

		//获取table元素

        var table=document.getElementById("Table");

		//获取table下面的所有input标签

        var inputs=table.getElementsByTagName("input");

		//循环input标签

        for (var i=0;i<inputs.length;i=i+1){

			//针对每个input

            var element_input=inputs[i];

			//如果为全选，则每个input都为true

            if (choice=="all"){

                element_input.checked=true;

			//如果为取消，则每个input都为false

            }else if(choice=="cancel"){

                element_input.checked=false;

            }

			//如果为反选，则将selected的取消即可。

            else {

                if (element_input.checked){

                    element_input.checked=false;

                }else {

                    element_input.checked=true;

                }

            }

            }

    }

</script>

</html>

　　

3、多级联动

实现效果：

代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>小白教程</title>

<style>

   select{

		width:150px;

   }

</style>

</head>

<body>

<select id="province"></select>

<select id="city"></select>

</body>

<script>

//定义数据

    data={"请选择省":["请选择市"],"湖南省":["长沙","益阳","常德","湘潭","宁乡"],"珠海":["香洲区","金湾区","斗门区"]};

//获取省、市标签

      var p=document.getElementById("province");

      var c=document.getElementById("city");

 //创建option

    for(var i in data){

        var option_pro=document.createElement("option");

        option_pro.innerHTML=i;

        p.appendChild(option_pro);

    }

//省的option有变化，则创建市的option

     p.onchange=function(){

            pro=(this.options[this.selectedIndex]).innerHTML;

            citys=data[pro];

         c.options.length=0;

         for (var i in citys){

             var option_city=document.createElement("option");

             option_city.innerHTML=citys[i];

             c.appendChild(option_city);

         }

        }

</script>

</html>

　　

4、模拟随机码

代码如下：

<!doctype html>

<html>

<head>

<meta charset="gb2312">

<title>小白教程</title>

<style>

.v_code {

  width: 600px;

  margin: 0 auto;

}

.v_code > input {

  width: 60px;

  height: 36px;

  margin-top: 10px;

}

.code_show {

  overflow: hidden;

}

.code_show span {

  display: block;

  float: left;

  margin-bottom: 10px;

}

.code_show a {

  display: block;

  float: left;

  margin-top: 10px;

  margin-left: 10px;

}

.code {

  font-style: italic;

  background-color: #f5f5f5;

  color: blue;

  font-size: 30px;

  letter-spacing: 3px;

  font-weight: bolder;

  float: left;

  cursor: pointer;

  padding: 0 5px;

  text-align: center;

}

#inputCode {

  width: 100px;

  height: 30px;

}

a {

  text-decoration: none;

  font-size: 12px;

  color: #288bc4;

  cursor: pointer;

}

a:hover {

  text-decoration: underline;

}

</style>

<script>

var code;

function createCode() {

  code = "";

  var codeLength = 6; //验证码的长度

  var checkCode = document.getElementById("checkCode");

  var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,

       'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',

       'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');

  for (var index = 0; index < codeLength; index++) {

    var charNum = Math.floor(Math.random() * 52);

    code += codeChars[charNum];

  }

  if (checkCode) {

    checkCode.className = "code";

    checkCode.innerHTML = code;

  }

}

function validateCode() {

  var inputCode = document.getElementById("inputCode").value;

  var textShow = document.getElementById("text_show")

  if (inputCode.length <= 0) {

    textShow.innerHTML = "请输入验证码";

    textShow.style.color = "red";

  } else if (inputCode.toUpperCase() != code.toUpperCase()) {

    textShow.innerHTML = "您输入的验证码有误";

    textShow.style.color = "red";

    createCode();

  } else {

    textShow.innerHTML = "验证码正确";

    textShow.style.color = "green";

  }

}

function checkCode(){

  var btn = document.getElementById("Button1");

  btn.onclick=function(){

    validateCode();

  }

}

window.onload = function () {

  checkCode();

  createCode();

  document.getElementById("checkCode").onclick = function () { createCode() }

  linkbt.onclick = function () { createCode() }

  inputCode.onclick = function () { validateCode(); }

}

</script>

</head>

<body>

  <div class="v_code">

    <div class="code_show">

      <span class="code" id="checkCode"></span>

      <a id="linkbt">看不清换一张</a>

    </div>

    <div class="input_code">

      <label for="inputCode">验证码：</label>

      <input type="text" id="inputCode"/>

      <span id="text_show"></span>

    </div>

    <input id="Button1" type="button" value="确定" />

  </div>

</body>

</html>

　　

5、选项转移

实现代码：

<!doctype html>

<html>

<head>

<meta charset="gb2312">

<title>小白教程</title>

<style>

 #left{

	float:left;

	margin-top:50px;

	margin-left:50px;

 }

 #choice{

	float:left;

	margin-top:50px;

 }

 #right{

	float:left;

	margin-top:50px;

 }

 #outer{

	width:300px;

	height:300px;

	border:1px solid red;

	margin-left:100px;

}

</style>

</head>

<body>

<div id='outer'>

 <div id="box1">

    <select multiple="multiple" size="10" id="left">

        <option>user01</option>

        <option>user02</option>

        <option>user03</option>

        <option>user04</option>

        <option>user05</option>

        <option>user06</option>

    </select>

</div>

<div id="choice">

    <input class="add" type="button" value="-添加-->" onclick="add('right','left',false)"><br>

    <input class="remove" type="button" value="<-反加--" onclick="add('left','right',false)"><br>

    <input class="addall" type="button" value="=添加所有==>" onclick="add('right','left',true)"><br>

    <input class="removeall" type="button" value="<==反添加所有=" onclick="add('left','right',true)">

</div>

<div>

    <select multiple="multiple" size="10" id="right">

        <option>user001</option>

		<option>user002</option>

		<option>user003</option>

		<option>user004</option>

		<option>user005</option>

		<option>user006</option>

    </select>

</div>

</div>

</body>

<script>

function add(arg1,arg2,arg3=false){

	var arg1=document.getElementById(arg1);

	var options=document.getElementById(arg2).getElementsByTagName("option");

	for (var i=0; i<options.length;i++){

		var option=options[i];

		if(arg3==false){

			if(option.selected==true){

				arg1.appendChild(option);

				i--;

			}

		}else{

			arg1.appendChild(option);

			i--;

		}

	 }

 }

</script>

</html>

　　

JavaScript快速入门-实战（例子）的更多相关文章

  1. JavaScript快速入门（四）——JavaScript函数

    函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)——JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...

  2. webpack快速入门——实战技巧：watch的正确使用方法，webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  3. webpack快速入门——实战技巧：开发和生产并行设置

    package.json中,devDependencies和dependencies是不同的 devDependencies:开发依赖 dependencies:生产依赖(线上) 1.安装生产环境的依 ...

  4. webpack快速入门——实战技巧：webpack模块化配置

    首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下: const entry ={}; //声明entry变量 entry.path={ ...

  5. webpack快速入门——实战技巧：优雅打包第三方类库

    下面说两种方法: 一. 1.引入jQuery,首先安装: cnpm install --save jquery 2.安装好后,在我们的entry.js中引入: import $ from 'jquer ...

  6. webpack快速入门——实战技巧：webpack优化黑技能

    1.抽离jquery,vue(多个第三方类库抽离) 修改入口文件(webpack.config.js中) entry: { entry: './src/entry.js', jquery:'jquer ...

  7. logstash快速入门实战指南-Logstash简介

    作者其他ELK快速入门系列文章 Elasticsearch从入门到精通 Kibana从入门到精通 Logstash是一个具有实时流水线功能的开源数据收集引擎.Logstash可以动态统一来自不同来源的 ...

  8. [机器学习]-K近邻-最简单的入门实战例子

    本篇文章分为两个部分,前一部分主要简单介绍K近邻,后一部分是一个例子 第一部分--K近邻简介 从字面意思就可以容易看出,所谓的K近邻,就是找到某个样本距离(这里的距离可以是欧式距离,曼哈顿距离,切比雪 ...

  9. SpringBoot_MyBatisPlus快速入门小例子

    快速入门 创建一个表 我这里随便创建了一个air空气表 idea连接Mysql数据库 点击右侧database再点击添加数据库 找到Mysql 添加用户名,密码,数据库最后点击测试 测试成功后在右侧就 ...

随机推荐

  1. 【SPL标准库专题(1)】 SPL简介

    什么是SPL SPL是Standard PHP Library(PHP标准库)的缩写. 根据官方定义,它是"a collection of interfaces and classes th ...

  2. RBAC用户角色权限设计方案【转载】

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色- ...

  3. RHEL7.3安装mysql5.7

    RHEL7.3 install mysql5.7 CentOS7默认安装MariaDB而不是MySQL,而且yum服务器上也移除了MySQL相关的软件包.因为MariaDB和MySQL可能会冲突,需先 ...

  4. 向kindle传送文件

    自从有了kindle以后,只要不是pdf的电子书,基本上都用kindle来看了,毕竟水墨屏还是很护眼的,但是这就带来了向kindle传输文件的问题 绝大部分的电子书用邮件推送就可以解决了,但是还有一些 ...

  5. 自己模拟写C++中的String类型

    下面是模拟实现字符串的相关功能,它包括一下功能:    String(const char * s);//利用字符串来初始化对象    String(); //默认构造函数    String(con ...

  6. 根据字体多少使UILabel自动调节尺寸

    原文:http://blog.csdn.net/enuola/article/details/8559588 在大多属性情况下,给UILabel进行动态数据绑定的时候,往往需要根据字符串的多少,动态调 ...

  7. ASCII码查看

    字母对照表: ASCII可显示字符: ASCII控制字符:

  8. C语言实现输出杨辉三角

    1.倒推法实现输出杨辉三角右半部分,代码如下: #include<stdio.h> int main() { ]; printf("请输入行数n:"); scanf(& ...

  9. 13.3SolrCloud集群使用手册之Zookeeper指令

    转载请出自出处:http://www.cnblogs.com/hd3013779515/ 1.upconfig java -classpath .:/home/solr/cloud/lib/* org ...

  10. 如何为已有的类没有生成toString的方法增强生成toString方法

    1:只要提到增强,我的第一思路就是代理,动态代理.但是仅仅是一个toString其实没必要使用代理模式了,有点大材小用了(动态代理其实也是最后通过反射生成toString的方法). 2:简单粗暴,可以 ...