【JAVA WEB】JS的应用

这篇具有很好参考价值的文章主要介绍了【JAVA WEB】JS的应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

猜数字

预期效果

涉及接口预览 

代码实现

表白墙

预期效果

代码实现

代办事项

预期效果

代码实现


猜数字

预期效果

【JAVA WEB】JS的应用,Java Web,前端,java,javascript

涉及接口预览 

//当我们要获得文本框上输入的内容,可以通过.value获取

let guess_text = document.querySelector('.guess_num')

guess_text.value = 0

//当我们需要获取或者设置指定标签之间的HTML内容,可以通过 .innerHTML 

let guess_cnt = document.querySelector('.guess_cnt')

guess_cnt.innerHTML = 0

//js中生成随机数的方法

Math.floor(n)        //返回小于等于n的最大整数。

Math.random()        //结果为0-1间的一个随机数(包括0,不包括1)

Math.floor(Math.random()*10) //可均衡获取0到9的随机整数

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="reset_button" type="button" value="重新开始一局游戏" onclick="reSet()"><br>
    请输入要猜的数字:<input class="guess_num" type="text"><input class="guess"type="button" value="猜" onclick="Guess()"><br>
    已经猜的次数:<span class="guess_cnt">0</span><br>
    结果:<span class="guess_result">0</span>
</body>
<script>
    let guess_text = document.querySelector('.guess_num')
    let guess_cnt = document.querySelector('.guess_cnt')
    let guess_result = document.querySelector('.guess_result')
    
    //重新开始一局游戏 点击事件
    function reSet(){
        guess_text.value = 0
        guess_cnt.innerHTML = 0
        guess_result.innerHTML = ""
        //num=Math.floor(MATH.random()*100)+1;
    }
    //要猜的数字
    let num=Math.floor(Math.random()*100)+1;
    //猜按钮 点击事件
    function Guess(){
        guess_cnt.innerHTML = parseInt(guess_cnt.innerHTML) + 1

        if(num < parseInt(guess_text.value))
        {
            guess_result.innerHTML = "猜大了"
        }
        else if(num > parseInt(guess_text.value))
        {
            guess_result.innerHTML = "猜小了"

        }
        else{
            guess_result.innerHTML = "猜对了"
        }
    }
</script>
</html>

表白墙

预期效果

【JAVA WEB】JS的应用,Java Web,前端,java,javascript

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入相关信息,点击提交数据系那个会展示在表格中</p>
        <div class="div1">
            <span>谁:</span><input class="edit" type="text">
        </div>
        <div class="div1"> 
            <span>对谁:</span><input class="edit" type="text">
        </div>
        <div class="div1">
            <span> 说:</span><input class="edit" type="text">
        </div>
        <div class="div1">
            <input class="submit" type="button" value="提交" onclick="Submit()">
        </div>
    </div>
</body>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .container {
        margin: 0 auto;
    }
    h1{
        text-align: center;
        margin-bottom: 40px;
    }
    p{
        text-align: center;
        color: gray;
        line-height: 63px;
    }
    .div1 {
        display: flex;
        /* 水平居中 */
        justify-content: center;
        /* 垂直居中 */
        align-items: center;
    }
    .edit{
        margin-bottom: 20px;
        width: 200px;
        height: 30px;
    }
    span{
        width: 50px;
        margin-bottom: 20px;
    }
    .submit{
        background-color: orange;
        color: white;
        width: 260px;
        height: 30px;
        /* 去掉边框 */
        border: none;
        /* 设置圆角 */
        border-radius: 5px;
    }
    /* 提交按钮点击设置 */
    .submit:active{
        background-color: grey;
    }
    /* 页面动画效果 */

</style>
<script>
    function Submit(){
        let edits = document.querySelectorAll('.edit')
        let from = edits[0].value
        let to = edits[1].value
        let message = edits[2].value

        let div = document.createElement('div')
        div.className = 'div1'
        div.innerHTML =  from + "对" + to + "说:" + message
        
        let container = document.querySelector('.container')
        container.appendChild(div)
    }
</script>
</html>

代办事项

预期效果

【JAVA WEB】JS的应用,Java Web,前端,java,javascript

