综合案例

猜数字

预期效果

代码实现

    重新开始一局游戏
    

    请输入要猜的数字:
    猜
    

    已经猜的次数:0
    

    结果:
    
        $(function(){
            //先随机生成一个1-100的数字
            var guessNumber = Math.floor(Math.random() * 100) + 1; //Math.random()会生成1-100的数字
            var count = 0;
            //click:点击
            //事件驱动:只有真正发生了点击事件时,才会执行该函数
            $("#button").click(function() {
                count++;
                $("#count").text(count);
                var userGuess = parseInt($("#number").val());
                if(userGuess == guessNumber) {
                    $("#result").text("猜对了");
                    $("#result").css("color", "green");
                } else if(userGuess  
表白墙
 
预期效果
 
 
 
需求:按要求在文本框中输入内容,点击提交按钮,输入内容显示在页面下方.
 
代码实现
 
1.提前准备如下HTML和CSS代码
 


    
    
    Document
    
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 400px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            padding: 20px 0;
        }
        p {
            color: #666;
            text-align: center;
            font-size: 14px;
            padding: 10px 0;
        }
        .row {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        span {
            width: 100px;
            line-height: 40px;
        }
        .edit {
            width: 200px;
            height: 30px;
        }
        .submit {
            width: 304px;
            height: 40px;
            color: white;
            background-color: orange;
            border: none;
        }
    


    
        
表⽩墙
        
输⼊后点击提交, 会将信息显⽰在表格中
        
            谁: 
            
        
        
            对谁: 
            
        
        
            说什么: 
            
        
        
            
        
    

 
2.实现提交 
 
 
 
    
    
        $(function () {
            // 给点击按钮注册点击事件
            $(".submit").click(function () {
                // 1. 获取到编辑框内容
                var from = $('.edit:eq(0)').val();
                var to = $('.edit:eq(1)').val();
                var message = $('.edit:eq(2)').val();
                console.log(from + "," + to + "," + message);
                if (from == '' || to == '' || message == '') {
                    return;
                }
                // 2. 构造 html 元素
                var html = '' + from + '对' + to + '说: ' + message + '';
                // 3. 把构造好的元素添加进去
                $('.container').append(html);
                // 4. 同时清理之前输⼊框的内容
                $(":text").val("");
            });
        });
    
 
总结
 
 
 
1.HTML是一种超文本标记语言,主要用于页面内容的显示和排版.如果需要更漂亮的样式展示和页面效果,需要搭配CSS和JavaScript来使用
 
 
2.学习HTML主要是学习标签,HTML标签特别多,了解基本语法即可
 
 
3.CSS重点是学习CSS选择器的使用
 
 
4.JavaScript是一个脚本语言,与Java没有关系.JQuery是一个JavaScript框架,使用JQuery可以轻松地选择和操作HTML元素,提高我们的开发效率.
 
 
5.前端开发对于后端开发人员而言不是很重要,不必花费过多时间在这个上面.达到借助网络能阅读代码的水平即可