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

相关文章

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构

java解析jwt中的payload的用法

《java解析jwt中的payload的用法》:本文主要介绍java解析jwt中的payload的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java解析jwt中的payload1. 使用 jjwt 库步骤 1:添加依赖步骤 2:解析 JWT2. 使用 N

springboot项目如何开启https服务

《springboot项目如何开启https服务》:本文主要介绍springboot项目如何开启https服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录springboot项目开启https服务1. 生成SSL证书密钥库使用keytool生成自签名证书将

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Java中的JSONObject详解

《Java中的JSONObject详解》:本文主要介绍Java中的JSONObject详解,需要的朋友可以参考下... Java中的jsONObject详解一、引言在Java开发中,处理JSON数据是一种常见的需求。JSONObject是处理JSON对象的一个非常有用的类,它提供了一系列的API来操作J

SpringBoot多数据源配置完整指南

《SpringBoot多数据源配置完整指南》在复杂的企业应用中,经常需要连接多个数据库,SpringBoot提供了灵活的多数据源配置方式,以下是详细的实现方案,需要的朋友可以参考下... 目录一、基础多数据源配置1. 添加依赖2. 配置多个数据源3. 配置数据源Bean二、JPA多数据源配置1. 配置主数据

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》:本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4

SpringBoot内嵌Tomcat临时目录问题及解决

《SpringBoot内嵌Tomcat临时目录问题及解决》:本文主要介绍SpringBoot内嵌Tomcat临时目录问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录SprinjavascriptgBoot内嵌Tomcat临时目录问题1.背景2.方案3.代码中配置t

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

Java程序进程起来了但是不打印日志的原因分析

《Java程序进程起来了但是不打印日志的原因分析》:本文主要介绍Java程序进程起来了但是不打印日志的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java程序进程起来了但是不打印日志的原因1、日志配置问题2、日志文件权限问题3、日志文件路径问题4、程序