JavaScript实用项目

最新推荐文章于 2024-05-31 19:09:15 发布

WhiteMask362

最新推荐文章于 2024-05-31 19:09:15 发布

阅读量164

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_62630571/article/details/128974888

版权

JavaScript实用项目：猜数字+字符串反转

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
    <script src="../homework2_8/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>

        div {
            width: 500px;
            height: 300px;
            border: 1px solid black;
            margin: auto;
        }
        div *{
            text-align: center;
        }
        input{
            margin-left:140px;
        }

        span{
            display: inline-block;
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
    </style>

</head>

<body>
    <div id="app">
        <h1>猜数游戏</h1>
        <h3>请输入一个0~99之间的随机整数:</h3><br>
        <input id="input" type="text">
        <button @click="commit">提交</button><br>
        <p>结果：<span id="result">{{message}}</span></p>
        <p>剩余次数：<span>{{count}}</span></p>
    </div>

    <script>
        
        var randomNum = parseInt(Math.random()*100);
        console.log(randomNum);

        var app = new Vue({
            el:"#app",
            data:{
                message: "",
                count: 10,
            },
            methods: {
                commit:function(){
                    
                   var inputNum = $("input").val();

                   if(inputNum == randomNum){
                    this.message = "猜对了"
                   }
                   if(inputNum < randomNum){
                    this.message = "猜小了"
                   }
                   if(inputNum > randomNum){
                    this.message = "猜大了"
                   }

                   if(this.count <= 0){
                        alert("您的次数已用完..正确答案为："+randomNum)
                   }else{
                    this.count--;
                   }
                }
            },
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../homework2_8/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body >
    <div id="app">
        <button @click="reverseStr">反转</button>
        <button @click="changeColor">上色</button>
        
        <div class="pre">内容为:{{message}}</div>
        <div class=" after" @click="reverseStr" :style="str">反转后内容为:{{reverseContent}}</div>
        <div class="total">反转前内容为:{{message}}，反转后内容为:{{reverseContent}}</div>

    </div>
    <script>
        /*(1) 用data给页面初始内容赋值“你好，欢迎学习vue”。
        
        (2) 用方法实现字符串反转，显示结果为“euv习学迎欢，好你”。
        
        (3) 用方法给div都加上相同的颜色，原来有的class要保留。
        
        (4) 用v-bind给第二个div再加一一个字体为20px。 */
 
        var app = new Vue({
            el:"#app",
            data:{
                message: "你好，欢迎学习java",
                reverseContent:"",
                str:"font-size: 20px;"
            },
            methods: {
                reverseStr : function(){
                    var arr = this.message.split("");
                    arr.reverse();
                    this.reverseContent = arr.join("");
                },
                changeColor : function(){
                    $('#app div').css("background-color","blue");
                }
            },
        });

    </script>
</body>
</html>