JavaScript极速入门-综合案例(3)

这篇具有很好参考价值的文章主要介绍了JavaScript极速入门-综合案例(3)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

综合案例

猜数字

预期效果

JavaScript极速入门-综合案例(3),javascript,开发语言,ecmascript

代码实现

    <button type="button" id="reset">重新开始一局游戏</button>
    <br>
    请输入要猜的数字:<input type="text" id="number">
    <button type="button" id="button">猜</button>
    <br>
    已经猜的次数:<span id="count">0</span>
    <br>
    结果:<span id="result"></span>
    <script>
        $(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 < guessNumber) {
                    $("#result").text("猜小了");
                    $("#result").css("color", "red");
                } else {
                    $("#result").text("猜大了");
                    $("#result").css("color", "red");
                }
                $("#number").val("");
            });
            $("#reset").click(function(){
                guessNumber = Math.floor(Math.random() * 100) + 1;
                count = 0;
                $("#count").text(count);
                $("#result").text("");
                $("#number").val("");
            });
        });
    </script>

表白墙

预期效果

JavaScript极速入门-综合案例(3),javascript,开发语言,ecmascript 

需求:按要求在文本框中输入内容,点击提交按钮,输入内容显示在页面下方.

代码实现

1.提前准备如下HTML和CSS代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            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;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>表⽩墙</h1>
        <p>输⼊后点击提交, 会将信息显⽰在表格中</p>
        <div class="row">
            <span>谁: </span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <span>对谁: </span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <span>说什么: </span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <input type="button" value="提交" class="submit">
        </div>
    </div>
</body>

</html>

2.实现提交 

 文章来源地址https://www.toymoban.com/news/detail-839930.html

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(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 = '<div class="row">' + from + '对' + to + '说: ' + message + '<div class="row">';
                // 3. 把构造好的元素添加进去
                $('.container').append(html);
                // 4. 同时清理之前输⼊框的内容
                $(":text").val("");
            });
        });
    </script>

总结

1.HTML是一种超文本标记语言,主要用于页面内容的显示和排版.如果需要更漂亮的样式展示和页面效果,需要搭配CSS和JavaScript来使用

2.学习HTML主要是学习标签,HTML标签特别多,了解基本语法即可

3.CSS重点是学习CSS选择器的使用

4.JavaScript是一个脚本语言,与Java没有关系.JQuery是一个JavaScript框架,使用JQuery可以轻松地选择和操作HTML元素,提高我们的开发效率.

5.前端开发对于后端开发人员而言不是很重要,不必花费过多时间在这个上面.达到借助网络能阅读代码的水平即可 

 

到了这里,关于JavaScript极速入门-综合案例(3)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 开发语言漫谈-JavaScript

           JavaScript、Java名字很相近,但它们没有任何亲缘关系,是由不同公司开发的编程语言。Java由Sun公司(后被Oracle收购)开发,JavaScript最初是由Netscape公司开发的(当年浏览器的霸主)。JavaScript最初的名字是 LiveScript,Netscape将其命名为 JavaScript,无非是蹭 Java流量。当

    2024年04月16日
    浏览(50)
  • 加油优惠价格计算-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)

    一、案例描述 考核知识点 if 、 if…else 、if…else if…else 练习目标 掌握if单分支语句。 掌握if…else双分支语句 掌握if…else if…else多分支语句 需求分析 加油站,为了鼓励车主多加油,实行多加多优惠政策,具体优惠如下: 已知92号汽油,每升6元;如果大于等于20升,那么每

    2024年02月07日
    浏览(96)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(56)
  • 【你也能从零基础学会网站开发】Web建站之javascript入门篇 浅谈JavaScript中的AJAX和XMLHttpRequest对象

    🚀 个人主页 极客小俊 ✍🏻 作者简介:程序猿、设计师、技术分享 🐋 希望大家多多支持, 我们一起学习和进步! 🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注 什么是AJAX AJAX 其实就是 异步 JavaScript 及 XML(Asynchronous JavaScript and XML) AJAX 不是一种新的编程语言,而是一种

    2024年04月14日
    浏览(52)
  • [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript

    目录 一 特色  二  收获​编辑  三 什么是web? 四 网站的工作流程  五 web网站的开发模式​编辑  六 web开发课程学习安排  七、初始web前端  八 HTML、CSS 8.1 什么是HTNLCSS(w3cschool) 8.2 HTML快速入门 8.3 VS Code开发工具 8.3.1  插件  8.3.2 主题(改变颜色) 8.3.3 设置 8.4 基础标签样

    2024年02月12日
    浏览(43)
  • BCSP-玄子前端开发之JavaScript+jQuery入门CH10_jQuery基础

    4.10.1 jQuery 简介 jQuery是流行的JavaScript程序库,是对JavaScript对象和函数的封装 设计思想是write less, do more [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gx0f3UFO-1682307309412)(./assets/image-20230423230915569.png)] 4.10.2 jQuery 能做什么 访问和操作DOM元素 控制页

    2023年04月24日
    浏览(55)
  • BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础

    4.7.1 ECMAScript 6 简介 ECMAScript 6.0(简称 ES6) 是JavaScript语言的下一代标准 正式发布于2015年6月 目标 使JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 版本升级 ECMAScript 2015 ECMAScript 2016 ECMAScript 2017 ECMAScript和JavaScript 的关系 前者是后者的规格,后者是前者的

    2023年04月27日
    浏览(54)
  • 写点东西《JavaScript 中的设计模式:综合指南》

    JavaScript 因其广泛采用和多功能性,已成为现代 Web 开发的基石。随着您深入研究 JavaScript 开发,理解和利用模式变得至关重要。在本文中,我们将踏上揭开 JavaScript 模式的神秘面纱的旅程,并探讨它们如何增强您的编码实践。 要理解本文中讨论的概念和技术,您应该了解

    2024年02月02日
    浏览(41)
  • (自己动手开发自己的语言练手级应用)JSON(JavaScript Object Notation) 产生式(BNF)

     写自己的开发语言时,很多人都会拿JSON当第一个练习对象 开源net json FJSON 解析工具 https://dbrwe.blog.csdn.net/article/details/107611540?spm=1001.2014.3001.5502 以上是JSON的简化产生式表示形式。其中, json 是最顶层的规则,可以是一个对象或一个数组。 object 表示一个对象,由一对大括号

    2024年02月10日
    浏览(53)
  • 大型医院云HIS系统:采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发 融合B/S版电子病历系统

    一套医院云his系统源码 采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发。融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知识产权。 文末卡片获取联系! 基于云计算技术的B/S架构的医院管理系统(简称云HIS),采用前后

    2024年02月03日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包