JavaScrip练习

news2024/12/23 13:31:46

HTML+JS计算器

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
</head>
<body>
<!-- 计算器显示 -->
<input type="text" id="display" disabled>
<br>
    <!--
        计算器按钮
        onclick :鼠标点击事件
        addToDisplay:添加到显示
     -->
<button onclick="addToDisplay('7')">7</button>
<button onclick="addToDisplay('8')">8</button>
<button onclick="addToDisplay('9')">9</button>
<button onclick="addToDisplay('+')">+</button><br>

<button onclick="addToDisplay('4')">4</button>
<button onclick="addToDisplay('5')">5</button>
<button onclick="addToDisplay('6')">6</button>
<button onclick="addToDisplay('-')">-</button><br>

<button onclick="addToDisplay('1')">1</button>
<button onclick="addToDisplay('2')">2</button>
<button onclick="addToDisplay('3')">3</button>
<button onclick="addToDisplay('*')">*</button><br>

<button onclick="addToDisplay('0')">0</button>
<button onclick="addToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="addToDisplay('/')">/</button><br>

<!-- Calculator script -->
<script>
    //将value值添加到显示器上
    function addToDisplay(value) {
        //文档.获取id元素
        document.getElementById('display').value += value;
    }
    //计算结果并返回
    function calculate() {
        //计算值
        var result = eval(document.getElementById('display').value);
        document.getElementById('display').value = result;
    }
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QjqJVkyz-1685320511518)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230413110624813.png)]

用户输入显示

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <title>User Input Display</title>
</head>
<body>
<!--创建一个标签和输入字段,以便用户输入数据-->
<label for="userInput">输入您的内容:</label>
<input type="text" id="userInput">
<!--创建一个按钮,当用户点击时,嗲用displayInput函数-->
<button onclick="displayInput()">点击查看</button>
<!--创建一个段落元素,用来显示用户输入的内容-->
<p id="displayArea"></p>

<script>
    function displayInput() {
        //获取用户输入的值
        var userInput = document.getElementById("userInput").value;
        //将用户输入的值显示到段落标签中
        document.getElementById("displayArea").innerHTML = userInput;
    }
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KQo6Juy4-1685320511518)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230413111228704.png)]

随机码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Random Verification Code</title>
</head>
<body>
<h1>随机验证码:</h1>
<p id="code"></p>
<button onclick="generateCode()">生成随机码</button>
<script>
    function generateCode() {
        var code = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        for (var i = 0; i < 6; i++) {
            code += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        document.getElementById("code").innerHTML = code;
    }
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XCxeK8w5-1685320511519)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230413113012826.png)]

密码校验

<!DOCTYPE html>
<html>
<head>

   <meta charset="UTF-8">
   <title>Login Page</title>
</head>
<body>
<form>
   <label for="password1">密码:</label>
   <input type="password" id="password1" name="password1"><br><br>
   <label for="password2">重复密码:</label>
   <input type="password" id="password2" name="password2"><br><br>
   <input type="submit" value="提交">
</form>
<script>
   const password1 = document.getElementById("password1");
   const password2 = document.getElementById("password2");
   const form = document.querySelector("form");
   form.addEventListener("submit", function(event) {
      if (password1.value !== password2.value) {
         alert("密码不一致");
         event.preventDefault();
      }
   });
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yxGCjgNt-1685320511519)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230413113030526.png)]

查看密码

<!DOCTYPE html>
<html>
<head>

   <meta charset="UTF-8">
   <title>Login Page</title>
</head>
<body>
<form action="/login" method="post">
   <label for="username">用户名:</label>
   <input type="text" id="username" name="username"><br><br>
   <label for="password">密码:</label>
   <input type="password" id="password" name="password">
   <input type="checkbox" onclick="togglePassword()">查看密码<br><br>
   <input type="submit" value="Submit">
</form>

<script>
   function togglePassword() {
      var passwordField = document.getElementById("password");
      if (passwordField.type === "password") {
         passwordField.type = "text";
      } else {
         passwordField.type = "password";
      }
   }
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LErxheQV-1685320511520)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230413113543882.png)]

点击按钮弹出信息

<button id="btn">点击</button>
<script>
    var btn = document.getElementById('btn'); // 第1步:获取事件源
    // 第2步:注册事件btn.onclick
    btn.onclick = function () { // 第3步:添加事件处理程序(采取函数赋值形式)
        alert('弹出');
    };
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1OPhv9cp-1685321135802)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230529084154346.png)]

登录校验

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<form  action="success.html"  method="get" onsubmit="return checkUserInfo();">

    <table  border="1px" width="450px" align="center">
        <tr>
            <td>用户名:</td>
            <td><input type="text"   id="userName"  /></td>
        </tr>

        <tr>
            <td>手机 :</td>
            <td><input type="text"  class="tel"/></td>
        </tr>

        <tr>
            <td>座机 :</td>
            <td><input type="text"  class="tel"/></td>
        </tr>

        <tr>
            <td colspan="2" align="center"><input type="submit"  value="提交"/>                       </td>
        </tr>

    </table>

