html+CSS+js部分基础运用12

一、显示列表项的内容

编写javaScript代码实现用户登录时数据合法性校验功能，界面如图教材P338 第2题，效果如下图所示：

图1 显示列表项内容

二、日期的处理

    实时显示当前时间及累计登录时间，如下图2所示。[提示window.setInterval(function,1000),onload事件]。

图2时间处理

三、实现电话拨号键盘

如图3所示，点击数字文本框中会依次显示拨打的号码。

图3拨号键盘

  • （写清楚每一步骤，包含文字说明、代码）

 1

、<script>

        function $(id) {

            return document.getElementById(id);

        }

        function sum() {

            var index =$("a").selectedIndex;

            var x=$("a").options[index].value;

            var z=$("a").options[index].text;

            alert("教材名称："+z+"\n"+"定价："+x);

        }

</script>

 <select name="" id="a" size="5" onChange="sum()">

  • 2.
  • 写js函数和借助onChange属性。

<script>

         var now1=new Date();

         var y2=now1.getFullYear();

         var m2=now1.getMonth()+1;

         var d2=now1.getDate();

         var h2=now1.getHours();  

         var mi2=now1.getMinutes();  

         var s2=now1.getSeconds();

        function time() {

            var now=new Date();

           

           

            var y=now.getFullYear();

            var m=now.getMonth()+1;

            var d=now.getDate();

            var h=now.getHours();  

            var mi=now.getMinutes();  

            var s=now.getSeconds();

            document.getElementById("time").innerHTML = "当前时间："+y + "年" + m + "月" + d + "日" + "\t" + h + ":" + mi +":" + s;    

            var y1=y-y2;

            var m1=m-m2;

            var d1=d-d2;

            var h1=h-h2;  

            var mi1=mi-mi2;  

            var s1=s-s2;

            document.getElementById("time1").innerHTML = "您已登录，累计时间："+y1 + "年" + m1 + "月" + d1 + "日" + "\t" + h1 + ":" + mi1 +":" + s1;

        }

        setInterval("time()",1000);

    </script>

借助js本身获取Date()时间函数再结合取时间的c值最后加上调用id就可以完成功能。

3.

 <script>

        function sum(num) {

            document.getElementById("text1").value+=num;

        }

    </script>

 <form action="">

        <input type="text"  id="text1"><br><br>

借助<script>函数加上id的调用就可以完成功能。

1.

1

2.

                                2

3.

3

  • 1.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script>

        function $(id) {

            return document.getElementById(id);

        }

        function sum() {

            var index =$("a").selectedIndex;

            var x=$("a").options[index].value;

            var z=$("a").options[index].text;

            alert("教材名称："+z+"\n"+"定价："+x);

        }

    </script>

</head>

<body>

    <h3>显示列表的内容</h3>

    <form action="">

        <select name="" id="a" size="5" onChange="sum()">

            <option value="35元">计算机组成原理</option>

            <option value="38元" >数据结构</option>

            <option value="43元">计算机网络</option>

            <option value="40元">java程序设计</option>

            <option value="28元">算法分析</option>

        </select>

    </form>

</body>

</html>

  • 2.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script>

         var now1=new Date();

         var y2=now1.getFullYear();

         var m2=now1.getMonth()+1;

         var d2=now1.getDate();

         var h2=now1.getHours();  

         var mi2=now1.getMinutes();  

         var s2=now1.getSeconds();

        function time() {

            var now=new Date();

           

           

            var y=now.getFullYear();

            var m=now.getMonth()+1;

            var d=now.getDate();

            var h=now.getHours();  

            var mi=now.getMinutes();  

            var s=now.getSeconds();

            document.getElementById("time").innerHTML = "当前时间："+y + "年" + m + "月" + d + "日" + "\t" + h + ":" + mi +":" + s;    

            var y1=y-y2;

            var m1=m-m2;

            var d1=d-d2;

            var h1=h-h2;  

            var mi1=mi-mi2;  

            var s1=s-s2;

            document.getElementById("time1").innerHTML = "您已登录，累计时间："+y1 + "年" + m1 + "月" + d1 + "日" + "\t" + h1 + ":" + mi1 +":" + s1;

        }

        setInterval("time()",1000);

    </script>

</head>

<body>

    <h2 style="text-align: center;">date的处理</h2>

    <hr>

    <h3 id="time" style="text-align: center;"></h3>

    <h3 id="time1" style="text-align: center;"></h3>

</body>

</html>

3.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script>

        function sum(num) {

            document.getElementById("text1").value+=num;

        }

    </script>

</head>

<body>

    <h2>实现电话拨号键盘</h2>

    <hr>

    <form action="">

        <input type="text"  id="text1"><br><br>

        <input type="button" onclick="sum('1')" value="1" >

        <input type="button" onclick="sum('2')" value="2" >

        <input type="button" onclick="sum('3')" value="3" ><br>

        <input type="button" onclick="sum('4')" value="4" >

        <input type="button" onclick="sum('5')" value="5" >

        <input type="button" onclick="sum('6')" value="6" ><br>

        <input type="button" onclick="sum('7')" value="7" >

        <input type="button" onclick="sum('8')" value="8" >

        <input type="button" onclick="sum('9')" value="9" ><br>

        <input type="button" onclick="sum('*')" value="*" >

        <input type="button" onclick="sum('0')" value="0" >

        <input type="button" onclick="sum('#')" value="#" >

    </form>

