JAVAEE:采用HTML和JavaScript实现几个基本的页面

news2024/11/6 5:20:57

1.实现效果:

<html>
    <title>学生信息确认</title>
        <body>
            <Form>
                用户名:<input type=text id="usename"><br>
                密码:&nbsp;<input type=password id="userpwd"><br>
                性别:<input type=radio id="sex" value="man">男
                    <input type=radio id="sex" value="woman">女<br>
                爱好:<input type=checkbox id="ai1" value="体育">体育
                    <input type=checkbox id="ai2" value="音乐">音乐<br>
                图片:<input type=file><br>
                <input type=submit value="提交"><input type=reset value="重填">
            </Form>
        </body>
</html>

2.实现效果:

<html>
<head>
    <title>弗雷德网上购物中心</title>
    <style>
        h1{
            font-weight: bold;
            font-size: 36px;
            text-align: center;
        }
        table {
            width: 100%; 
            margin: 0 auto; 
        }
        th,td {
            border: 1.5px solid black;
            padding: 11px;
            text-align: left;
           
        }
        h4{
            font-weight: normal;
            font-size: 20px;
            text-align: center;
           
        }
        input{
            margin-top: 15px; 
            margin-bottom: 15px; 
        }
    </style>
    <h1>欢迎光临弗雷德网上购物中心</h1>
</head>
<body>
    <Form>
        会员姓名:<input type=text id="vipname"><br>
        会员卡号:<input type=text id="vipcard"> 
        <select id="viptype">
            <option value="normalvip">普通会员</option>
            <option value="goldvip">黄金会员</option>
            <option value="diamondvip">钻石会员</option>
        </select><br>
        联系方式:<input type=text id="phone">
        送货地址:<input type=text id="address">
        <h4>
            <text>选择您喜欢的商品</text>
        </h4>
        <table border="1" >
            <tr>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
            </tr>
            <tr>
                <td>脑白金</td>
                <td>¥100.00</td>
                <th> </th>
            </tr>
            <tr>
                <td>富硒康</td>
                <td>¥150.00</td>
                <th> </th>
            </tr>
            <tr>
                <td>葡萄酒</td>
                <td>¥70.00</td>
                <th> </th>
            </tr>
            <tr> 
                <td>美国山核桃</td>
                <td>¥50.00/500g</td>
                <th> </th>
            </tr>
        </table>
        付款方式:<input type=radio id="payway" value="onlinebank">网银
                <input type=radio id="payway" value="zhifubao">支付宝
                <input type=radio id="payway" value="lend">贷款<br>
        <input type=submit value="提交订单"><input type=reset value="清空订单">
    </Form>
</body>

</html>

3.实现效果

<html>
<head>
    <title>水果订单</title>
    <script>
        function calculate() {
            var applenum = parseInt(document.getElementById("applenum").value);
            var orangenum = parseInt(document.getElementById("orangenum").value);
            var applePrice = 2; 
            var orangePrice = 1; 
            var total = (applenum * applePrice) + (orangenum * orangePrice);
            var totall = total*1.05;
            document.getElementById("result").innerHTML = "总价:" + totall.toFixed(2) + "元";
        }
    </script>
</head>
<body>
    <h1>水果订单</h1>
    <form>
        <label for="applenum">苹果数量:</label>
        <input type="number" id="applenum" name="applenum" value="0"><br>

        <label for="orangenum">橘子数量:</label>
        <input type="number" id="orangenum" name="orangenum" value="0"><br>

        <input type="button" value="提交" onclick="calculate()"><br>

        <div id="result"></div>
    </form>
</body>
</html>

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

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

相关文章

华为云云耀云服务器L实例评测|手把手教你搭建MySQL数据库

1. 前言 本文将为读者介绍华为云的云耀云服务器L实例&#xff0c;并提供一份详细的手把手教程&#xff0c;帮助您快速搭建MySQL数据库。 MySQL是一款常用的关系型数据库管理系统&#xff0c;搭建与配置它对于许多业务应用和网站来说都是必需的。本文将以华为云【云耀云服务器L实…

