js -- 操作练习
2018-08-22 本文已影响58人
GHope
1、下拉框实现左边移动选项到右边，右边移动选项到左边
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左选右移</title>
</head>
<body>
<div >
<select name="beauty" id="beautfull" style="float: left;" onchange="rmove()">
<option value="王昭君">王昭君</option>
<option value="杨玉环">杨玉环</option>
<option value="貂蝉">貂蝉</option>
<option value="西施">西施</option>
</select>
<select name="hero" id="heroes" style="float: right;" onchange="lmove()">
<option value="孔丘">孔丘</option>
<option value="朱熹">朱熹</option>
<option value="董仲舒">董仲舒</option>
<option value="王阳明">王阳明</option>
<option value="李尔">李尔</option>
<option value="庄周">庄周</option>
</select>
</div>
</body>
</html>
<script type="text/javascript">
var obeauty = document.getElementById('beautfull')
var ohero = document.getElementById('heroes')
function rmove(){
var moveValue = obeauty.options[obeauty.selectedIndex].value
alert(moveValue)
ohero.appendChild(obeauty.options[obeauty.selectedIndex])
// ohero.appendChild(moveValue) }
function lmove(){
obeauty.appendChild(ohero.options[ohero.selectedIndex])
}
</script>
下拉菜单选择移动.gif
//单个选择
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下拉框实现</title>
</head>
<body>
<select id="man" style="width:200px;" size="10" multiple="1">
<option value="">秦始皇</option>
<option value="">汉武帝</option>
<option value="">唐太宗</option>
<option value="">明太祖</option>
<option value="">毛主席</option>
</select>
<select id="woman" style="width:200px;" size="10" multiple="1">
<option value="">西施</option>
<option value="">王昭君</option>
<option value="">杨玉环</option>
<option value="">貂蝉</option>
<option value="">宋美龄</option>
</select>
<br><br><br>
<input id="btn1" style="margin-left:40px;" type="button" value="移动到右边">
<input id="btn2" style="margin-left:180px;" type="button" value="移动到左边">
<script>
var oman = document.getElementById('man')
var owoman = document.getElementById('woman')
// 移动到右边的代码
var obtn1 = document.getElementById('btn1')
obtn1.onclick = function () {
// 得到选中框的下标
// alert(oman.selectedIndex)
var index = oman.selectedIndex
// 得到选中的option框
var ooption = oman.options[index]
// 将选中的框，添加到owoman中
owoman.appendChild(ooption)
}
// 移动到左边的代码
var obtn2 = document.getElementById('btn2')
obtn2.onclick = function () {
// 得到选中框的下标
// alert(oman.selectedIndex)
var index = owoman.selectedIndex
// 得到选中的option框
var ooption = owoman.options[index]
// 将选中的框，添加到owoman中
oman.appendChild(ooption)
}
</script></body></html>
//多个选中
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下拉框实现</title>
</head>
<body>
<select id="man" style="width:200px;" size="10" multiple="1">
<option value="">秦始皇</option>
<option value="">汉武帝</option>
<option value="">唐太宗</option>
<option value="">明太祖</option>
<option value="">毛主席</option>
</select>
<select id="woman" style="width:200px;" size="10" multiple="1">
<option value="">西施</option>
<option value="">王昭君</option>
<option value="">杨玉环</option>
<option value="">貂蝉</option>
<option value="">宋美龄</option>
</select>
<br><br><br>
<input id="btn1" style="margin-left:40px;" type="button" value="移动到右边">
<input id="btn2" style="margin-left:180px;" type="button" value="移动到左边">
<script>
var oman = document.getElementById('man')
var owoman = document.getElementById('woman')
// 移动到右边的代码
var obtn1 = document.getElementById('btn1')
obtn1.onclick = function () {
// console.log(oman.selectedIndex)
// 得到所有的options
var options = oman.options
// 遍历这个数组，依次得到每个option的状态
// 啦啦 嘟嘟 嘻嘻
// 0 1 2
for (var i = 0; i < options.length; i++) {
// 得到当前option框的状态，选中为true，没有选中为false
// console.log(options[i].selected)
if (options[i].selected) {
owoman.appendChild(options[i])
i--
}
}
}
// 移动到左边的代码
var obtn2 = document.getElementById('btn2')
obtn2.onclick = function () {
var options = owoman.options
// 遍历这个数组，依次得到每个option的状态
// 啦啦 嘟嘟 嘻嘻
// 0 1 2
for (var i = 0; i < options.length; i++) {
// 得到当前option框的状态，选中为true，没有选中为false
// console.log(options[i].selected)
if (options[i].selected) {
oman.appendChild(options[i])
i--
}
}
}
</script></body></html>
2、飘动广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>飘动广告</title>
<style type="text/css">
div{
position: fixed;
top: 0px;
left: 0px;
}
</style>
</head>
<body >
<div id="jianshu" style="position: absolute;" >
<a href="https://www.jianshu.com/u/5f036f508e2b"><img src="../img/简书首页.png" height="200"width="200"/></a>
</div>
</body>
</html>
<script type="text/javascript">
var odiv = document.getElementById('jianshu')
var offest_top = 10
var offest_left = 10
function getStyly(obj,name){
return obj.currentStyle ? obj.currentStyle[name]:getComputedStyle(obj,null)[name]
}
//获取可视区的宽高
//获取宽高的时候，要看有没有DTD；有（documentElement）无（body）
var clientWidth = document.documentElement.clientWidth
var clientHeight = document.documentElement.clientHeight
setInterval(function (){
//动态修改top和let值
//得到top和left值
var top = parseInt(getStyly(odiv,'top'))
var left = parseInt(getStyly(odiv,'left'))
top += offest_top
left += offest_left
//判断有没有到达边界
if (top + 200 >= clientHeight || top <= 0) {
offest_top = -offest_top
}
if (left + 200 >= clientWidth || left <= 0) {
offest_left = -offest_left
}
//再将修改的值赋给对象
odiv.style.top = top + 'px'
odiv.style.left = left + 'px'
},50)
</script>
广告.gif
参考
3、倒计时，距离国庆节还有多少天、小时、分钟、秒
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
</head>
<body>
<h1 id="daojishi" style="background-color: red;text-align: center;font-size: 66px;"></h1>
</body>
</html>
<script type="text/javascript">
//获取目标时间
var oguoqing = new Date('2018/10/1')
//得到目标时间戳
var oguoqingchuo = oguoqing.getTime()
var odaojishi = document.getElementById('daojishi')
function demo() {
//获取当前时间对象
var onow = new Date()
//获取当前时间戳
var onowchuo = onow.getTime()
if (oguoqingchuo <= onowchuo){
// odaojishi.innerHTML = '国庆快乐'
clearInterval(timer)
}
//得到时间戳的差值并转换为秒数
var dist = (oguoqingchuo - onowchuo) / 1000
//将所得时间戳转换
//天 3600*24 = 86400
var day = parseInt(dist/86400)
//不足天的秒数
dist = dist % 86400
//时 3600
var hour = parseInt(dist / 3600)
dist = dist %3600
var minute = parseInt(dist/60)
dist = dist%60
var second = parseInt(dist)
odaojishi.innerHTML = '距离国庆节还有：' + day + ' 天' + hour + ' 时' + minute + ' 分' + second + '秒'
}
var timer = setInterval(demo, 1000)
</script>
倒计时.gif
4、实现全选、全不选、反选
obj.checked = true 选中
obj.checked = false 取消
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选</title>
</head>
<body>
<li><input type="checkbox"/>詹姆斯</li>
<li><input type="checkbox"/>库里</li>
<li><input type="checkbox"/>乔丹</li>
<li><input type="checkbox"/>姚明</li>
<li><input type="checkbox"/>内马尔</li>
<li><input type="checkbox"/>李哥</li>
<li><input type="checkbox"/>梅西</li>
<li><input type="checkbox"/>张</li>
<button>全选</button>
<button>全不选</button>
<button>反选</button>
</body>
</html>
<script type="text/javascript">
var ainputs = document.getElementsByTagName('input')
var abtns = document.getElementsByTagName('button')
abtns[0].onclick = function (){
for (var i = 0; i < ainputs.length; i++) {
ainputs[i].checked = true
}
}
abtns[1].onclick = function (){
for (var i = 0; i < ainputs.length; i++) {
ainputs[i].checked = false
}
}
abtns[2].onclick = function (){
for (var i = 0; i < ainputs.length; i++) {
ainputs[i].checked = !ainputs[i].checked
}
}
</script>
选择.gif
5、按住div可以实现div跟随鼠标移动成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="xin" style="position: fixed;top: 0px;left: 0px;">
<img src="../img/xin.jpg"height="300"width="200"/>
</div>
</body>
</html>
<script type="text/javascript">
var odiv = document.getElementById('xin')
odiv.onmousedown = function (ev){
//得到图片的左边距和上边距
var divleft = parseInt(odiv.style.left)
var divtop = parseInt(odiv.style.top)
//获取鼠标点击的时候离左边的间距
var offsettop = ev.clientY - divtop
var offsetleft = ev.clientX - divleft
document.onmousemove = function (ev){
// console.log(ev.clientX,ev.clientY)
//修改div的top和left值
odiv.style.top = (ev.clientY - offsettop) + 'px'
odiv.style.left = (ev.clientX - offsetleft) + 'px'
}
//阻止图片默认事件
return false
}
odiv.onmouseup = function (){
document.onmousemove = null
}
</script>
拖动.gif