</body>

</html>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

两款 IntelliJ IDEA 的 AI 编程插件

两款 IntelliJ IDEA 的 AI 编程插件

介绍两款 IntelliJ IDEA 的 AI 编程插件&#xff1a;通义灵码和 CodeGeeX。 通义灵码 这是由阿里推出的一个基于通义大模型的 AI 编码助手。 它提供了代码智能生成、研发智能问答等功能。通义灵码经过海量优秀开源代码数据训练&#xff0c;可以根据当前代码文件及跨文件的上下…
阅读更多...
【Moveit】step或stl文件转urdf，并添加到机械臂上

【Moveit】step或stl文件转urdf，并添加到机械臂上

【Moveit】step或stl文件转urdf&#xff0c;并添加到机械臂上 文章目录 【Moveit】step或stl文件转urdf&#xff0c;并添加到机械臂上1. 安装sw_urdf_exporter插件2. 导出urdf3. 将夹爪连接到机械臂上4. 使用moveit_setup_assistant配置功能包Reference ROS专门提供了一种机器人…
阅读更多...
clion配置ssh隧道转发 实现远程主机功能

clion配置ssh隧道转发 实现远程主机功能

clion配置ssh隧道转发 clion自带的ssh配置只能配置主机和用户名的格式来实现ssh&#xff0c;因此如果需要通过中间设备来访问调试主机的话就无法使用了。 配置ssh隧道的方式有两种&#xff0c;一种是直接配置 ~/.ssh/config 配置文件&#xff0c;一种是使用跳板机工具。clion…
阅读更多...
Java邮件客户端设计实现：使用JavaMail向QQ邮箱发邮件

Java邮件客户端设计实现：使用JavaMail向QQ邮箱发邮件

目录 JavaMail 用JavaMail向qq邮箱发消息 ▐ 授权码的获取 JavaMail JavaMail 是一个用于发送和接收电子邮件的 Java API。它提供了一个平台无关和协议无关的框架&#xff0c;允许开发人员通过标准电子邮件协议&#xff08;如 SMTP、POP3 和 IMAP&#xff09;来创建、发送…
阅读更多...
【TB作品】MSP430 G2553 单片机口袋板，电风扇模拟控制系统设计

【TB作品】MSP430 G2553 单片机口袋板，电风扇模拟控制系统设计

功能 电风扇模拟控制系统设计 基本要求: 用LED/LCD 显示电风扇的工作状态 (1,2,3,4 四档风力), 显示风类:“自然风”、“常风”和“睡眠风”。 设计 “自然风”“常风”和“睡眠风” 三个风类键用于设置风类 设计一个“摇头”键用于控制电机摇头。 设计一个“定时”键&#x…
阅读更多...
如何快速理解并掌握Java泛型的概念和使用方法

如何快速理解并掌握Java泛型的概念和使用方法

Java泛型&#xff08;Generics&#xff09;是Java SE 5引入的一种语言特性&#xff0c;旨在增强类型安全性和代码的重用性。泛型允许类、接口和方法操作对象的特定类型&#xff0c;同时在编译时进行类型检查。通过使用泛型&#xff0c;我们可以编写更通用、更灵活的代码&#x…
阅读更多...
Linux用docker安装ElasticsearchSpringBoot整合ES

Linux用docker安装ElasticsearchSpringBoot整合ES

一. 部署Elasticsearch 1. docker查询docker容器中的es docker search elasticsearch 2. 安装&#xff08;PS&#xff1a;查看自己的springBoot的版本号 对应的es版本安装&#xff09; docker pull elasticsearch:7.6.23. 查看已安装的docker镜像 docker images4. 创建挂…
阅读更多...
再论Web应用在医学研究中构建数据收集问卷(stremlit_survey包体验)

再论Web应用在医学研究中构建数据收集问卷(stremlit_survey包体验)

再论Web应用在医学研究中构建数据收集问卷&#xff08;Streamlit_survey包体验&#xff09; 概述 医学队列研究是临床研究的重要形式&#xff0c;这种研究通过收集临床诊疗过程中产生的数据而阐述疾病相关的因素。在临床数据收集过程中&#xff0c;Web APP体现出了一定的优势…
阅读更多...
SpringBoot项目本地运行正常，jar包运行时前端报错403：No mapping for......

SpringBoot项目本地运行正常，jar包运行时前端报错403：No mapping for......

SpringBoot项目本地运行正常&#xff0c;jar包运行时前端报错403&#xff1a;No mapping for… 提示&#xff1a;在部署jar包到云服务器上之前&#xff0c;一定要在本地运行jar包&#xff0c;查看前端代码是否运行正常&#xff0c;若报错的话可以节省很多时间 方式&#xff1a;…
阅读更多...
Linux命令篇（六）：vi/vim专项