模电2023.9.16

1、放大电路模型 根据功能基本可分为四大类&#xff1a; 电压放大、电流放大、互阻放大和互导放大。 注&#xff1a;互阻放大&#xff1a;电流信号转换为电压信号 互导放大&#xff1a;电压信号转换为电流信号 菱形的电源受控源&#xff0c;圆形的为非受控源 如何区分? 看输入…

【入门篇】ClickHouse 的安装与配置

文章目录 0. 前言ClickHouse的安装1. 添加 ClickHouse 的仓库2. 安装 ClickHouse3. 启动 ClickHouse 服务器4. 使用 ClickHouse 客户端 ClickHouse的配置 1. 详细安装教程1.1. 系统要求1.1. 可用安装包 {#install-from-deb-packages}1.1.1. DEB安装包1.1.1. RPM安装包 {#from-r…

C++中的导入include,头文件,extern,main函数入口及相关编译流程

结论&#xff1a; 1&#xff1a;#include就是复制粘贴 2&#xff1a;C编译的时候&#xff0c;在链接之前&#xff0c;各个文件之间实际上没有联系&#xff0c;只有到了链接的阶段&#xff0c;系统才会到各个cpp文件中去找需要的文件&#xff1b; 一&#xff1a;include的作用…

vue2必备知识点

1、生命周期钩子是如何实现的? 生命周期描述beforeCreatevue实例初始化后&#xff0c;数据观测&#xff08;data observer&#xff09;和事件配置之前。data、computed、watch、methods都无法访问。createdvue实例创建完成后立即调用 &#xff0c;可访问 data、computed、wat…

前端JavaScript中MutationObserver:监测DOM变化的强大工具

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 引言 1. MutationObserver简介 2. MutationObserver的属性 3. MutationObserver的应用场景 3.1 动态内容加载 …

动手学深度学习_个人笔记01_李沐(更新中......)

序言 神经网络——本书中关注的DL模型的前身&#xff0c;被认为是过时的工具。 深度学习在近几年推动了CV、NLP和ASR等领域的快速发展。 关于本书 让DL平易近人&#xff0c;教会概念、背景和代码。 一种结合了代码、数学和HTML的媒介 测试深度学习&#xff08;DL&#xf…

FL Studio21.1.1.3750中文破解百度网盘下载地址含Crack补丁

FL Studio21.1.1.3750中文破解版是最优秀、最繁荣的数字音频工作站 (DAW) 之一&#xff0c;日新月异。它是一款录音机和编辑器&#xff0c;可让您不惜一切代价制作精美的音乐作品并保存精彩的活动画廊。 为方便用户&#xff0c;FL Studio 21提供三种不同的版本——Fruity 版、…

TrOCR——基于transformer模型的OCR手写文字识别

前期我们使用大量的篇幅介绍了手写数字识别与手写文字识别,当然那里主要使用的是CNN卷积神经网络,利用CNN卷积神经网络来训练文字识别的模型。 这里一旦提到OCR相关的技术,肯定第一个想到的便是CNN卷积神经网络,毕竟CNN卷积神经网络在计算机视觉任务上起到了至关重要的作用…

打造“共富果园” 广东乳源推动茶油全产业链高质量发展

新华网广州9月13日电&#xff08;李庆招&#xff09;金秋九月&#xff0c;瓜果飘香&#xff0c;油茶也将迎来采摘期。13日&#xff0c;一场以“中国健康油 茶油新势力”为主题的乳源茶油12221市场体系之产业大会暨供销对接会在广州举行。来自茶油行业的专家、企业家齐聚一堂&am…

Python模块之time中时间戳、时间字符与时间元组之间的相互转换

时间的三种形式 时间戳&#xff0c;根据1970年1月1日00:00:00开始按秒计算的偏移量。 1694868399 时间格式字符串&#xff0c;字符串形式的时间。 2023-09-16 20:46:39 时间元组&#xff08;struct_time&#xff09;&#xff0c;包含9个元素。 time.struct_time(tm_year2023, …

2023 IDC 中国未来企业大奖优秀奖公布,神策数据助力中信建投获“未来运营领军者”优秀奖称号...

今日&#xff0c;全球领先的 IT 市场研究和咨询公司 IDC 正式公布 2023 IDC 中国未来企业大奖优秀奖名单&#xff0c;神策数据的合作客户中信建投证券股份有限公司&#xff08;简称“中信建投”&#xff09;荣获“未来运营领军者”优秀奖称号。 该奖项是 ICT 领域最具权威的奖项…

直线导轨滑块的固定方式

直线导轨滑块是要安装到导轨上的&#xff0c;利用压力使得滑块固定到导轨上&#xff0c;并调整间隙精度&#xff0c;当机械中有振动或冲击力浸染时&#xff0c;滑块和滑轨很有可能发生松动&#xff0c;从而偏离原来的固定地位&#xff0c;影响运行精度与操作寿命&#xff0c;甚…

RADIUS协议基础原理

RADIUS简介 Radius概述Radius架构(c/s模式)Radius特点Radius报文Radius认证报文Radius计费报文Radius授权报文 Radius工作原理 Radius概述 RADIUS&#xff08;Remote Authentication Dial-In User Server&#xff0c;远程认证拨号用户服务&#xff09;是一种分布式的、C/S架构…

Java设计模式-结构性设计模式(外观设计模式)

简介 ⻔⾯模式&#xff0c;隐藏系统的复杂性&#xff0c;并向客户端提供了⼀个客户端可以访问系统的接⼝定义了⼀个⾼层接⼝&#xff0c;这个接⼝使得这系统更加容易使⽤应用场景 xxx是负责消息推送这个⼯作&#xff0c;看起来很轻松&#xff0c;但他们不知道⾥⾯有多复杂&…

Jenkins结合allure生成测试报告

前言&#xff1a; 我们在做自动化测试的过程中最重要的肯定是报告的输出啦&#xff0c;最近几年allure可以说是最最主流报告展示工具啦。 一、服务端安装allure 在安装Jenkins的机器 安装allure&#xff0c;我们在Jenkins上能跑动前提是在对应服务器上代码能正常运行&#xf…

ESP8266使用记录(一)

1、23.7.17从TB买了个8266 2、下载安装Arduino 3、卖家的配套资料&#xff0c;直接覆盖相关文件 4、文件-首选项-设置-编辑器语言-中文(简体) 其他开发板管理器地址 http://arduino.esp8266.com/stable/package_esp8266com_index.json 5、工具-端口-COM6 工具-开发板-esp8266…

直接插入排序(C++实现)

文章目录 1. 基础概念&#x1f351; 内部排序和外部排序 2. 直接插入排序3. 动图演示4. 代码实现5. 性能分析 无论是日常生活还是很多科学领域当中&#xff0c;排序都是会经常面对的问题&#xff0c;比如按成绩对学校的学生排序&#xff0c;按薪水多少对公司员工排序等。 根据…

Vue系列之入门篇

前言&#xff1a; 目录 一&#xff0c;关于Vue的简介 1.什么是Vue&#xff1f; 2.使用Vue框架的好处&#xff1f; 3. 库和框架的区别&#xff1a; 4. MVVM的介绍 5.Vue的入门案例 二&#xff0c;Vue的生命周期 一&#xff0c;关于Vue的简介 1.什么是Vue&#xff1f; Vu…

详解混合类型文件(Polyglot文件)的应用生成与检测

1. 引入 混合类型文件&#xff08;Polyglot文件&#xff09;&#xff0c;是指一个文件&#xff0c;既可以是合法的A类型&#xff0c;也可以是合法的B类型。 比如参考3中的文件&#xff0c;是一个html文件&#xff0c;可以用浏览器正常打开&#xff1b;它也是一个一个.jar文件&…