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. 2017年蓝桥杯省赛A组c++第1题(走迷宫)

    /* 标题:迷宫 X星球的一处迷宫游乐场建在某个小山坡上. 它是由10x10相互连通的小房间组成的. 房间的地板上写着一个很大的字母. 我们假设玩家是面朝上坡的方向站立,则: L表示走到左边的房间, ...

  2. Asp.net中"正在中止线程"错误解决方法

    项目中出现“正在中止线程”问题,百度后台发现,都是因为用到Response.End.Response.Redirect 或 Server.Transfer 方法. 原因: Response.End 方 ...

  3. oracle的undo表空间

    undo表空间是Oracle特有的概念.undo表空间中会自动分配undo段,这些undo段用来保存事务中的DML语句的undo信息,也就是来保存数据在被修改之前的值.在rollback,实例恢复(回 ...

  4. (1)DBA查询:数据库

    1.数据库状态:[1]sys.databases   [2]exec sp_spaceused 2.数据文件状态:[1]sys.master_files [2]查看ldf与mdf:sp_helpfil ...

  5. 20170725 Python 必须使用的Url编码

    -- 1 原因:在进行API 调用传参时,如果出现了和区分参数标识一样的特殊字符,那么就需要编码来作用 或者,传递的参数有敏感数据. 我的目的: Python开发的接口,C#调用传递参数 先用C# 进 ...

  6. 爬虫解析库——BeautifulSoup

    解析库就是在爬虫时自己制定一个规则,帮助我们抓取想要的内容时用的.常用的解析库有re模块的正则.beautifulsoup.pyquery等等.正则完全可以帮我们匹配到我们想要住区的内容,但正则比较麻 ...

  7. vue-filter

  8. Linux小脚本

    将固定的换包步骤,做成脚本replacePackage.sh,赋予执行权限(chmod +x   replacePackage.sh).这样小小自动化也能节约时间呀. replacePackage.s ...

  9. 尾递归与Continuation(转载)

    递归与尾递归 关于递归操作,相信大家都已经不陌生.简单地说,一个函数直接或间接地调用自身,是为直接或间接递归.例如,我们可以使用递归来计算一个单向链表的长度: public class Node { ...

  10. abap form格式的异常处理

    1: form 中有异常时,需要用 raising 将异常抛出. *&------------------------------------------------------------- ...