Java web 学习第九天——js 应用举例

2024-03-01 09:58

本文主要是介绍Java web 学习第九天——js 应用举例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Day 09

案例2 动态显示时间

       <scripttype="text/javascript">

       function getD1(){

              var date = new Date();//获取当前时间

              var d1 = date.toLocaleString();//格式化时间

              var divv =document.getElementById("time");//获取Div

              divv.innerHTML=d1;//设置divv的时间

       }

       //使用定时器

       setInterval("getD1();",1000);

       </script>

案例三:全选练习

<body>

       <input type="checkbox"id="ch1" οnclick="selAllNo()" />全选/全不选

       <input type="checkbox"name="love" />篮球

       <input type="checkbox"name="love" />足球

       <input type="checkbox"name="love" />羽毛球

       <input type="checkbox"name="love" />棒球

       <input type="button"value="全选" οnclick="selAll();" />

       <input type="button"value="全不选" οnclick="selNo();" />

       <input type="button"value="反选" οnclick="selOther();" />

       <script type="text/javascript">

              function selAll() {//全选

                     var loves =document.getElementsByName("love");//得到数组

                     for (var i =0; i < loves.length; i++) {

                            var lovess =loves[i];

                            lovess.checked = true;}}

              function selNo() {//全不选

                     var loves =document.getElementsByName("love");

                     for (var i =0; i < loves.length; i++) {

                            var loves1 =loves[i];

                            loves1.checked = false;}}

              function selOther() {//反选

                     var loves =document.getElementsByName("love");

                     for (var i =0; i < loves.length; i++) {

                            var loves3 =loves[i];

                            if(loves3.checked == true) {

                                   loves3.checked= false;

                            } else {

                                   loves3.checked= true;}}}

              function selAllNo() {

                     var check1 =document.getElementById("ch1");

                     if (check1.checked== true) {selAll();} else {selNo();}}</script></body>

案例四:省市联动

<body>

       <selectid="county" οnchange="add1(this.value);">

              <optionvalue="0">请选择</option>

              <optionvalue="中国">中国</option>

              <optionvalue="美国">美国</option>

              <optionvalue="德国">德国</option>

              <optionvalue="日本">日本</option>

       </select>

       <selectid="cityid">

       </select>

</body>

<scripttype="text/javascript">

       //创建数组,二维数组

       vararr = new Array(4);

       arr[0]= [ "中国", "北京", "上海", "郑州" ];

       arr[1]= [ "美国", "纽约", "费城", "迈阿密" ];

       arr[2]= [ "德国", "慕尼黑", "法兰克林", "狼堡" ];

       arr[3]= [ "日本", "东京", "北海道", "长崎" ];

       functionadd1(num) {

               //获取city

              varcity1=document.getElementById("cityid");

               varoptions=city1.getElementsByTagName("option");

               for(varm=0;m<options.length;m++){

                      var op = options[m];

                      city1.removeChild(op);

                      m--;}

              //1遍历数组

              for(vari=0;i<arr.length;i++){

                     var  arr1=arr[i];//得到二维数组里面的每一个数组

                     vararr11=arr1[0];//得到数组里面第一个值,也就是国家的值

                     if(arr11==num){

                            for(varj=1;j<arr1.length;j++){

                                   varvalue1=arr1[j];

                                   //alert(value1);

                                   //创建option

                                   varoption1 = decument.createElement("option");

                                   //创建文本

                                   vartext1 = document.createTextNode(value1);

                                   //添加文本到option

                                   option1.appendChild(text1);

                                   city1.appendChild(option1);

                            }}}}

</script>

这篇关于Java web 学习第九天——js 应用举例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/762058

相关文章

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

springboot security使用jwt认证方式

《springbootsecurity使用jwt认证方式》:本文主要介绍springbootsecurity使用jwt认证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录前言代码示例依赖定义mapper定义用户信息的实体beansecurity相关的类提供登录接口测试提供一

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

Tomcat版本与Java版本的关系及说明

《Tomcat版本与Java版本的关系及说明》:本文主要介绍Tomcat版本与Java版本的关系及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Tomcat版本与Java版本的关系Tomcat历史版本对应的Java版本Tomcat支持哪些版本的pythonJ

springboot security验证码的登录实例

《springbootsecurity验证码的登录实例》:本文主要介绍springbootsecurity验证码的登录实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录前言代码示例引入依赖定义验证码生成器定义获取验证码及认证接口测试获取验证码登录总结前言在spring

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

java之Objects.nonNull用法代码解读

《java之Objects.nonNull用法代码解读》:本文主要介绍java之Objects.nonNull用法代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录Java之Objects.nonwww.chinasem.cnNull用法代码Objects.nonN