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

一、三级联动

效果如下图所示：

图1 三级联动

二、设计江苏福彩投注站彩票投注助手

编程实现江苏福彩投注站彩票投注助手，页面布局效果如图2所示。

图2福彩投注站彩票助手页面

功能要求如下：

单击“机选1注”、“机选5注”或“机选10注”按钮时，能够随机产生相应条数的数据。

如图3所示。

图3 单击“机选10注”时页面

单击“删除”按钮，删除选中的那一条数据。若未选择，则弹出提示。

图4 未选择选项单击删除按钮时页面

单击“全部删除”按钮，清空所有机选数据。

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

1. 三级联动

<script type="text/javascript">

    var country = [

        ["中国", "日本", "韩国"],

        ["英国", "德国", "法国"],

        ["美国", "巴西", "阿根廷"]

    ];

    var city = [

        [["北京", "上海", "广州"], ["东京", "大阪", "名古屋"], ["首尔", "仁川", "济州"]],

        [["伦敦", "曼彻斯特", "利物浦"], ["柏林", "慕尼黑", "法兰克福"], ["巴黎", "里尔", "摩纳哥"]],

        [["华盛顿", "纽约", "洛杉矶"], ["里约热内卢", "圣保罗", "巴西利亚"], ["布宜诺斯艾利斯", "萨尔多瓦", "罗萨里奥"]]

    ];

    var selContinent = document.forms[0].continent;

    var selCountry = document.forms[0].country;

    var selCity = document.forms[0].city;

    function sel_country() {    

        selCountry.length = 1;  

        selCity.length = 1;

        var arrCountry = country[selContinent.selectedIndex - 1];

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

            selCountry[i + 1] = new Option(arrCountry[i], selContinent.selectedIndex);

        }

    }

    function sel_city() {

       

        var arrCountryCity = city[selContinent.selectedIndex - 1][selCountry.selectedIndex - 1];

       

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

            selCity[i + 1] = new Option(arrCountryCity[i], selCountry.selectedIndex);

        }

    }

</script>

主要利用了JavaScript 变量数组，funtion函数与onchange函数完成了该功能。

  • 2. 设计江苏福彩投注站彩票投注助手

 <script type="text/javascript">

    function $(id){return document.getElementById(id);}

    function selectNumber(n){

      var objSelect=$("number8");

      var s=null;  

      objSelect.focus();

      for(var i=0;i<n;i++){

        for(var j=0;j<8;j++){

          s=s+Math.floor(Math.random() * 100 )+" ";

        }

        objSelect.options.add(new Option(s,));

        s=null;

      }

 }

利用selectNumber函数完成了随机数与文本内容的功能。

 <form method="post" action="">    

      <table align="center">    

        <caption><h2>福彩投注站投注彩票助手 </h2></caption>  

        <tr>    

          <td><input type="button" value="机选1注" onclick="selectNumber(1);" οnfοcus=”this.select()” οnfοcus=”this.select()” ></td>

在借助了table和表单的内容加button完成

1.

2.

  • 1.

<!doctype html>

<html lang="en">

<head>

    <!-- 添加文档头部内容 -->

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>JavaScript联动</title>

</head>

<style type="text/css">

    body {

        text-align: center;

    }

    div#id-div-center {

        width: auto;

        height: auto;

        border: 0px solid black;

        margin: 32px auto;

        padding: 2px;

    }

    div#id-div-center form {

        width: 500px;

        margin-left: auto;

        margin-right: auto;

    }

</style>

<body>

<!-- 添加文档主体内容 -->

<header>

    <nav>三级联动下拉列表框</nav>

</header>

<hr>

<!-- 添加文档主体内容 -->

<div id="id-div-center">

    <!-- 定义下拉列表框 -->

    <form name="form3sel">

        大洲:&nbsp;&nbsp;

        <select name="continent" onchange="sel_country()">

            <option value="0">选择大洲...</option>

            <option value="亚洲">亚洲</option>

            <option value="欧洲">欧洲</option>

            <option value="美洲">美洲</option>

        </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        国家:&nbsp;&nbsp;

        <select name="country" onchange="sel_city()">

            <option value="0">选择国家...</option>

        </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        城市:&nbsp;&nbsp;

        <select name="city">

            <option value="0">选择城市...</option>

        </select>

    </form>

</div>

</body>