大致功能如下:

  1. 点新建任务时,如果文本框内有内容,就将其添加进未完成任务事项列表
  2. 单击删除按钮时,删除对应任务事项
  3. 当复选框勾选时,将该任务事项移至已完成任务事项列表
  4. 当复选框未勾选时,将该任务事项移至未完成任务事项列表

代码实现

 <!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: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        .nav{
            width: 800px;
            height: 100px;
            margin:0 auto;
            display: flex;
            align-items: center;
        }
        .nav input{
            width: 600px;
            height: 60px;
            border-radius: 5px;
        }
        .nav button{
            width: 200px;
            height: 60px;
            background-color: orange;
            color: white;
            font-size: 20px;
            border:orange;
            border-radius: 5px;
        } 
        .container {
            width: 800px;
            display: flex;
            margin: 0px auto;
        }
        h3{
            background-color: grey;
            color: white;
            text-align: center;
            width: 400px;
            height: 60px;
            padding-top: 15px;
        }
        .todo,
        .done{
            width: 50%;
            height: 100%;
        }
        .row{
            width: 400px;
            display: flex;
            align-items: center;
        }
        span{
            width: 200px;
            font-size: 20px;
            margin-left: 5px;
        }
        .row button{
            width: 90px;
            height: 40px;
            font-size: 20px;
            margin-top: 10px;
        }
        .nav button:active{
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="nav">
        <input type="text"><button οnclick="newJob()">新建任务</button>
    </div> 
    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
            <div class="row">
                <input type="checkbox" name="" id="">
                <span>吃饭</span>
                <button>删除</button>
            </div>
        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>
</body>
<script>
    function newJob(){
        //获取到input输入框按钮
        let add = document.querySelector('.nav input')
        //获取输入的信息
        let add_info = add.value
        if(add_info == "")
        {
            return
        }
        //获取到todo这个div
        let todo = document.querySelector('.todo')
        //创建一个div
        let div = document.createElement('div')
        //创建一个checkbox
        let checkbox = document.createElement('input')
        checkbox.type = 'checkbox'
        //创建一个span(文档内容是刚输入的信息对应的文本)
        let span = document.createElement('span')
        span.innerHTML = add_info
        //创建一个button
        let button = document.createElement('button')
        button.innerHTML = '删除'
        div.appendChild(checkbox)
        div.appendChild(span)
        div.appendChild(button)
        //更新样式
        div.className = 'row'
        //将div插入到todo这个div
        todo.appendChild(div)
        //删除按钮事件
        let delete_buttons = document.querySelectorAll('.row button')
        for(i = 0; i < delete_buttons.length; i++)
        {
            delete_buttons[i].onclick = function() {
                let parent = this.parentNode
                let grand_parent = parent.parentNode
                grand_parent.removeChild(parent)
            }
        }
        //每个复选框的点击事件
        let  checkboxs = document.querySelectorAll('.row input')
        for(i = 0; i<checkboxs.length; i++)
        {
            checkboxs[i].onclick = function(){
                //将节点插入到对应的div中
                //row代表的是我们插入的节点元素
                let row = this.parentNode
                //target代表的是将row插入到哪个div中
                //如果复选框已经被选中,那么target就是已完成对应的那个div
                let target
                if(this.checked) {
                    target = document.querySelector('.done')
                }
                else{
                    target = document.querySelector('.todo')
                }
                target.appendChild(row)
            }
        }
    }
</script>
</html>文章来源地址https://www.toymoban.com/news/detail-828690.html

到了这里,关于【JAVA WEB】JS的应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • web前端框架JS学习之JavaScript类型转换

    vascript有多种数据类型,如字符串、数字、布尔等,可以通过typeof语句来查看变量的数据类型。数据类型转换就是数据类型之间相互转换,比如把数字转成字符串、把布尔值转成字符串、把字符串转成数字等,这在工作也是经常碰到的。 本期我们就给大家说说web前端框架JS学

    2024年02月10日
    浏览(59)
  • 2023年,转行学Java还是web前端?

    2023 年要想顺利入行IT 建议选择Java 。 理由很简单,前端开发岗位需求大量减少,大厂裁员导致大量有经验的前端开发人员或者初级后端开发人员流入就业市场;作为新人缺乏技能优势和项目优势,而用人单位也更愿意招聘熟手,或者是全栈工程师,能同时把前端和后端的工

    2023年04月19日
    浏览(34)
  • Java web应用的目录结构

    详情可以参考: https://tomcat.apache.org/tomcat-10.1-doc/appdev/deployment.html https://jakarta.ee/specifications/servlet/6.0/jakarta-servlet-spec-6.0.html#directory-structure Java web应用根目录下包含如下内容: *.html, *.jsp等:html、jsp文件及其它必须对客户端浏览器可见的文件(如JavaScript、样式文件、图片文件

    2024年02月05日
    浏览(44)
  • 模仿淘宝购物系统的Java Web前端项目(开源项目)

    提示:此项目仅作为本博主的学习笔记记录,不作为商品售卖,资源往下翻看源码获取 提示:这里可以添加本文要记录的大概内容: 本项目要求完成Java Web的开发环境准备,以及项目开发框架的搭建 Web开发环境准备,包括eclipse、MySQL、tomcat Web项目框架搭建,涉及jsp、servle

    2024年02月11日
    浏览(51)
  • Java Web应用开发 ——作业七

    一.单项选择题(共7题,28.7分) 1 Servlet程序的入口点是( )。 A、 init() B、 main() C、 service() D、 doGet() 正确答案: A 2 JSP和Servlet的关系是() A、 没有关系,因为前者是页面,后者是java类 B、 继承关系 C、 Servlet就是JSP D、 JSP会被翻译成Servlet 正确答案: D 3 编写Servl

    2024年02月01日
    浏览(46)
  • 【Java万花筒】Java安全卫士:从密码学到Web应用攻击

    在当今数字化时代,安全性至关重要,特别是对于Java开发者而言。本文将深入探讨Java安全与加密领域的关键库和技术,包括Bouncy Castle、Jasypt、Keycloak、Apache Shiro、Java Cryptography Extension (JCE)和OWASP Java Encoder。通过详细介绍各个库的功能、使用案例和实际代码示例,读者将获得

    2024年01月20日
    浏览(86)
  • 【Java 进阶篇】解决Java Web应用中请求参数中文乱码问题

    在Java Web应用开发中,处理请求参数时经常会遇到中文乱码的问题。当浏览器向服务器发送包含中文字符的请求参数时,如果不正确处理,可能会导致乱码问题,使得参数无法正确解析和显示。本文将详细探讨Java Web应用中请求参数中文乱码问题,以及如何解决这个问题。 中

    2024年02月08日
    浏览(44)
  • 通过java解码web前端直接预览海康威视摄像头

            最近进行项目开发时遇到了需要前端直接调用摄像头,并直接进行播放的需求。原本计划通过海康威视官网的《WEB无插件开发包 V3.2》直接进行控制、交互,实现摄像头直接登录以及取流预览。但是前端人员现场驻场开发后反映各种兼容性问题频发,反正就是不能友

    2024年02月01日
    浏览(54)
  • 【Java】Web应用的文件上传下载

    🎄欢迎来到@边境矢梦°的csdn博文🎄  🎄本文主要梳理Web应用的文件上传下载🎄 🌈我是边境矢梦°,一个正在为秋招和算法竞赛做准备的学生🌈 🎆喜欢的朋友可以关注一下 🫰🫰🫰 ,下次更新不迷路🎆  Ps: 月亮越亮说明知识点越重要 (重要性或者难度越大)🌑🌒🌓🌔🌕

    2024年02月12日
    浏览(38)
  • JAVA Web应用常见漏洞与修复建议

    最近负责的项目参与了甲方要求的代码审计,扫出来不少问题,46w+行代码扫出来81种漏洞,涉及1w+行代码,不良代码率高达2.93%,也确实反应了不少问题,这里贴出来供大家参考 目录 跨站脚本 高危:存储型XSS 高危:反射型XSS 输入验证 高危:路径遍历 高危:基于DOM的XSS 高危

    2024年02月06日
    浏览(38)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包