</form>

<!--编写函数实现表单数据的验证-->
<script type="text/javascript">

    function   checkUserInfo(){

        //①、找到表单中哪些填入数据信息的控件对象
        var userNameInput = document.getElementById("userName");

        //②、获取输入框中的值(使用的是对象中的value属性)
        var userName_value = userNameInput.value;


        //获取批量元素
        var  tels = document.getElementsByClassName("tel");
        document.getElementsByName('name属性的值');
        document.getElementsByTagName('标签的名称');


        //③、进行校验
        if(""==userName_value){
            alert('用户名必须要填写!');
            return false;
        }else{
            //要求必须至少是6位
            if(userName_value.length<6){
                alert('用户名至少是6位!');
                return false;
            }
        }

        return true;
    }
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2QbVsj5o-1685322305044)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230529085808118.png)]

点击按钮显示内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button onclick="showData();">显示数据</button>
<hr />

<div  id="show">

</div>

<script type="text/javascript">

    function  showData(){

        //找到显示信息的div元素对象
        var div = document.getElementById('show');
        //将显示的数据信息进行嵌入
        //div.innerHTML='这是我要显示的信息...';
        div.innerHTML='<h1>快乐时刻</h1><p>日本在第二次世界大战期间,于1945年8月6日和8月9日,分别遭到美国投掷的两枚原子弹袭击。<br>' +
            '第一颗原子弹于8月6日早上8点15分被投入广岛市中心,称为“小男孩”,造成约14万人死亡、受伤或失踪。<br>' +
            '第二颗原子弹于8月9日上午11点02分被投入长崎市中心,称为“胖子”,造成约7.5万人死亡、受伤或失踪。<br>' +
            '这两次核弹攻击是人类历史上最具毁灭性和残忍性的战争行为之一,也引起了全球对核武器及其使用的深刻反思和警醒。</p>';
    }

</script>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4M8Utmmo-1685322305045)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230529090315333.png)]

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

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

相关文章

数据偏度介绍和处理方法

偏度&#xff08;skewness&#xff09;是用来衡量概率分布或数据集中不对称程度的统计量。它描述了数据分布的尾部&#xff08;tail&#xff09;在平均值的哪一侧更重或更长。偏度可以帮助我们了解数据的偏斜性质&#xff0c;即数据相对于平均值的分布情况。 有时&#xff0c;正…

自主品牌份额持续提升!福特CEO表态,中国车企才是竞争对手

2023年1-4月&#xff0c;中国市场自主品牌乘用车新车交付275.13万辆&#xff0c;份额占比48.63%&#xff0c;两项数字分别比上年同期增长4.68%&#xff0c;以及提升约3个百分点。其中&#xff0c;新能源汽车继续成为主要推动因素。 “中国电动汽车制造商是我们的主要竞争对手&a…

使用Vuex进行状态管理

在Vue.js应用程序中&#xff0c;状态管理是一个重要的主题。当应用程序变得复杂&#xff0c;组件之间的状态共享和通信变得困难&#xff0c;这时候使用Vuex就会变得十分有用。Vuex是一个专门为Vue.js设计的状态管理库&#xff0c;它提供了一个集中式的状态管理方案&#xff0c;…

Logisim 头歌 偶校验编码设计图解及代码(计算机组成原理)

努力是为了不平庸~ 学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。 急的同学请直接点击目录跳到下方解答处&#xff01;&#xff01; 目录 图解&#xff1a; 代码题解&#xff08;免费&#xff09;&#xff1a; 实…

PyTorch-Sequential

Cifar-10用的模型结构&#xff1a; 第一次卷积 (3,32,32) to (32,32,32) 卷积核&#xff08;55&#xff09;&#xff0c;我们需要进行一下计算&#xff0c;看看padding和stride是多少: 未引入Sequential前&#xff1a; import torch from torch import nn from torch.nn impo…

如何用chatGPT赚钱?

赚钱思路 1&#xff09;初级-账号 对于新事物的出现&#xff0c;很多人对此都是抱着一个看热闹的态度&#xff0c;大家对于这个东西的整体认知水平是很低的&#xff01; 所以这个时候的思路就是快速去抢占市场&#xff0c;去各个平台发一些和ChatGPT相关的视频和文章去抢占市…

速递:惠州学院生科院副院长谢海伟一行莅临易基因科技参观交流 | 校企合作

2023年05月26日上午&#xff0c;惠州学院生命科学学院副院长谢海伟教授、陈兆贵教授、陈勇智博士、龚浩博士及生科院本科毕业生陈佳良一行5人莅临深圳市易基因科技有限公司参观交流&#xff0c;并举行“惠州学院实践教学基地“挂牌仪式。易基因总经理王君文、副总经理丁振东等公…