<script type="text/javascript">

    var country = [

        ["中国", "日本", "韩国"],

        ["英国", "德国", "法国"],

        ["美国", "巴西", "阿根廷"]

    ];

    var city = [

        [["北京", "上海", "广州"], ["东京", "大阪", "名古屋"], ["首尔", "仁川", "济州"]],

        [["伦敦", "曼彻斯特", "利物浦"], ["柏林", "慕尼黑", "法兰克福"], ["巴黎", "里尔", "摩纳哥"]],

        [["华盛顿", "纽约", "洛杉矶"], ["里约热内卢", "圣保罗", "巴西利亚"], ["布宜诺斯艾利斯", "萨尔多瓦", "罗萨里奥"]]

    ];

    var selContinent = document.forms[0].continent;

    var selCountry = document.forms[0].country;

    var selCity = document.forms[0].city;

    function sel_country() {    

        selCountry.length = 1;  

        selCity.length = 1;

        var arrCountry = country[selContinent.selectedIndex - 1];

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

            selCountry[i + 1] = new Option(arrCountry[i], selContinent.selectedIndex);

        }

    }

    function sel_city() {

       

        var arrCountryCity = city[selContinent.selectedIndex - 1][selCountry.selectedIndex - 1];

       

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

            selCity[i + 1] = new Option(arrCountryCity[i], selCountry.selectedIndex);

        }

    }

</script>

</html>

  • 2.

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title> 福彩投注站投注彩票助手 </title>

  <style type="text/css">

   

      div{background: url("fc_logo.jpg") right top no-repeat;width:550px; height:320px; margin:0 auto;border:2px solid #0077BB;color:white;}

   

      h2{font-size:28px;text-align:center;padding:10px auto;}

   

      select{width:300px;height:145px;}

   

      input{width:80px;height:40px;}

  </style>

  <script type="text/javascript">

    function $(id){return document.getElementById(id);}

    function selectNumber(n){

      var objSelect=$("number8");

      var s=null;  

      objSelect.focus();

      for(var i=0;i<n;i++){

        for(var j=0;j<8;j++){

          s=s+Math.floor(Math.random() * 100 )+" ";

        }

        objSelect.options.add(new Option(s,));

        s=null;

      }

 }

 

    function  delSelect()   {

      var objSelect=$("number8");

      var index=objSelect.selectedIndex;

      if(index>=0){

        objSelect.options.remove(index);

      }else{alert("请先选择列表项后再删除！");}

   }

   function  delSelectAll()   {

      var objSelect=$("number8");

      var strIndex=objSelect.options.length;

      if (strIndex>0)

     {

        for (var i=0;i<=strIndex-1;i++ )

          {

            objSelect.options.remove(0);

          }

     } else{alert("请先选择列表项后再删除！");}

   }

  </script>

 </head>

 <body>    

  <div id="" class="">  

    <img src="ico_7l.gif" width="76" height="72" border="0" alt="">    

    <form method="post" action="">    

      <table align="center">    

        <caption><h2>福彩投注站投注彩票助手 </h2></caption>  

        <tr>    

          <td><input type="button" value="机选1注" onclick="selectNumber(1);" οnfοcus=”this.select()” οnfοcus=”this.select()” ></td>  

          <td rowspan="3">      

            <select name="number7" id="number8" size="2" οnfοcus=”this.select()” οnmοuseοver=”this.focus()”></select>    

          </td>  

          <td><input type="button" value="删除" onclick="delSelect();"></td>        

        </tr>        

        <tr>      

          <td><input type="button" value="机选5注" onclick="selectNumber(5);" ></td>    

          <td>&nbsp;</td>  

        </tr>  

        <tr>      

          <td><input type="button" value="机选10注" onclick="selectNumber(10);"></td>      

          <td><input type="button" value="全部删除" onclick="delSelectAll();"></td>  

        </tr>  

      </table>  

    </form>          

  </div>

</body>

</html>

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

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

相关文章

一周速览丨YOLOv10 模型+应用一站式体验！一键部署 Llama 3-Chinese-Chat-8b

一周速览丨YOLOv10 模型+应用一站式体验！一键部署 Llama 3-Chinese-Chat-8b

公共资源速递 This Weekly Snapshots &#xff01;5 个数据集&#xff1a; Llama3 中文化数据集皮马印第安人糖尿病数据集VehicleID 车辆识别数据集LCCC 大规模净化汉语会话语料库NWPU VHR-10 地理空间物体检测遥感数据集 2 个模型&#xff1a; YOLOv10Llama 3-Chinese-Cha…
阅读更多...
QT入门知识回顾

QT入门知识回顾

1 QT简介 1.1 Qt模块: Qt Core模块: 是QT类库的核心&#xff0c;所有其他模块都依赖这个模块 Qt Gui模块: 提供GUI程序的基本功能 Qt Network模块:提供跨平台的网络功能 Qt Widgets模块:提供创建用户界面的功能 1.2Qt的signal/slot机制 任何一个类只要类体前部书写 Q_OBJ…
阅读更多...
香港移民政策放开了，2024拿香港身份的8种方式，申请条件解读

香港移民政策放开了，2024拿香港身份的8种方式，申请条件解读

​香港移民政策放开了&#xff0c;2024拿香港身份的8种方式&#xff01; 都2024年了&#xff0c;香港身份还受欢迎吗&#xff1f; 当然受欢迎&#xff0c;我们从数据上就能看出来&#xff0c;去年有超过24万人通过各类人才引入计划申请来港&#xff0c;其中超过14万获批&…
阅读更多...
三生随记——作家的噩梦

三生随记——作家的噩梦

月光斑驳&#xff0c;李轩独坐于老屋的木桌前&#xff0c;四周的静谧被笔尖划过纸张的沙沙声打破。作为一个小有名气的作家&#xff0c;他的文字总是充满魔力&#xff0c;让读者深陷其中。但今晚&#xff0c;他的故事似乎有些不同寻常。 故事的主角&#xff0c;一个名叫林浩的探…
阅读更多...
Java虚拟机的优化方法

Java虚拟机的优化方法

随着时间的推移&#xff0c;许多优化已经提高了 JVM 的性能。然而&#xff0c;尽管 Java 通常是第一个成功实现它们的虚拟机&#xff0c;但它们也经常被用于其他类似的平台。 1.即时编译 早期的 JVM 总是解释 Java 字节码。在普通应用程序中&#xff0c;Java 的性能损失比 C …
阅读更多...
静态网页实现-人脸识别-案例（web)

