【JAVA WEB】JS的应用

news2024/11/24 14:00:05

目录

猜数字

预期效果

涉及接口预览 

代码实现

表白墙

预期效果

代码实现

代办事项

预期效果

代码实现

猜数字

预期效果

涉及接口预览 

//当我们要获得文本框上输入的内容，可以通过.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>

表白墙

预期效果

代码实现

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

代办事项

预期效果

大致功能如下：

  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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1457485.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

社交商业策略：揭秘Facebook Shops的成功之道

社交商业策略：揭秘Facebook Shops的成功之道

随着数字化时代的不断发展&#xff0c;社交媒体已经成为了商业活动的重要平台之一。在这个趋势下&#xff0c;Facebook作为全球最大的社交媒体平台之一&#xff0c;不仅仅是人们交流互动的场所&#xff0c;更成为了商家开展电子商务的重要渠道。其中&#xff0c;Facebook Shops…
阅读更多...
MySQL中SQL语句的执行流程（高频考点）

MySQL中SQL语句的执行流程（高频考点）

文章目录 前言SQL语句的执行流程查询语句的执行流程更新语句的执行流程 总结 前言 昨天跟大家讲了MySQL的基础架构&#xff08;链接&#xff1a;MySQL的基础架构&#xff09;&#xff0c;今天讲一讲我们的高频面试题MySQL中SQL语句的执行流程。 建议看完 MySQL的基础架构 再来…
阅读更多...
flutter 文件上传组件和大文件分片上传

flutter 文件上传组件和大文件分片上传

文件分片上传 资料 https://www.cnblogs.com/caijinglong/p/11558389.html 使用分段上传来上传和复制对象 - Amazon Simple Storage Service 因为公司使用的是亚马逊的s3桶 下面是查阅资料获得的 亚马逊s3桶的文件上传分片 分段上分为三个步骤&#xff1a;开始上传、上传对…
阅读更多...
【漏洞复现-通达OA】通达OA WHERE_STR 存在前台SQL注入漏洞

【漏洞复现-通达OA】通达OA WHERE_STR 存在前台SQL注入漏洞

一、漏洞简介 通达OA（Office Anywhere网络智能办公系统）是由北京通达信科科技有限公司自主研发的协同办公自动化软件，是与中国企业管理实践相结合形成的综合管理办公平台。通达OA WHERE_STR存在前台SQL注入漏洞，攻击者可通过该漏洞获取数据库敏感信息。 二、影响版本 ●…
阅读更多...
全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[vitePress篇]

全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[vitePress篇]

全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[vitePress篇] 前言选型为什么选择VitePress安装VitePress运行优化默认UI使用自定义UI编辑自定义布局编写home页面组件编写page页面组件 结语 前言 一个好的工程化项目&#xff0c;必然有一个好的文档管理&#xff0c;…
阅读更多...
【Go-Zero】goctl生成model层后报错Unresolved reference ‘ErrNotFound‘解决方案

【Go-Zero】goctl生成model层后报错Unresolved reference ‘ErrNotFound‘解决方案

【Go-Zero】goctl生成model层后报错Unresolved reference ErrNotFound’解决方案 大家好 我是寸铁&#x1f44a; 总结了一篇goctl生成model层后报错Unresolved reference ErrNotFound’报错解决方案的文章✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 问题背景 大家好&#xff…
阅读更多...
Sora 的工作原理

Sora 的工作原理

原文&#xff1a;How Sora Works (And What It Means) 作者&#xff1a; DAN SHIPPER OpenAI 的新型文本到视频模型为电影制作开启了新篇章 DALL-E 提供的插图。 让我们先明确一点&#xff0c;我们不会急急忙忙慌乱。我们不会预测乌托邦或预言灾难。我们要保持冷静并... 你…
阅读更多...
java面试多线程篇

java面试多线程篇

文章说明 在文章中对所有的面试题都进行了难易程度和出现频率的等级说明 星数越多代表权重越大&#xff0c;最多五颗星&#xff08;☆☆☆☆☆&#xff09; 最少一颗星&#xff08;☆&#xff09; 1.线程的基础知识 1.1 线程和进程的区别&#xff1f; 难易程度&#xff1a;☆☆…
阅读更多...
Filterajax

Filterajax

1.Filter概念 概念:表示过滤器,是JavaWeb三大组件(Servlet,Filter,Listener)之一;过滤器可以把对资源的请求拦截下来,从而实现一些特殊的功能.过滤器可以完成一些通用操作比如:登录添加购物车,视频广告,敏感字符处理等等... 2.Filter快速入门 3.Listener 4.Ajax学习 1.使用场…
阅读更多...
移动通信相关知识学习笔记

