JS练习第三课

时间：2020-12-23 04:05:33

用typeof查看数据类型

<pre>

&lt;script type="text/javascript"&gt;

    alert(typeof 12345);    <span>//输出number</span>

    alert(typeof "abc");    <span>//输出string</span>

    alert(typeof document);    <span>//输出object</span>

&lt;/script&gt;

</pre>

<script src="../js/jquery-3.2.1.min.js"></script>

<script>

    alert("typeof 12345 -->" + typeof 12345 +

    '\ntypeof "abc" -->' + typeof "abc" +

    "\ntypeof document -->" + typeof document);

</script>

用parseInt解析数字,并求和

<style>

        .d1{

            width: 300px;

            margin: 10px auto;

        }

        input{

            width: 50px;

        }

    </style>

</head>

<body>

<div class="d1">

    <input id="num1" type="text">

    <span> + </span>

    <input id="num2" type="text">

    <span> = </span>

    <span  class="ret"> ? </span>

    <button>求和</button>

</div>

<script src="../js/jquery-3.2.1.min.js"></script>

<script>

    $("input").on("keyup",function () {

        this.value = this.value.replace(/[^\d]/,"");

    })

    $("button").on("click",function () {

        var num1 = parseInt($("#num1").val());

        var num2 = parseInt($("#num2").val());

        $(".ret").text( num1 + num2);

    })

</script>

累加按钮,自加1

<style>

        .d1{

            width: 30px;

            margin: 10px auto;

        }

    </style>

</head>

<body>

<div class="d1">

    <button class="b1"> 0 </button>

</div>

<script src="../js/jquery-3.2.1.min.js"></script>

<script>

    $(".b1").on("click",function () {

        var num = parseInt($(this).text()) + 1;

        $(this).text( num );

        alert(num);

    })

</script>

输入两个数字,比较大小

<style>

        .d1{

            width: 300px;

            margin: 10px auto;

        }

        input{

            width: 50px;

        }

    </style>

</head>

<body>

<div class="d1">

    <input id="num1" type="text">

    <b> VS </b>

    <input id="num2" type="text">

    <span> = </span>

    <button>最大的数是>></button>

    <span  class="ret"></span>

</div>

<script src="../js/jquery-3.2.1.min.js"></script>

<script>

    $("input").on("keyup",function () {

        this.value = this.value.replace(/[^\d]/,"");

    })

    $("button").on("click",function () {

        var num1 = $("#num1").val();

        var num2 = $("#num2").val();

        if(num1 == "" || num2 == ""){

            alert("请输入数字");

        }else{

            $(".ret").text(Math.max(num1,num2));

        }

    })

页面加载后累加,自加1

<style>

        h1 {

            margin: 10px;

            text-align: center;

        }

    </style>

</head>

<body>

<h1>0</h1>

<script src="../js/jquery-3.2.1.min.js"></script>

<script>

    var num = parseInt($("h1").text());

function upadte() {

    $("h1").text(num ++);

}

console.log(num);

    $(function () {

        setInterval(upadte,1000);

        upadte();

    })

</script>

判断数字是否为两位数

<style>

        .d1{

            width: 200px;

            margin: 10px auto;

        }

        input{

            width: 60px;

        }

    </style>

</head>

<body>

<div class="d1" >

    <input type="text">

    <button>是否为两位数</button>

</div>

<script src="../js/jquery-3.2.1.min.js"></script>

<script>

    $(function(){

        $("input").on("keyup",function () {

            this.value = this.value.replace(/[^\d]/,"");

        })

        $("button").on("click",function () {

            var num = $("input").val().length;

            ( num == 0 ) ? alert("请输入数字" ):

            alert( num == 2 ? "√是两位数" : "是" + num + "位数");

        })

    })

</script>

网页计算器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>网页计算器</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        *{margin: 0;padding: 0;text-align: center;}

        input{

            width: 300px;

            float: right;

            font: 700 50px/84px Arial;

            line-height: 100px;

            background-color: transparent;

            border:none;

            text-align: right;

            padding: 0 5px;

        }

        h2{

            line-height: 40px;

            cursor: pointer;

        }

        span{

            position: absolute;

            right: 5px;

        }

        .d1{

            width: 300px;

            height: 400px;

            margin: 10px auto;

            background-image: url("http://www.fgm.cc/learn/lesson3/img/bg.jpg");

        }

        .title{

            background-color: #000;

            width: 300px;

            height: 15px;

        }

        .info{

            background-image: url("http://www.fgm.cc/learn/lesson3/img/inputBg.jpg");

            background-size: cover;

            width: 300px;

            height: 100px;

            position: relative;

            margin-bottom: 10px;

            /*padding: 5px;*/

            /*box-sizing: border-box;*/

        }

        .btns{

            position: relative;

            overflow: hidden;

        }

        .btn{

            float: left;

            width: 61px;

            height: 40px;

            margin: 7px;

            background-image: url("http://www.fgm.cc/learn/lesson3/img/btn.png");

            color: #fff;

        }

        .icon{

            background-position: 0 -40px ;

        }

        .icon:hover{

            background-position: -64px -40px ;

        }

        .num{

            background-position: 0 -0px ;

        }

        .num:hover{

            background-position: -63px 0px ;

        }

        .zero{

            width: 136px;

            height: 40px;

            margin: 7px;

            float: left;

            color: #fff;

            background-image: url("http://www.fgm.cc/learn/lesson3/img/btn.png");

            background-position: 0 -82px ;

        }

        .zero:hover{

            background-position: 0 -123px ;

        }

        .eq{

            width: 61px;

            height: 100px;

            margin: 7px;

            position: absolute;

            color: #fff;

            background-image: url("http://www.fgm.cc/learn/lesson3/img/btn.png");

            bottom: -4px;

            right: 1px;

            background-position: 0 -163px ;

        }

        .eq:hover{

            background-position: -63px -163px ;

        }

    </style>

