6.22(js–>案例应用)

(练习1)简易计算器:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加法计算器title>
<style>
    input {
        width: 50px;
    }
style>
    head>

<body>
  <script>
    function calc() {
        var num1 = document.getElementById("num1").value;
        var num2 = document.getElementById("num2").value;
        num1 = parseFloat(num1);
        num2 = parseFloat(num2);
        var result = num1 + num2;
        document.getElementById("result").value = result;

    }
    script>
   <input type="text" id="num1"> +

        <input type="text" id="num2">
        =
        <input type="text" id="result">

        <input type="button" value="运算" onclick="calc()">

body>
html>

6.22(js-->案例应用)
(练习2)黄鹤
<html>
<script>
    function generate() {
        var location = $("location");
        var companyType = $("companyType");
        var companyName = $("companyName");
        var bossName = $("bossName");
        var money = $("money");
        var product = $("product");
        var unit = $("unit");

        var result = location + "最大" + companyType + companyName + "倒闭了,王八蛋老板" + bossName + "吃喝嫖赌,欠下了" + money + "个亿,"
            + "带着他的小姨子跑了!我们没有办法,拿着" + product + "抵工资!原价都是一" + unit + "多、两" + unit + "多、三" + unit + "多的" + product + ","
            + "现在全部只卖二十块,统统只要二十块!" + bossName + "王八蛋,你不是人!我们辛辛苦苦给你干了大半年,"
            + "你不发工资,你还我血汗钱,还我血汗钱!";

        document.getElementById("result").value = result;

    }

    function $(id) {
        var value = document.getElementById(id).value;
        return value;
    }

script>

<style>
    body {
        font-family: 宋体;
    }

    span {
        display: inline-block;
        border: 1px solid lightgray;
        width: 120px;
        margin-bottom: 5px;
    }

    button#generate {
        width: 80px;
        height: 30px;
    }

    textarea {
        width: 100%;
        height: 150px;
        margin-top: 20px;
    }
style>

<body>
    <span>地名:span> <input type="text" id="location" value="浙江">
    <span>公司类型:span> <input type="text" id="companyType" value="互联网公司">

    <span>公司名称:span> <input type="text" id="companyName" value="阿里九九">
    <span>老板姓名:span> <input type="text" id="bossName" value="牛风">

    <span>money:span> <input type="text" id="money" value="一万">
    <span>产品:span> <input type="text" id="product" value="贴膜">

    <span>价格计量单位:span> <input type="text" id="unit" value="百">


    <div align="center">
        <button id="generate" onclick="generate()">生成button>

        <textarea
            id="result">浙江最大互联网公司阿里九九倒闭了,王八蛋老板牛风吃喝嫖赌,欠下了一万个亿,带着他的小姨子跑了!我们没有办法,拿着贴膜抵工资!原价都是一百多、两百多、三百多的贴膜,现在全部只卖二十块,统统只要二十块!牛风王八蛋,你不是人!我们辛辛苦苦给你干了大半年,你不发工资,你还我血汗钱,还我血汗钱!textarea>
    div>



body>

html>

6.22(js-->案例应用)
我得加快速度复习了,时间不等人
6.22(js-->案例应用)

