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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

鸿蒙开发接口资源调度：【@ohos.workScheduler (延迟任务调度)】

鸿蒙开发接口资源调度：【@ohos.workScheduler (延迟任务调度)】

延迟任务调度 本模块提供延迟任务注册、取消、查询的能力。 开发者在开发应用时&#xff0c;通过调用延迟任务注册接口&#xff0c;注册对实时性要求不高的延迟任务&#xff0c;该任务默认由系统安排&#xff0c;在系统空闲时根据性能、功耗、热等情况进行调度执行。 说明&am…
阅读更多...
【开源三方库】Fuse.js：强大、轻巧、零依赖的模糊搜索库

【开源三方库】Fuse.js：强大、轻巧、零依赖的模糊搜索库

1.简介 Fuse.js是一款功能强大且轻量级的JavaScript模糊搜索库&#xff0c;支持OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09;操作系统&#xff0c;它具备模糊搜索和排序等功能。该库高性能、易于使用、高度可配置&#xff0c;支持多种数据类型和多语…
阅读更多...
大模型ChatGLM的部署与微调

大模型ChatGLM的部署与微调

前言&#xff1a;最近大模型太火了&#xff0c;导师让我看看能不能用到自己的实验中&#xff0c;就想着先微调一个chatGLM试试水&#xff0c;微调的过程并不难&#xff0c;难的的硬件条件跟不上&#xff0c;我试了一下lora微调&#xff0c;也算跑通了吧&#xff0c;虽然最后评估…
阅读更多...
【问题随记】tightvnc 连接后灰屏

【问题随记】tightvnc 连接后灰屏

问题描述 刚刚入手了官方发的 OrangePi AI Pro&#xff0c;想用 tight vnc 来连接开发板&#xff0c;就不用连接屏幕那么麻烦了。结果连接后&#xff0c;没能显示 OrangePi AI Pro 桌面。 问题解决 看一下现有的桌面环境。 apt list --installed | grep desktop从中可以看到…
阅读更多...
语言模型解构——Tokenizer

语言模型解构——Tokenizer

1. 认识Tokenizer 1.1 为什么要有tokenizer&#xff1f; 计算机是无法理解人类语言的&#xff0c;它只会进行0和1的二进制计算。但是呢&#xff0c;大语言模型就是通过二进制计算&#xff0c;让你感觉计算机理解了人类语言。 举个例子&#xff1a;单1&#xff0c;双2&#x…
阅读更多...
【传知代码】探索视觉与语言模型的可扩展性（论文复现）

【传知代码】探索视觉与语言模型的可扩展性（论文复现）

前言&#xff1a;在数字化时代的浪潮中&#xff0c;我们见证了人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;其中视觉与语言模型作为两大核心领域&#xff0c;正以前所未有的速度改变着我们的生活和工作方式。从图像识别到自然语言处理&#xff0c;从虚拟现实…
阅读更多...
无人机推流/RTMP视频推拉流EasyDSS无法卸载软件是什么原因？

无人机推流/RTMP视频推拉流EasyDSS无法卸载软件是什么原因？

视频推拉流/直播点播EasyDSS平台支持音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务&#xff0c;在应用场景中可实现视频直播、点播、转码、管理、录像、检索、时移回看等。此外&#xff0c;平台还支持用户自行上传视频文件&#xff0c;也可将上传的点播…
阅读更多...
大话设计模式解读01-简单工厂模式

大话设计模式解读01-简单工厂模式

本系列的文章&#xff0c;来介绍编程中的设计模式&#xff0c;介绍的内容主要为《大话设计模式》的读书笔记&#xff0c;并改用C语言来实现&#xff08;书中使用的是.NET中的C#&#xff09;,本篇来学习第一章&#xff0c;介绍的设计模式是——简单工厂模式。 1 面向对象编程 …
阅读更多...
Mixly 开启WIFI AP UDP收发数据

Mixly 开启WIFI AP UDP收发数据

一、开发环境 软件&#xff1a;Mixly 2.0在线版 硬件&#xff1a;ESP32-C3&#xff08;立创实战派&#xff09; 固件&#xff1a;ESP32C3 Generic(UART) 测试工工具&#xff1a;NetAssist V5.0.1 二、实现功能 ESP32开启WIFI AP&#xff0c;打印接入点IP地址&#xff0c;允许…
阅读更多...
模拟堆-java

模拟堆-java

模拟堆也是对堆的一次深入理解和一些其它操作&#xff0c;可以了解一下。 文章目录 前言 一、模拟堆 二、算法思路 1.结点上移 2.结点下移 3.插入一个数 4.输出当前集合的最小值 5.删除当前集合的最小值&#xff08;数据保证此时的最小值唯一&#xff09; 6.删除第k个插入的数 …
阅读更多...
Springboot健身房管理系统-计算机毕业设计源码44394