移动通信相关知识学习笔记

一、移动通信架构简图 移动无线的接入网是专指各种基站设备。核心网就是各种交换机。 二、无线信号基本原理 无线网络中&#xff0c;使用AP设备和天线来实现有线和无线信号互相转换。如上图所示&#xff0c;有线网络侧的数据从AP设备的有线接口进入AP后&#xff0c;经AP处理为…
阅读更多...
一.重新回炉Spring Framework: 理解Spring IoC

一.重新回炉Spring Framework: 理解Spring IoC

1. 写在前面的话 说实话&#xff0c;从事java开发工作时间也不短了&#xff0c;对于Spring Framework&#xff0c;也是天天用&#xff0c;这期间也碰到了很多问题&#xff0c;也解决了很多问题。可是&#xff0c;总感觉对Spring Framework还是一知半解&#xff0c;不能有个更加…
阅读更多...
PCIe学习笔记（2）错误处理和AER/DPC功能

PCIe学习笔记（2）错误处理和AER/DPC功能

文章目录 PCIe ErrorAER (Advanced Error Reporting)DPC (Downstream Port Containment) 处理器上错误通常可分为detected和undetected error。Undetected errors可能变得良性(benign)&#xff0c;也可能导致系统故障如silent data corruptions (SDC)。Detected errors则又可分…
阅读更多...
2024024期传足14场胜负前瞻

2024024期传足14场胜负前瞻

2024024期赛事由亚冠5场&#xff0c;欧冠4场、英超1场、英冠4场组成。售止时间为2月20日&#xff08;周二&#xff09;17点30分&#xff0c;敬请留意&#xff1a; 本期中深盘中等&#xff0c;1.5以下赔率5场&#xff0c;1.5-2.0赔率5场&#xff0c;其他场次是平半盘、平盘。本期…
阅读更多...
Django后端开发——ORM

Django后端开发——ORM

文章目录 参考资料ORM-基础字段及选项字段类型练习——添加模型类应用bookstore下的models.py数据库迁移——同步至mysqlmysql中查看效果 字段选项Meta类定义示例&#xff1a;改表名应用bookstore下的models.py终端效果 练习——改表名字段选项修改应用bookstore下的models.py终…
阅读更多...
DVWA 靶场之 Brute Force-LowMedium（前期配置铺垫与渗透方法及源码分析）

DVWA 靶场之 Brute Force-LowMedium（前期配置铺垫与渗透方法及源码分析）

首先登录 DVWA 靶场 DVWA 默认的用户有5个&#xff0c;用户名及密码如下&#xff1a; admin/passwordgordonb/abc1231337/charleypablo/letmeinsmithy/password 难度等级设置为 low &#xff0c;我们先从最简单的开始 来到 Brute Force&#xff08;暴力破解&#xff09; 我们可…
阅读更多...
手写myscrapy（二）

手写myscrapy（二）

我们看一下scrapy的系统架构设计方法和思路&#xff1a; 模块化设计&#xff1a; Scrapy采用模块化设计&#xff0c;将整个系统划分为多个独立的模块&#xff0c;包括引擎&#xff08;Engine&#xff09;、调度器&#xff08;Scheduler&#xff09;、下载器&#xff08;Downl…
阅读更多...
数据分析师SQL面试准备(part3)

数据分析师SQL面试准备(part3)

1. 2. 3. 4. 5. 6.
阅读更多...
目录IO 2月19日学习笔记

目录IO 2月19日学习笔记

1. lseek off_t lseek(int fd, off_t offset, int whence); 功能: 重新设定文件描述符的偏移量 参数: fd:文件描述符 offset:偏移量 whence: SEEK_SET 文件开头 SEE…
阅读更多...
C++ 浮点数二分 数的三次方根

C++ 浮点数二分 数的三次方根

给定一个浮点数 n &#xff0c;求它的三次方根。 输入格式 共一行&#xff0c;包含一个浮点数 n 。 输出格式 共一行&#xff0c;包含一个浮点数&#xff0c;表示问题的解。 注意&#xff0c;结果保留 6 位小数。 数据范围 −10000≤n≤10000 输入样例&#xff1a; 1000.00…
阅读更多...
面试题：链表相交

面试题：链表相交

链表相交 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 思路 这个题目有2个思路&#xff0c;我先说容易想到的思路 对齐链表…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023