静态网页实现-人脸识别-案例（web)

&#x1f933;人脸识别&#xff08;web) 基于开源大模型&#xff0c;将人脸识别功能整合到网页中&#xff0c;提供用户友好的界面和强大的功能。 核心功能 人脸轮廓识别&#xff1a; 通过深度学习算法&#xff0c;精确识别人脸的轮廓&#xff0c;包括眼睛、鼻子、嘴巴等关键部…
阅读更多...
Sql注入漏洞汇总-上

Sql注入漏洞汇总-上

产生的原因 当web应用向后台数据库传递SQL语句进行数据库操作时，如果对用户输入的参数没有经过严格的过滤处理，那么攻击者就可以构造特殊的SQL语句，带入数据库中进行查询，从而导致数据的泄露或者修改。 02 分类 1、按照查询的类型分类 数字型 select * from user whe…
阅读更多...
在QML中调用 C++ 函数的方法（四）

在QML中调用 C++ 函数的方法（四）

文章目录 前言一、qml 和 c++ 交互的官方文档介绍二、QML 中调用 C++ 实现的函数的方法1. Exposing Attributes of C++ Types to QML1.1 暴露 Properties1.2 暴露 Methods(槽函数和Q_INVOKABLE 修饰的函数)1.3 暴露 Signals2. Defining QML Types from C++3. 代码实例3.1 创建一…
阅读更多...
【OpenHarmony】ArkTS 语法基础 ③ ( @Component 自定义组件生命周期回调函数 | @Entry 页面生命周期回调函数 )

【OpenHarmony】ArkTS 语法基础 ③ ( @Component 自定义组件生命周期回调函数 | @Entry 页面生命周期回调函数 )

文章目录 一、ArkTS Component 自定义组件生命周期1、自定义组件生命周期2、aboutToAppear 函数执行时机和作用3、aboutToDisappear 函数执行时机和作用4、代码示例 二、ArkTS Entry 页面生命周期1、Entry 页面生命周期2、onBackPress 和 onPageHide 回调函数无关联 三、代码示…
阅读更多...
文化若想挣钱，真的很可怕吗？

文化若想挣钱，真的很可怕吗？

文化若想挣钱&#xff0c;真的很可怕吗&#xff1f; 近日&#xff0c;我看到受人尊敬的静思有我先生的一个音频作品《会挣钱&#xff0c;遇上有文化&#xff0c;这个地方很可怕》&#xff0c;把这个标题在网上搜一搜&#xff0c;在它下面就跟着有这样一篇文章--商人不可怕&…
阅读更多...
vscode 1.85安装remote-ssh后左侧没有图标

