js应用
2018-08-25 本文已影响15人
她即我命
1、下拉框实现左边移动选项到右边，右边移动选项到左边
<!DOCTYPE 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 name="" id="man" size="10" multiple="1" style="width:200px;">
<option value="">秦始皇</option>
<option value="">汉武帝</option>
<option value="">唐太宗</option>
<option value="">明太祖</option>
<option value="">毛主席</option>
</select>
<select name="" id="woman" size="10" multiple="1" style="width:200px;">
<option value="">西施</option>
<option value="">王昭君</option>
<option value="">杨玉环</option>
<option value="">貂蝉</option>
<option value="">宋美龄</option>
</select>
<br><br><br>
<input id="btn1" type="button" value="移动到右边" style="margin-left:40px;">
<input id="btn2" type="button" value="移动到左边" style="margin-left:180px;">
</body>
</html>
<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>
image.png
这个可以实现多选
<!DOCTYPE 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 name="" id="man" size="10" multiple="1" style="width:200px;">
<option value="">秦始皇</option>
<option value="">汉武帝</option>
<option value="">唐太宗</option>
<option value="">明太祖</option>
<option value="">毛主席</option>
</select>
<select name="" id="woman" size="10" multiple="1" style="width:200px;">
<option value="">西施</option>
<option value="">王昭君</option>
<option value="">杨玉环</option>
<option value="">貂蝉</option>
<option value="">宋美龄</option>
</select>
<br><br><br>
<input id="btn1" type="button" value="移动到右边" style="margin-left:40px;">
<input id="btn2" type="button" value="移动到左边" style="margin-left:180px;">
</body>
</html>
<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>
2、飘动广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飘动广告</title>
<style>
div {
position: fixed;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div id="girl">
<img src="meinv.jpg" alt="" height="300" width="200">
</div>
</body>
</html>
<script>
var odiv = document.getElementById('girl')
// 定义偏移量
var offset_top = 10
var offset_left = 10
// 兼容性写法获取非行内样式
function getStyle(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
// console.log(clientWidth, clientHeight)
setInterval(function () {
// 动态的修改top和left值
// 得到你的top和left值
var top = parseInt(getStyle(odiv, 'top'))
var left = parseInt(getStyle(odiv, 'left'))
top += offset_top
left += offset_left
// 判断top或则left有没有到达边界
if (top + 300 > clientHeight || top < 0) {
offset_top = -offset_top
}
if (left + 200 > clientWidth || left < 0) {
offset_left = -offset_left
}
// 再将修改后的值赋值过去
odiv.style.top = top + 'px'
odiv.style.left = left + 'px'
}, 5)
</script>
image.png
3、倒计时，距离国庆节还有多少天、小时、分钟、秒
<!DOCTYPE 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>
<h1 id="dao"></h1>
</body>
</html>
<script>
var odao = document.getElementById('dao')
// 获取国庆节的时间
var oqing = new Date('2018-8-23 10:16:00')
// 得到国庆节的时间戳
var oqingcuo = oqing.getTime()
var timer = null
function demo() {
// 每次都要获取当前的时间对象
var onow = new Date()
// 得到当前的时间戳
var onowcuo = onow.getTime()
if (oqingcuo <= onowcuo) {
clearInterval(timer)
}
// 得到两个时间戳的差值
var dist = (oqingcuo - onowcuo) / 1000
// 将这个差值你要给我计算出来有多少天、多少小时、多少分钟、多少秒
// 首先计算天数 3600*24=86400 90000
var day = parseInt(dist / 86400)
// 计算除了天之后剩下的时间
dist = dist % 86400
// 计算小时
var hour = parseInt(dist / 3600)
dist = dist % 3600
// 计算分钟
var minute = parseInt(dist / 60)
dist = dist % 60
var second = parseInt(dist)
odao.innerHTML = '距离下课还有===' + day + '天' + hour + '小时' + minute + '分钟' + second + '秒'
}
timer = setInterval(demo, 1000)
</script>
image.png
4、实现全选、全不选、反选
obj.checked = true 选中
obj.checked = false 取消
<!DOCTYPE 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>
<li><input type="checkbox">梅西</li>
<li><input type="checkbox">c罗</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>
<li><input type="checkbox">爱新觉罗姚明</li>
<button>全选</button>
<button>全不选</button>
<button>反选</button>
</body>
</html>
<script>
var ainputs = document.getElementsByTagName('input')
var abtns = document.getElementsByTagName('button')
abtns[0].onclick = function () {
// 遍历所有的input，将每一个input的checked属性设置为true
for (var i = 0; i < ainputs.length; i++) {
ainputs[i].checked = true
}
}
abtns[1].onclick = function () {
// 遍历所有的input，将每一个input的checked属性设置为true
for (var i = 0; i < ainputs.length; i++) {
ainputs[i].checked = false
}
}
abtns[2].onclick = function () {
// 遍历所有的input，将每一个input的checked属性设置为true或者false
for (var i = 0; i < ainputs.length; i++) {
ainputs[i].checked = !ainputs[i].checked
// if (ainputs[i].checked) {
// ainputs[i].checked = false
// } else {
// ainputs[i].checked = true
// }
}
}
</script>
image.png
5、按住div可以实现div跟随鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟随鼠标移动</title>
</head>
<body>
<!-- <div id="girl" style="position: absolute; top: 0px; left: 0px; background-color: red; width: 300px; height: 300px;"> -->
<div id="girl" style="position: absolute; top: 0px; left: 0px;">
<img src="meinv.jpg" alt="" height="300" width="200">
</div>
</body>
</html>
<script>
var odiv = document.getElementById('girl')
odiv.onmousedown = function (ev) {
var oevent = ev || event
// 首先得到图片的左边距和上边距
var divleft = parseInt(odiv.style.left)
var divtop = parseInt(odiv.style.top)
// console.log(divleft, divtop)
// 在这获取鼠标点击的时候，左边的间距和上边的间距
var offsettop = oevent.clientY - divtop
var offsetleft = oevent.clientX - divleft
// console.log(offsettop, offsetleft)
document.onmousemove = function (ev) {
var oe = ev || event
console.log(ev.clientX, ev.clientY)
// 修改div的top和left值
odiv.style.top = (oe.clientY - offsettop) + 'px'
odiv.style.left = (oe.clientX - offsetleft) + 'px'
}
return false
}
odiv.onmouseup = function () {
document.onmousemove = null
}
</script>
image.png
ps:有点懒，动态的我就不弄了，动态效果可以实现