</head>

<body>

<div class="d1">

    <div class="title"></div>

    <div class="info">

        <span></span>

        <input type="text" maxlength="6" readonly="readonly" value="0"/>

    </div>

    <div class="btns">

        <div class="btn icon"><h2>C</h2></div>

        <div class="btn icon"><h2>%</h2></div>

        <div class="btn icon"><h2>÷</h2></div>

        <div class="btn icon"><h2>×</h2></div>

        <div class="btn num"><h2>7</h2></div>

        <div class="btn num"><h2>8</h2></div>

        <div class="btn num"><h2>9</h2></div>

        <div class="btn icon"><h2>-</h2></div>

        <div class="btn num"><h2>4</h2></div>

        <div class="btn num"><h2>5</h2></div>

        <div class="btn num"><h2>6</h2></div>

        <div class="btn icon"><h2>+</h2></div>

        <div class="btn num"><h2>1</h2></div>

        <div class="btn num"><h2>2</h2></div>

        <div class="btn num"><h2>3</h2></div>

        <div class="zero"><h2>0</h2></div>

        <div class="btn num"><h2>.</h2></div>

        <div class="eq"><h2 style="line-height: 100px">=</h2></div>

    </div>

</div>

<script src="../js/jquery-3.2.1.min.js"></script>

<script>

    // $(function(){

        var text="";

        var info = "";

        var ret;

        var textA = [];

        var $h1 = $("input");

        var $span = $("span");

        function infoAdd(){

            info += text;

            info = info.replace(/÷/,"/");

            info = info.replace(/×/,"*");

            info = info.replace(/=/,"");

            text = "";

            $("span").text(info);

        }

        // if ($("input").val().length < 10){

            $("h2").on("click",function () {

                var val = $(this).text();

                text += val;

                for(var i = 0; i < $("h2").length; i++){

                    switch (val) {

                        case "=":

                            infoAdd();

                            console.log(info);

                            ret = eval(info);

                            info = ret;

                            $("input").val(ret);

                            break;

                        case "C":

                            text = "";

                            info = "";

                            $("input").val("0");

                            $("span").text("");

                            break;

                        case "%":

                            $("input").val("%");

                            textA = [];

                            info = "";

                            break;

                        case "÷":

                            infoAdd();

                            // text = "/";

                            $("input").val("/");

                            // text = "";

                            break;

                        case "×":

                            infoAdd();

                            $("input").val("*");

                            break;

                        case "-":

                            infoAdd();

                            $("input").val("-");

                            break;

                        case "+":

                            infoAdd();

                            $("input").val("+");

                            break;

                        default:

                            // console.log(text);

                            ($("input").val().length < 10)? $h1.val(text) :$("h2").unbind("click");

                    }

                }

            })

        //  }else{

        //     $("h2").unbind("click");

        // }

    // })

</script>

</body>

</html>

简易网页时钟

<style>

        .d1{

            background-color: #000;

            width: 300px;

            height: 50px;

            margin: 10px auto;

            overflow: hidden;

            color: #fff;

        }

        .hour,.min,.second{

            background-color: #fff;

            text-align: center;

            border:2px solid #eee;

            width: 40px;

            height: 20px;

            color:#000;

        }

        ul{

            margin: 0;

        }

        li{

            margin: 13px 5px;

            float: left;

            list-style: none;

            font-size: 20px;

        }

    </style>

</head>

<body>

<div class="d1">

    <ul>

        <li style="margin-left: -10px" class="hour"></li>

        <li>点</li>

        <li class="min"></li>

        <li>分</li>

        <li class="second"></li>

        <li>秒</li>

    </ul>

</div>

<script src="../js/jquery-3.2.1.min.js"></script>

<script>

    $(function () {

        function time() {

            var myDate = new Date();

            var hour = myDate.getHours();

            var min = myDate.getMinutes();

            var second = myDate.getSeconds();

            $(".hour").text(hour);

            $(".min").text(min);

            $(".second").text(second);

        }

       setInterval(time,1000);

        time();

    })

</script>

倒计时时钟(100秒)

相关文章