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

最新推荐文章于 2024-07-18 15:09:01 发布

-Initiation

最新推荐文章于 2024-07-18 15:09:01 发布

阅读量1.4k

点赞数 38

分类专栏：前端3剑客运用（html+css+js）文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_55709044/article/details/139438908

版权

前端3剑客运用（html+css+js）专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、三级联动

效果如下图所示：

图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>

-Initiation

关注

38
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
html+CSS+js部分基础运用13

单击“机选1注”、“机选5注”或“机选10注”按钮时，能够随机产生相应条数的数据。单击“删除”按钮，删除选中的那一条数据。若未选择，则弹出提示。编程实现江苏福彩投注站彩票投注助手，页面布局效果如图2所示。在借助了table和表单的内容加button完成。单击“全部删除”按钮，清空所有机选数据。图4 未选择选项单击删除按钮时页面。函数完成了随机数与文本内容的功能。图3 单击“机选10注”时页面。图2福彩投注站彩票助手页面。福彩投注站投注彩票助手。福彩投注站投注彩票助手。福彩投注站投注彩票助手。
复制链接

扫一扫