Linux命令篇（六）：vi/vim专项

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝您生活愉快&#xff01; 文章目录 一、什么是vim二…
阅读更多...
弘君资本：如何看待股价波动？

弘君资本：如何看待股价波动？

在股票商场上股价的动摇无疑是投资者最为关怀的话题之一&#xff0c;面临股价的起伏不定投资者往往会感到迷茫和焦虑。对于怎么看待股价动摇&#xff0c;弘君资本下面就为我们具体介绍一下。 股价动摇是股市运转的常态&#xff0c;股市是国民经济的晴雨表&#xff0c;股票价格…
阅读更多...
关于大模型是否开源的分析

关于大模型是否开源的分析

引言 随着科技的迅速发展&#xff0c;大模型技术成为推动人工智能前沿的引擎&#xff0c;而开源与闭源之争成为这场技术风暴中的一道独特风景。特斯拉CEO马斯克的言论将开源的旗帜高高举起&#xff0c;宣示着技术的共享和合作的时代已经来临。然而&#xff0c;在数字化时代&am…
阅读更多...
机器视觉检测--光源

机器视觉检测--光源

一&#xff0c;环形光源 较为常见的LED光源之一&#xff0c;提供基本的照明作用。 随着光源距离产品的工作距离LWD变化而产生的亮度分布&#xff0c;如下图暖色表示亮&#xff1b;冷色表示暗。 同时该图示是针对特定一款大小的环形光源的数据&#xff08;下同&#xff09;。 二…
阅读更多...
【二进制部署k8s-1.29.4】八、worker端安装kubelet和cotainerd

【二进制部署k8s-1.29.4】八、worker端安装kubelet和cotainerd

文章目录 简介 一.安装containerd1.1.安装containerd1.2.生成containerd配置文件并启动 二.安装kubelet并配置启动文件2.1.准备kubelet配置文件及证书2.2.安装kubelet2.3.配置启动脚步 三.将node节点加入集群注意事项 简介 本章节主要讲解安装containerd和kubelet,containerd主…
阅读更多...
【Android】使用EventBus进行线程间通讯

【Android】使用EventBus进行线程间通讯

EventBus 简介 EventBus&#xff1a;github EventBus是Android和Java的发布/订阅事件总线。 简化组件之间的通信 解耦事件发送者和接收者 在 Activities, Fragments, background threads中表现良好 避免复杂且容易出错的依赖关系和生命周期问题 Publisher使用post发出…
阅读更多...
什么是公有云？与私有云的区别

什么是公有云？与私有云的区别

公有云是指第三方提供商通过公共Internet为用户提供的云服务&#xff0c;用户可以通过Internet访问云并享受各类服务&#xff0c;包括并不限于计算、存储、网络等。公有云服务的模式可以是免费或按量付费。 微 思 | 好 课 推 荐 &#xff08;全国直播&#xff09; 【公有云】华…
阅读更多...
Nginx企业级负载均衡：技术详解系列（18）—— 作为上传服务器

Nginx企业级负载均衡：技术详解系列（18）—— 作为上传服务器

你好&#xff0c;我是赵兴晨&#xff0c;97年文科程序员。 在上一期的技术分享中&#xff0c;我们探讨了如何高效搭建Nginx下载服务器&#xff0c;并讨论了长连接优化策略。那么今天&#xff0c;咱们进一步了解Nginx的另一面——作为上传服务器的配置技巧。 作为上传服务器&a…
阅读更多...
Ollama 如何排除故障

Ollama 如何排除故障

Ollama 日志 Mac 有时&#xff0c;Ollama 可能无法如你所愿运行。解决问题的一个好方法是查看日志。在 Mac 上&#xff0c;你可以通过运行以下命令来查看日志&#xff1a; cat ~/.ollama/logs/server.logLinux 在使用 systemd 的 Linux 系统上&#xff0c;可以用这个命令查…
阅读更多...
Elastic Security 在 AV-Comparatives 的恶意软件防护测试中表现出色

Elastic Security 在 AV-Comparatives 的恶意软件防护测试中表现出色

作者&#xff1a;Jamie Hynds, Tamarian Del Conte, Roxana Gheorghe 针对真实恶意软件提供 100% 防护&#xff0c;零误报 Elastic Security 在最近的 AV-Comparatives 恶意软件防护测试中取得了显著的成绩&#xff0c;防护率达到 100%&#xff0c;且对真实恶意软件样本无误报…
阅读更多...
Proteus 安装报错There is a problem with this Windows lnstaller package

Proteus 安装报错There is a problem with this Windows lnstaller package

Proteus 安装常见问题 1.安装秘钥(许可证)的时候报错 报错信息如下所示&#xff1a; There is a problem with this Windows lnstaller package. A program required for this instalt to compiete coutd notbe run,contact your support personnet or packagevendor. 这个是…
阅读更多...
最新文章

Copyright @ 2022~2023