Original: https://www.cnblogs.com/GeniusWang/p/15644219.html
Author: Genius_Wang
Title: 6.22(js–>案例应用)

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/583150/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • 到底什么是TORCH.NN?

    该教程是在notebook上运行的,而不是脚本,下载notebook文件。 PyTorch提供了设计优雅的模块和类: torch.nn, torch.optim, Dataset,…

    Linux 2023年6月14日
    0105
  • Guava中的封装的Map操作

    引入依赖 <dependency> <groupId>com.google.guavagroupId> <artifactId>guava…

    Linux 2023年6月7日
    0112
  • LRU原理和Redis实现——一个今日头条的面试题(转载)

    很久前参加过今日头条的面试,遇到一个题,目前半部分是如何实现 LRU,后半部分是 Redis 中如何实现 LRU。 我的第一反应是操作系统课程里学过,应该是内存不够的场景下,淘汰旧…

    Linux 2023年5月28日
    093
  • 初识前后端

    初识前后端 在学习了解前后端的过程中,自己看到了这一篇好的文章,摘下了一些当下用的的内容,供复习参考。 什么是前端开发? 前端开发主要涉及网站和 App,用户能够从 App 屏幕或…

    Linux 2023年6月13日
    0113
  • Linux显示IP和主机名

    (1) ifconfig:Linux ifconfig命令用于显示或设置网络设备。 语法: ifconfig [网络设备][down up -allmulti -arp -prom…

    Linux 2023年6月8日
    0107
  • 文本编辑命令

    一、vim编辑器 1、vim的三种模式 一般模式(正常模式):以vim打开文件就直接进入到此模式,此模式中可以使用上下左右按键进行移动光标,也可以在此模式下进行文件的复制粘贴删除等…

    Linux 2023年6月6日
    0110
  • Windows通过命令行共享文件

    基本语法: 比如: 与域中的每个人共享文件夹E:\Documents并授予完全权限 如果允许多个用户访问共享,则可以限制同时访问共享的用户数量。这将防止对系统的性能影响。以下命令将…

    Linux 2023年6月8日
    0121
  • Linux命令之find、grep、echo、tar、whoami、uname

    1. whoami–查看当前登录的用户名 book@100ask:~/linux$ whoami book 2. echo–打印命令,配合’&g…

    Linux 2023年6月6日
    0101
  • 初识MySQL数据库

    一 、引言 假设现在你已经是某大型互联网公司的高级程序员,让你写一个火车票购票系统,来hold住双十一期间全国的购票需求,你怎么写? 由于在同一时段抢票的人数太多,所以你的程序不可…

    Linux 2023年6月14日
    0121
  • Redis安装及HA(High Availability)配置

    Redis是一种内存数据库,以KEY-VALUE(即键值对)的形式存储数据。这篇文章主要介绍的是Redis安装及配置,所以不对Redis本身作详细介绍了。 下 载: 解 压: 以r…

    Linux 2023年5月28日
    080
  • Shell实现:基本功能

    独立博客阅读地址:https://panqiincs.me/2017/02/26/write-a-shell-basic-functionality/ Shell的功能 Shell…

    Linux 2023年6月7日
    0132
  • 数字数组

    3、【剑指Offer学习】【面试题03:找出数组中重复的数字】 4、【剑指Offer学习】【面试题04:二维数组中的查找】 11、【剑指Offer学习】【面试题11:旋转数组的最小…

    Linux 2023年6月13日
    0123
  • Spring Security登录的流程

    Spring Security登录的流程 1、UsernamePasswordAuthenticationFilter这过滤器开始 attemptAuthentication方法 …

    Linux 2023年6月7日
    0199
  • Redis主从复制、哨兵、Cluster三种模式

    Redis作为缓存的高效中间件,在我们日常的开发中被频繁的使用,今天就来说一说Redis的四种模式,分别是 「单机版、主从复制、哨兵、以及集群模式」。 可能,在一般公司的程序员使用…

    Linux 2023年5月28日
    0100
  • 误操作使用fdisk删除了/root所在分区,该如何把文件拷贝出来

    误操作 fdisk命令误操作,将 /root 所在分区删除后新建了…… 恢复尝试1 起初以为是改一下 /etf/fstab 就好了,于是进入急救模式,尝试 …

    Linux 2023年6月8日
    0129
  • Linux netstat:查看网络状态

    netstat 主要用于网络监控,在进程管理方面也很重要。它的输出分为两大部分,分别是网络和系统自己的进程相关性部分。 netstat [-atunlp] -a 列出目前系统上所有…

    Linux 2023年6月13日
    096
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球