JS练习第三课 - Lesson-J

公告

用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>

View Code

用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>

View Code

累加按钮,自加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>

View Code

输入两个数字,比较大小

<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));
        }

    })

View Code

页面加载后累加,自加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>

View Code

判断数字是否为两位数

<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>

View Code

网页计算器

<!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>

View Code

简易网页时钟

<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>

View Code

倒计时时钟(100秒)

posted on 2018-10-21 10:32 Lesson-J 阅读(147) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部