JS实例3
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的更多相关文章
- Vue.js实例练习
最近学习Vue.js感觉跟不上节奏了,Vue.js用起来很方便. 主要实现功能,能添加书的内容和删除.(用的Bootstrap的样式)demo链接 标题用了自定义组件,代码如下: components ...
- JS实例
JS实例 1.跑马灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...
- 【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型
前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法6.操作方法 ...
- [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码
MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下 一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...
- 百度地图整合功能分享修正版[ZMap.js] 实例源码!
ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...
- jquery.validate.js实例演示
validate是前端重要的交互手段,提升性能的同时更能提升用户操作体验,validate的实现大概有三种方式:HTML5部分支 持,validate验证框架,手动写js或ajax调用接口.使用val ...
随机推荐
- AlphaRacks 2018年黑五 VPS $3.99/年
发现这么久了这些链接还是能购买.算是捡了便宜了. 搭建shadowsocks非常合算. 我买了6.99美元的那个. VPS OVZ构架 1核/125MB/5GB/800GB流量/1 IPv4/OVZ/ ...
- iOS之WKWebView加载的网页自适应大小
一,前言 有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢? 以下代码可以适配大小(原本不可以 ...
- [knowledge] 停止等待协议
再读TCP/IP详解 说到流量控制, 可能便涉及了两方面 1. 停止等待协议. https://baike.baidu.com/item/%E5%81%9C%E6%AD%A2%E7%AD%89%E5% ...
- Linux中常用命令
.cd命令 cd 回到跟目录 cd uqihong 进入到uqihong这个文件夹(且cd命令只能一级一级的进入) 2.复制命令 cp -r /usr/local/tomcat ...
- 【PyQt5-Qt Designer】界面布局
PyQt5 界面布局详谈 箱式布局 QHBoxLayout和QVBoxLayout是基本的布局类,它们在水平和垂直方向上排列小部件 效果图: from PyQt5.QtCore import Qt f ...
- Python 字符串常用方法总结
明确:对字符串的操作方法都不会改变原来字符串的值 1,去掉空格和特殊符号 name.strip() 去掉空格和换行符 name.strip('xx') 去掉某个字符串 name.lstrip() ...
- Linux I/O重定向
所谓I/O重定向简单来说就是一个过程,这个过程捕捉一个文件,或者命令,程序,脚本,甚至脚本中的代码块的输出,然后把捕捉到的输出,作为输入 发送给另外一个文件,命令,程序,或者脚本.谈到I/O重定向,就 ...
- Intellij IDEA中修改Maven项目的项目名称
1. 原项目名:votesystem-redis 想要重命名成新项目名:votesystem 2. 我们对此项目名进行Rename 3. 再对此项目所在的目录下进行修改 4. 重新打开项目 若 ...
- Raid5之后安装系统,挂载磁盘
配置RAID5 略 2.U盘安装centos系统(我的版本是centos7.0) 这一步骤网上很多,可以参考这篇:http://jingyan.baidu.com/article/359911f571 ...
- [LeetCode] 374. Guess Number Higher or Lower_Easy tag: Binary Search
We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...