美文网首页
js应用

js应用

作者: 她即我命 | 来源:发表于2018-08-25 18:06 被阅读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>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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:有点懒，动态的我就不弄了，动态效果可以实现

    相关文章

      网友评论

          本文标题：js应用

          本文链接：https://www.haomeiwen.com/subject/yomgiftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|js应用|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！