首页 > 其他分享 >JS入门第一节

JS入门第一节

时间:2023-08-18 17:46:48浏览次数:34  
标签:prompt 入门 num2 第一节 alert let JS 输入 num1

image

<!DOCTYPE>
<html>
<head>
    <!--注意两个标签之间不能有任何内容,否则会导致页面失效-->
    <script src="my.js"></script>
</head>
<body>
    <!--行内JS-->
    <button onclick="alert('努力,奋斗')">点击触发页面弹窗</button>

    <!--内部JS一般放在body内部的末尾,因为会影响后面其他类型标签的渲染-->
    <!--script 标签是按照出现的位置执行的-->
    <script>
        alert('努力,奋斗');
    </script>
</body>
</html>
<!--外部 js 文件-->
alert('努力,奋斗')

image

<script>
	alert('你好 JS~')
	document.write('JavaScript 我来了!')
	console.log('它~会魔法吧~')
</script>

image

<script>
        let num = 20;
        let uname = '张三';
        console.log(`num = ${num}, uname = ${uname}`);
</script>

image

<script>
        let name;
        name = prompt('请输入姓名:');
        document.write('您的姓名为: ' + name);
</script>

image

<script>
        let num1 = 10;
        let num2 = 20;
        let temp = num1;
        num1 = num2;
        num2 = temp;

        document.write(`num1 = ${num1}, num2 = ${num2}`);
</script>

image

<script>
        let uname, age, gender;
        uname = prompt('请输入您的姓名:');
        age = prompt('请输入您的年龄:');
        gender = prompt('请输入您的性别:');

        document.write(`uname = ${uname}, age = ${age}, gender = ${gender}`);
</script>

image

<script>
        let week = [
            '星期一',
            '星期二',
            '星期三',
            '星期四',
            '星期五',
            '星期六',
            '星期日',
        ]

        document.write(week[6]);
</script>

image

<script>
        const pi = 3.14;
        let area;
        let r = prompt('请输入半径');
        are = pi * r * r;
        document.write('圆的面积为:'+area);
</script>

image

<script>
        let uname, age;
        uname = prompt('请您输入姓名');
        age = prompt('请您输入年龄');
        document.write(`大家好,我叫${uname},今年${age}岁了`);
</script>

<script>
        let num1, num2;
        num1 = prompt('请输入第一个数');
        num2 = prompt('请输入第二个数');
        document.write(`sum = ${Number(num1) + parseInt(num2)}`);
</script>

<script>
        let price, num, address;
        price = prompt('请输入商品价格:');
        num = prompt('请输入商品数量:');
        address = prompt('请输入收货地址:');

        document.write(`price = ${price}, num = ${num}, address = ${address}`);
</script>

<!DOCTYPE>
<html>
<head>
    <style>
        h2 {
          text-align: center;
        }
    
        table {
          /* 合并相邻边框 */
          border-collapse: collapse;
          height: 80px;
          margin: 0 auto;
          text-align: center;
        }
    
        th {
          padding: 5px 30px;
        }
    
        table,
        th,
        td {
          border: 1px solid #000;
        }
      </style>
</head>
<body>
    
    

    <h2>订单确认</h2>
    <script>     
        let price, num, address;  
        price = prompt('请输入商品价格:');
        num = prompt('请输入商品数量:');
        address = prompt('请输入收货地址:');
        let sum = price * num;

        document.write(`
            
            <table>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>总价</th>
                    <th>收货地址</th>
                </tr>
                <tr>                   
                    <td>小米手机青春PLUS</td>
                    <td>${price}元</td>
                    <td>${num}</td>
                    <td>${sum}元</td>
                    <td>${address}</td>
                </tr>
            </table>
        `);
    </script>  
</body>
</html>

标签:prompt,入门,num2,第一节,alert,let,JS,输入,num1
From: https://www.cnblogs.com/20200109-zwh/p/17639580.html