Springboot健身房管理系统-计算机毕业设计源码44394

摘 要 大数据时代下&#xff0c;数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求&#xff0c;利用互联网服务于其他行业&#xff0c;促进生产&#xff0c;已经是成为一种势不可挡的趋势。在健身房管理的要求下&#xff0c;开发一款整体式结构的健身房管理系统…
阅读更多...
代理 模式

代理 模式

一、什么是代理模式 代理模式指代理控制对其他对象的访问&#xff0c;也就是代理对象控制对原对象的引⽤。在某些情况下&#xff0c;⼀个对象不适合或者不能直接被引⽤访问&#xff0c;⽽代理对象可以在客⼾端和⽬标对象之间起到中介的作⽤。 二、为什么使用代理模式 模式作…
阅读更多...
HW面试常见知识点2——研判分析（蓝队中级版）

HW面试常见知识点2——研判分析（蓝队中级版）

&#x1f340;文章简介&#xff1a;又到了一年一度的HW时刻&#xff0c;本文写给新手想快速进阶HW蓝中的网安爱好者们&#xff0c; 通读熟练掌握本文面试定个蓝中还是没问题的&#xff01;大家也要灵活随机应变&#xff0c;不要太刻板的回答&#xff09; &#x1f341;个人主页…
阅读更多...
揭秘下载数据背后的秘密，Xinstall助你掌握市场脉搏

揭秘下载数据背后的秘密，Xinstall助你掌握市场脉搏

在当下这个移动互联网时代&#xff0c;应用推广已成为各大企业竞争的重要战场。然而&#xff0c;如何有效地获取并分析应用下载数据&#xff0c;却成为了许多推广者面临的难题。今天&#xff0c;我们将为大家介绍一款强大的应用推广助手——Xinstall&#xff0c;它能够帮助你轻…
阅读更多...
隐藏 IP 地址的重要性是什么？

隐藏 IP 地址的重要性是什么？

在当今的数字时代&#xff0c;保护我们的在线身份至关重要。从保护个人信息到保护隐私&#xff0c;互联网用户越来越多地寻求增强在线安全性的方法。保持匿名和保护敏感数据的一个关键方面是隐藏您的 IP 地址。在这篇博文中&#xff0c;我们将深入探讨隐藏 IP 地址的重要性&…
阅读更多...
人脸识别技术与人证合一智能闸机的剖析

人脸识别技术与人证合一智能闸机的剖析

人脸识别技术&#xff0c;作为一种先进的生物认证手段&#xff0c;依据个体面部独有的特征信息来进行身份验证。这项技术通过捕获图像或视频中的面部数据&#xff0c;执行一系列精密步骤&#xff0c;包括图像获取、面部定位、预处理、特征提取与比对&#xff0c;以确认个人身份…
阅读更多...
【JMeter接口自动化】第2讲 Jmeter目录结构

【JMeter接口自动化】第2讲 Jmeter目录结构

JMeter的目录结构如下&#xff1a; bin目录&#xff1a;可执行文件目录&#xff0c;启动jmeter时&#xff0c;就是启动bin目录下的ApacheJmeter.jar&#xff0c;jmeter.bat&#xff0c;jmeter.sh ApacheJmeter.jar:启动文件 jmeter.bat&#xff1a;Windows 的启动命令。 jmeter…
阅读更多...
前端框架前置知识之Node.js：fs模块、path模块、http模块、端口号介绍

前端框架前置知识之Node.js：fs模块、path模块、http模块、端口号介绍

什么是模块&#xff1f; 类似插件&#xff0c;封装了方法 / 属性 fs 模块- 读写文件 代码示例 // 1. 加载 fs 模块对象 const fs require(fs) // 2. 写入文件内容 fs.writeFile(./test.txt, hello, Node.js, (err) > {if (err) console.log(err) //若 err不为空&#xf…
阅读更多...
韩顺平0基础学java——第15天

韩顺平0基础学java——第15天

p303-326 重写override 和重载做个对比 注&#xff1a;但子类可以扩大范围&#xff0c;比如父类是protected&#xff0c;子类可以是public 多态 方法或对象具有多种形态&#xff0c;是面向对象的第三大特征&#xff0c;多态是建立在封装和继承基础之上的。 多态的具体体现…
阅读更多...
绕过WAF（Web应用程序防火墙）--介绍、主要功能、部署模式、分类及注入绕过方式等

绕过WAF（Web应用程序防火墙）--介绍、主要功能、部署模式、分类及注入绕过方式等

网站WAF是一款集网站内容安全防护、网站资源保护及网站流量保护功能为一体的服务器工具。功能涵盖了网马/木马扫描、防SQL注入、防盗链、防CC攻击、网站流量实时监控、网站CPU监控、下载线程保护、IP黑白名单管理、网页防篡改功能等模块。能够为用户提供实时的网站安全防护&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023