vue项目中使用depcheck检查缺失的依赖项目

使用depcheck检查缺失的项目依赖 由来&#xff1a;今天在做地铁的时候&#xff0c;刷短视频发现一个非常好用的东西&#xff0c;分享一下 它可以帮助我们找出问题&#xff0c;在 package.json 中&#xff0c;每个依赖包如何被使用、哪些依赖包没有用处、哪些依赖包缺失。它是解…

EMC测试中放大器的线性度验证

在进行EMC抗扰度测试时&#xff0c;必须在所有适用的测试频率下检查所用射频功率放大器的线性度。检查方法如下&#xff1a; 确定产生测试电平所需的功率&#xff0c;包括调制。例如: 测试电平:10v /m 调制:80% AM, 1 kHz 所需场强包括调制:18 V/m 辐射抗干扰校准配置示例 在特…

【LED子系统】九、数据结构详解(番外篇)

个人主页&#xff1a;董哥聊技术 我是董哥&#xff0c;高级嵌入式软件开发工程师&#xff0c;从事嵌入式Linux驱动开发和系统开发&#xff0c;曾就职于世界500强公司&#xff01; 创作理念&#xff1a;专注分享高质量嵌入式文章&#xff0c;让大家读有所得&#xff01; 文章目录…

AI大爆炸 | ChatGPT引爆AI热潮,大佬怎么看?

ChatGPT在AI领域点起的大火&#xff0c;从去年烧到了今年。以ChatGPT为代表的AIGC(人工智能生成内容)在全球风靡&#xff0c;多个代表性AI大模型纷纷涌现&#xff0c;不少业内人士高呼以人机智能融合为主要特征的“AI 2.0时代”已经来临。      有人为人工智能引领未来的广…

jQuery-表中数据的添加与删除

<!DOCTYPE HTML> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8"> <title>表中数据的添加与删除</title> <link rel"stylesheet" type"text/css&quo…

vue插槽使用总结

什么是插槽解决什么问题插槽的分类默认插槽具名插槽作用域插槽 什么是插槽 插槽就是子组件中的提供给父组件使用的一个占位符&#xff0c;用 表示&#xff0c;父组件可以在这个占位符中填充任何模板代码&#xff0c;如 HTML、组件等&#xff0c;填充的内容会替换子组件的标签。…

Arcgis小技巧【13】——数据统计(Statistics)相关工具汇总

在Arcgis中可以通过属性表中字段的【统计】功能或使用统计相关的工具对属性表进行数据统计。 在Arcgis工具箱中有一组【统计分析】工具集&#xff0c;不仅包含对属性数据执行标准统计分析&#xff08;例如平均值、最小值、最大值和标准差&#xff09;的工具&#xff0c;也包含…

理解时序数据库的时间线

在当今数据爆炸的时代&#xff0c;时序数据已经成为企业和组织中不可或缺的一部分。它们包括了从传感器、监控设备、日志记录系统和金融交易等多种来源的大量数据&#xff0c;这些数据按照时间顺序排列&#xff0c;记录了各种事件和活动的发生和变化。时序数据的分析和处理对于…

通过python封装1688图片搜索商品数据接口,拍立淘API接口

1688图片搜索API封装接口是一个可以帮助用户快速使用1688图片搜索API的接口封装库。该接口封装库可以帮助用户快速引入1688图片搜索API&#xff0c;并提供各种参数配置和封装的API调用方法&#xff0c;以方便用户快速实现自己的图片搜索需求。 该接口封装库将1688图片搜索API的…

Redis Hash(散列表)实现原理看这篇就够了

1. 是什么 Redis Hash&#xff08;散列表&#xff09;是一种 field-value pairs&#xff08;键值对&#xff09;集合类型&#xff0c;类似于 Python 中的字典、Java 中的 HashMap。一个 field 对应一个 value&#xff0c;你可以通过 field 在 O(1) 时间复杂度查 field 找关联的…

Qt+QtWebApp开发笔记(四):http服务器使用Session和Cookie实现用户密码登录和注销功能

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/130921152 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…

信号量对象没有所有者

相较于互斥对象(Mutex)和临界区对象(Critical Section) &#xff0c;信号量没有所有者&#xff0c;它们只有计数。 ReleaseSemaphore 函数将会以指定的数量增加对应信号量对象的计数。 (增加计数这个动作&#xff0c;可能会释放正在等待的线程&#xff09;但是释放信号量的线程…

metaIPC2.0 SDK实现webRTC对讲IPC

概述 metaRTC新推出P2P版metaIPC2.0 sdk版本&#xff0c;基于mqtt通信&#xff0c;同时支持windows/linux/android操作系统&#xff0c;支持国内如海思/君正/瑞芯微/MSTAR等主流芯片。 metaIPC2.0支持linux/android/windows IPC&#xff0c;客户端支持浏览器/APP/windows和li…