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

一、三级联动

效果如下图所示：

图1 三级联动

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

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

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

功能要求如下：

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

如图3所示。

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

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

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

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

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

1. 三级联动

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. 设计江苏福彩投注站彩票投注助手

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函数完成了随机数与文本内容的功能。

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

<tr>

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

<!doctype html>

<head>

<title>JavaScript联动</title>

</head>

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>

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

</header>

<hr>

大洲:  

</select>      

国家:  

</select>      

城市:  

</select>

</form>

</div>

</body>

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>

<!doctype html>

<head>

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

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>

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>

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

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</div>

</body>

</html>

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

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

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

相关文章

QT入门知识回顾

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

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

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

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

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

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

动静态库【Linux】

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

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

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

PDF 文件的解析

MyBatis3.4全集笔记

SpringSecurity6从入门到实战之SpringSecurity整合自动装配详解(源码级讲解,耐心看完)

AI绘画Stable Diffusion 制作幻术光影字：使用Brightness亮度控制模型，超简单！

【机器学习数据挖掘】基于ARIMA 自回归积分滑动平均模型的销售价格库存分析报告附完整python代码

【赠书活动】好书推荐—《详解51种企业应用架构模式》

逐步掌握最佳Ai Agents框架-AutoGen 八开源模型

书籍《钱从哪里来5：微利社会》观后感

有哪些好用的ai工具，可以提升科研、学习、办公等效率？