vscode 1.85安装remote-ssh后左侧没有图标

vscode安装remote-ssh插件后左侧没有图标。 解决方法 想要左侧有图标&#xff0c;是另一个插件起作用&#xff1a;Remote Explorer 但是这个插件最新版需要1.87&#xff0c;可以switch to Pre-release version之后就能用了。 其实&#xff0c;最后再switch to Release Versio…
阅读更多...
PHP网络编程是什么：深入探索其四个方面、五个方面、六个方面与七个方面的核心奥秘

PHP网络编程是什么：深入探索其四个方面、五个方面、六个方面与七个方面的核心奥秘

PHP网络编程是什么&#xff1a;深入探索其四个方面、五个方面、六个方面与七个方面的核心奥秘 PHP网络编程&#xff0c;这个看似简单的概念&#xff0c;实则蕴含着丰富的内涵和无尽的探索空间。它不仅是现代网络应用开发的重要基石&#xff0c;更是无数开发者实现创意与梦想的…
阅读更多...
动静态库【Linux】

动静态库【Linux】

文章目录 静态库的打包动态库的打包 静态库的打包 把我们提供的方法&#xff0c;给别人用: 1、把源文件直接给别人 2、把源代码打包成库库.h 例如 &#xff1b;有a.c b.c c.c d.c ,四个.c文件 &#xff0c; 将a.c 形成a.o ,b.c形成b.o c.c形成c.o d.c形成d.o文件&#xff0c;…
阅读更多...
JS片段：生成 UUID

JS片段：生成 UUID

Hi&#xff0c;这里是松桑&#xff0c;每天学习一个 JS 片段&#xff0c;涨涨&#x1f9c0;&#xff01;今天带来的是如何生成 UUID&#xff0c;UUID作为全局唯一标识&#xff0c;使用常见广泛&#xff0c;包括分布式系统、数据库主键、会话标识、消息队列、日志追踪等等。 什么…
阅读更多...
【前端Vue3】——JQuery知识点总结（超详细）

【前端Vue3】——JQuery知识点总结（超详细）

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大二学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门知识专栏&#xff1a;&#x1f387;【MySQL&#…
阅读更多...
【力扣刷题 动态规划】LeetCode 139 单词拆分、LeetCode 300 最长递增子序列 ✌

【力扣刷题 动态规划】LeetCode 139 单词拆分、LeetCode 300 最长递增子序列 ✌

文章目录 1. 单词拆分2. 最长递增子序列 1. 单词拆分 题目链接 &#x1f34e; 解题思路&#xff1a; class Solution {bool dp[310] {false};public:bool wordBreak(string s, vector<string>& wordDict) {unordered_set<string> myset;for(auto& str :…
阅读更多...
《欢乐钓鱼大师》新手攻略大全！新手逆袭之路！

《欢乐钓鱼大师》新手攻略大全！新手逆袭之路！

《欢乐钓鱼大师》是一款趣味十足的模拟钓鱼游戏&#xff0c;适合各类玩家&#xff0c;从钓鱼新手到钓鱼高手都能在游戏中找到乐趣。为了帮助新手玩家更快地掌握游戏技巧&#xff0c;提高钓鱼水平&#xff0c;我们准备了一些实用的攻略和技巧&#xff0c;帮助大家轻松入门&#…
阅读更多...
PDF 文件的解析

PDF 文件的解析

1、文本 PDF 的解析 1.1、文本的提取 进行文本提取的 Python 库包括&#xff1a;pdfminer.six、PyMuPDF、PyPDF2 和 pdfplumber&#xff0c;效果最好的是 PyMuPDF&#xff0c;PyMuPDF 在进行文本提取时能够最大限度地保留 PDF 的阅读顺序&#xff0c;这对于双栏 PDF 文件的抽…
阅读更多...
【0286】Postgres内核 shared buffer pool 初始化原理

【0286】Postgres内核 shared buffer pool 初始化原理

0. shared buffer pool 附&#xff1a;shared buffer初始化后&#xff0c;BufferDescriptors中变量bufferdesc的值如下面文件所示&#xff1a; Postgres shared buffer pool初始化过程日志
阅读更多...
vue-router 源码分析——1. 路由匹配

vue-router 源码分析——1. 路由匹配

这是对vue-router 3 版本的源码分析。 本次分析会按以下方法进行&#xff1a; 按官网的使用文档顺序&#xff0c;围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码&#xff0c;更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升&#xff0c;甚至面试时…
阅读更多...
最新文章

Copyright @ 2022~2023