js一些有趣的简单应用

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>
    <style>
    div {
        width: 500px;
        height: 100px;
        border: 1px dashed black;
    }
    #nei {
        background-color: pink;
        width: 0px;
        border: none;
    }
    </style>
</head>
<body>
    <h1>滚动条</h1>
    <button id="btn">点击我</button>
    <br><br><br>
    <div>
        <div id="nei"></div>
    </div>
    <span id="per">0%</span>
</body>
</html>
<script>
var obtn = document.getElementById('btn')
obtn.onclick = function () {
    this.disabled = true
    var onei = document.getElementById('nei')
    var oper = document.getElementById('per')
    i = 0
    // 将#nei这个div的宽度从0慢慢的变成500即可
    var timer = setInterval(function () {
        i += 2
        // 将i设置为nei div的宽度
        onei.style.width = i + 'px'
        // 时刻修改span里面的内容
        oper.innerHTML = (i / 5) + '%'
        // 判断i有没有达到div宽度
        if (i == 500) {
            // 销毁定时器
            clearInterval(timer)
            obtn.disabled = false
        }
    }, 10)
}
</script>
image.png

2.秒表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>NO.2</title>
        <style type="text/css">
            #d1{
                height: 300px;
                width: 100%;
                font-size: 300px;
                color: #FF0000;
                line-height: 300px;
                text-align: center;
                background-color: pink;
            }
            #d2{
                height: 200px;
                width: 100%;
                background-color: mediumspringgreen;
                
            }
            button{
                font-size: 50px;
                border-radius: 10px;
                color: purple;
                width: 150px;
                position: relative;
                margin-left: 195px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--2、实现秒表-->
        <div id="d1">00:00</div>
        <div id="d2">
            <button id="btn1">开始</button>
            <button id='btn2'>暂停</button>
            <button id="btn3">重置</button>
        </div>
    </body>
</html>
<script>
// 前面是秒   后面是10ms
var ostart = document.getElementById('btn1')
var ostop = document.getElementById('btn2')
var oreset = document.getElementById('btn3')
var odiv = document.getElementById('d1')
var timer = null
var i = 0
// 开始函数
ostart.onclick = function () {
    // 周期性定时器一直在修改div的值
    timer = setInterval(function () {
        i++
        // 根据i计算前面的值和后面的值  228  02:28
        first = parseInt(i / 100)
        second = i % 100
        // 将i设置为div后面的值
        odiv.innerHTML = buling(first) + ':' + buling(second)
    }, 10)
}

// 暂停
ostop.onclick = function () {
    clearInterval(timer)
}

// 重置函数
oreset.onclick = function () {
    // 清掉定时器
    clearInterval(timer)
    // 计数器清零
    i = 0
    // 显示也清零
    odiv.innerHTML = '00:00'
}

function buling(number) {
    if (number < 10) {
        return '0' + number
    }
    return number
}
</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="lala"></h1>
</body>
</html>
<script>
    var oh = document.getElementById('lala')
    setInterval(function () {
        // 一直修改oh的内容
        var od = new Date()
        // 获取年份
        var year = od.getFullYear()
        // 获取月份
        var month = od.getMonth() + 1
        // 获取日期
        var day = od.getDate()
        // 获取星期几
        var weekday = change_weekday(od.getDay())
        // 获取小时
        var hour = od.getHours()
        // 获取分钟
        var minute = od.getMinutes()
        // 获取秒数
        var second = od.getSeconds()

        oh.innerHTML = '当前时间为:' + year + '年' + month + '月' + day + '号 ' + weekday + ' ' + hour + ':' + minute + ':' + second
    }, 1000)

    function change_weekday(number) {
        switch (number) {
            case 0:
                return '星期天'
                break;
            case 1:
                return '星期一'
                break;
            case 2:
                return '星期二'
                break;
            case 3:
                return '星期三'
                break;
            case 4:
                return '星期四'
                break;
            case 5:
                return '星期五'
                break;
            case 6:
                return '星期六'
                break;
        }
    }
</script>
image.png

4.短信倒计时

<!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>
    <button id="btn" style="width:400px; height:100px; font-size:50px;">点击发送短信</button>
</body>
</html>
<script>
var obtn = document.getElementById('btn')
obtn.onclick = function () {
    this.disabled = true
    var i = 5
    var timer = setInterval(function () {
        obtn.innerHTML = i + 's之后重新发送'
        // 判断定时器何时销毁
        if (i == 0) {
            clearInterval(timer)
            obtn.innerHTML = '点击发送短信'
            obtn.disabled = false
        }
        i--
    }, 1000)
}
</script>
image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,019评论 3 119
  • 此刻,某个地方遥远的夜 是南方温润?或是北国凉凛? 想着有个能陪我一起赏月的人 可是这种缘分,让心却不安分了 或许...
    迷曳阅读 236评论 0 1
  • 有的人,可以任性的生活 有的人,可以潇洒的生活 有的人,可以不管不顾的生活 为什么? 有的人,不能摆正自己的位置生...
    DDDDQ阅读 316评论 0 1
  • 小区门口的小摊儿,总会出现这对夫妻忙碌的背影,定点定时,风雨无阻。 我没有吃夜宵的习惯,却因今晚加班而折腾了胃,于...
    韋三淑Betty阅读 638评论 0 0