window.setInterval("Time()",1);

    	function Time()

		{

			var date = new Date();//当前时间函数

			var n = date.getFullYear();//年

			var y = date.getMonth()+1;//月注意+1

			var r = date.getDate();//日

			var x = date.getHours();//时

			var f = date.getMinutes();//分

			var m = date.getSeconds();//秒

			var h = date.getMilliseconds() //获取毫秒

			var str = "当前时间："+n+"年"+y+"月"+r+"日"+x+":"+f+":"+m+":"+h;//字符串拼接

			document.getElementById("date").innerHTML = str;//效果和/*date=document.getElementById("date");
                        date.innerHTML = str*/一样

		}

二

第一步先布局一个大div然后在里面布局三个小div然后做一个下拉列表

    <head>

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

        <title>无标题文档</title>

        <style type="text/css">

        	*{

				margin:0px auto;

				padding:0px;

				}

			#wai{

				width:500px;

				height:500px;

				}

			#zuo{

				float:left;

				width:200px;

				height:500px;

				}

			#zhong{

				float:left;

				width:100px;

				height:500px;

				}

			#you{

				float:left;

				width:200px;

				height:500px;

				}

        </style>

    </head>

    <body>

        <div id="wai">

        	<div id="zuo">

            	<select multiple="multiple" id="znr" style="width:200px; height:200px;">

                	<option value="山东">山东</option>

                    <option value="淄博">淄博</option>

                    <option value="张店">张店</option>

                </select>

            </div>

            <div id="zhong">

            	<div style="margin-left:25px; margin-top:20px;"><input type="button" value=">>" style="width:50px;"  /></div>

                <div style="margin-left:25px; margin-top:20px;"><input type="button" value=">" style="width:50px;" /></div>

            </div>

            <div id="you">

            	<select id="ynr" multiple="multiple" style="width:200px; height:200px;">

                </select>

            </div>

        </div>

    </body>

加点击事件onclick

<div style="margin-left:25px; margin-top:20px;"><input type="button" value=">>" style="width:50px;" onclick="Moveall()" /></div>

<div style="margin-left:25px; margin-top:20px;"><input type="button" value=">" style="width:50px;" onclick="Moveone()"/></div>

先做第二个一个一个选择的

		function Moveone()

		{

			var left = document.getElementById("znr");//获取id的元素

			var right = document.getElementById("ynr");

			var lz = left.value;//获取value属性

			var str;//定义变量

			str ="<option value='"+lz+"'>"+lz+"</option>";//字符串拼接

			var bs=0;//随便设置

			for(var i=0;i<right.childNodes.length;i++)

			{

				if(right.childNodes.item(i).text == lz)

				//right.childNodes.item(i).text=select下子元素里每个索引对应的文本

				{

					bs = 1;//只要不等于0就行

				}

			}

			if(bs==0)

			{

				right.innerHTML = right.innerHTML+str;//

			}

		}

复选的

		function Moveall()

		{

			var left = document.getElementById("znr");

			var right = document.getElementById("ynr");

			right.innerHTML = left.innerHTML;

		}

JS实例3的更多相关文章

  1. Vue.js实例练习

    最近学习Vue.js感觉跟不上节奏了,Vue.js用起来很方便. 主要实现功能,能添加书的内容和删除.(用的Bootstrap的样式)demo链接 标题用了自定义组件,代码如下: components ...

  2. JS实例

    JS实例 1.跑马灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  4. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  5. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...

  6. 【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型

    前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法6.操作方法 ...

  7. [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码

    MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...

  8. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

  9. 百度地图整合功能分享修正版[ZMap.js] 实例源码!

    ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...

  10. jquery.validate.js实例演示

    validate是前端重要的交互手段,提升性能的同时更能提升用户操作体验,validate的实现大概有三种方式:HTML5部分支 持,validate验证框架,手动写js或ajax调用接口.使用val ...

随机推荐

  1. kafka实战读书笔记

    1.katka_2.12-l.0.0.tgz 上面两个文件中的 2.11 /2.12 分别表示编译 Kafka 的 Scala 语言版本,后面的 1.0 .0 是 Kafka的版本 . 2.kafka ...

  2. 转：Java 异常结构体系

    原文地址:Java 异常结构体系 保存一份资料 前几天在参加网易和360公司的在线考试的时候,都出了一道关于java中异常类的多项选择题.这几天翻看了相关书籍和网上一些资料,结合自己的理解与思考,将自 ...

  3. linux下nodejs的安装

    一.下载 https://nodejs.org/en/download/ 然后,解压 二.配置环境变量 配置环境变量:在/etc/profile文件新增:export NODE_HOME=/usr/l ...

  4. Java如何循环数组并使用Split

    场景: 当写方法时遇到1个参数有3个值, 该参数类型为数组.    例如:  aaa|bbb|ccc  .  而且需要循环打印,这个时候我们就需要用数组循环输出的方法. 一:feature 示例 Wh ...

  5. P4491 [HAOI2018]染色

    题目链接:洛谷 题目大意:$n$个位置染$m$种颜色,如果出现次数恰为$S$次的颜色有$k$种,则对答案有$W_k$的贡献,求所有染色方案的答案之和$\bmod 1004535809$. 数据范围:$ ...

  6. JavaWeb学习总结——文件上传和下载

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

  7. 七、Spring Boot 启动配置原理

    几个重要的事件回调机制 配置在META-INF/spring.factories ApplicationContextInitializer SpringApplicationRunListener ...

  8. spring学习(01)之IOC

    spring学习(01)之IOC IOC:控制反转——Spring通过一种称作控制反转(IOC)的技术促进了低耦合.当应用了IOC,一个对象依赖的其它对象会通过被动的方式传递进来,而不是这个对象自己创 ...

  9. 类的copy和deepcopy

    - (instancetype)initWithName:(NSString *)name age:(NSUInteger)age sex:(CYLSex)sex { if(self = [super ...

  10. 解决无法连接到 reCAPTCHA 服务

    今天ytkah在查询一个信息时需要人机验证,但提示“无法连接到 reCAPTCHA 服务”,通过修改host文件可以解决相关问题,用editplus或notepad打开C:\Windows\Syste ...