相关文章

  • 构建高性能的后端服务:使用 Node.js、Express 和 MongoDB
    在现代应用开发中,构建高性能的后端服务是关键所在。本文将介绍如何使用Node.js、Express框架和MongoDB数据库来构建一个高性能的后端服务,实现数据存储与检索。为什么选择Node.js、Express和MongoDB?Node.js:Node.js是一个基于ChromeV8引擎的JavaScript运行时,具有非阻塞......
  • 前端基础-js
    一.Map和Set有什么区别在JavaScript中,Map和Set都是ES6引入的新的数据结构,但它们有一些关键的区别。Map:1. Map主要用于键值对的存储。每个元素由一对键值组成。2. Map中的键可以是任何类型,包括函数、对象等。3. Map的键是有序的,因此当对Map进行遍历时,元素的顺序是插入时的顺序......
  • js获取当前月的第一天和最后一天
    可以使用Date对象来获取当前月的第一天和最后一天。获取当前月的第一天:vardate=newDate();date.setDate(1);varfirstDay=date.toLocaleDateString();console.log(firstDay);获取当前月的最后一天:vardate=newDate();date.setMonth(date.getMonth()+1);dat......
  • 【HarmonyOS】服务卡片 API6 JSUI跳转不同页面
    ​【引言】“JS卡片支持为组件设置action,包括router事件和message事件,其中router事件用于应用跳。若设置router事件,则action属性值为"router";abilityName为卡片提供方应用的跳转目标Ability名;params中的值按需填写,其值在使用时通过intent.getStringParam("params")获取即可;”这一......
  • ansible入门指南 - 常用的Ad-Hoc指令
    常用的Ad-Hoc指令ansible命令的基本语法为ansible-mmodule-aparams-iinventory.yaml-f5-uusernameall-m指定运行的模块,缺省值为ansible.builtin.command,即在服务器上直接运行命令-a指定模块的参数-i指定inventory文件-f指定同时运行的数量,缺省值为......
  • ansible入门指南 - ansible的常用命令
    ansible的常用命令运行ansible命令的时候会使用ansible.cfg配置文件配置文件优先级为ANSIBLE_CONFIG指定的文件>~/.ansible.cfg>/etc/ansible/ansible.cfgansibleansible命令可以用来运行ad-hoc指令ansible-config配置文件相关的功能,可以运行以下命令生成一个默......
  • C++快速入门 第四十二讲:链接和作用域
    与作用域有关的另一个概念是链接,当同时编译多个文件时,每个源文件被称为一个翻译单元,在某一个翻译单元里定义的东西在另一个翻译单元里使用正是链接发挥作用的地方。存储类(storageclass):每个变量都有一个存储类,它决定着程序将把变量的值储存在计算机的什么地方、如何存储、以及变......
  • C++快速入门 第四十三讲:链接和作用域2
    1header.h文件23#ifndefHEADER_H4#defineHEADER_H56unsignedlongreturnFactorial(unsignedshortnum);7staticconstunsignedshortheaderNum=5;//定义静态恒定值的全局变量89#endif1011that.cpp文件:1213#include"header.h"14uns......
  • C++快速入门 第四十五讲:类模板
    类模板与函数模板非常相似,同样是先由你编写一个类的模板,再由编译器在你第一次使用这个模板时生成的实际代码。实例:栈的出入栈1#include<iostream>2#include<string>34template<classT>5classStack//栈类6{7public:8Stack(unsignedintsize=......
  • C++快速入门 第四十四讲:函数模板swap使用
    泛型编程技术支持程序员创建函数和类的蓝图(即模板,template),而不是具体的函数和类。标准模板库STL(StandardTemplateLibrary),STL库是泛型编程技术的经典之作,它包含了许多非常有用的数据类型和算法。当拥有一个模板时,编译器将根据模板自动创建一个函数,该函数会使用正确的数据类型......