當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

C1之路 | 训练任务04-JavaScript

發(fā)布時間：2025/4/5 javascript 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 C1之路 | 训练任务04-JavaScript 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

文章目錄

任務一：生成圖片廣告
拓展
自測

任務一：生成圖片廣告

1. 在頁面正中生成一幅圖片廣告

為了訓練一下自己的 css水平，沒用圖片

2. 用JS數(shù)組放置多張圖片，同時動態(tài)計算不同廣告位之間的布局，實現(xiàn)水平等間距布局

<!DOCTYPE html> <html> <head><title>#</title><meta charset="utf-8"><style type="text/css">*{margin: 0px;padding: 0px;}.a{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 400px;height: 400px;background-color: yellow;text-align: center;line-height: 400px;}</style> </head> <body><div id="a"></div><script>create();function create(){var imgs = ["1.png","2.png","3.png"]for(var i = 0;i< imgs.length;i++){var img = document.createElement("img");img.setAttribute("src",imgs[i]);img.style.marginLeft='30px';document.getElementById('a').appendChild(img);}}</script> </body> </html>

輪播

<!DOCTYPE html> <html> <head><title>#</title><meta charset="utf-8"><style type="text/css">*{margin: 0px;padding: 0px;}#im{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 400px;height: 400px;background-color: yellow;text-align: center;line-height: 400px;}</style> </head> <body><div id="a"><img id="im"></div><script>a = 0;imgs = ["1.png","2.png","3.png"]img = document.getElementById("im")img.setAttribute("src",imgs[a]);a++;img.style.marginLeft='40px';var int=self.setInterval("create()",3000);function create(){img.setAttribute("src",imgs[a]);if(a == imgs.length - 1){a = 0}else{a++;}}</script> </body> </html>

拓展

<html><head><meta charset=UTF-8"><title>#</title><script type="text/javascript">var cityList = new Array();var quList = new Array();cityList['北京'] = ['北京'];cityList['山東'] = ['菏澤市', '曹縣1', '曹縣2', '臨沂市'];cityList['上海'] = ['浦東', '浦東2', '浦東3'];cityList['甘肅'] = ['蘭州市', '武威市', '酒泉市'];quList['北京'] = ['a區(qū)', 'b區(qū)', '3區(qū)', '4區(qū)'];quList['杭州市'] = ['5區(qū)', 'c區(qū)', '7區(qū)', '8區(qū)'];quList['溫州市'] = ['9區(qū)', '10區(qū)', 'd區(qū)', '12區(qū)'];quList['西安'] = ['13區(qū)', '14區(qū)', '15區(qū)', '16區(qū)'];quList['寶雞'] = ['17區(qū)', '18區(qū)', '19區(qū)', '3區(qū)'];quList['蘭州市'] = ['21區(qū)', 'f區(qū)', '23區(qū)', '24區(qū)'];window.onload = allData;function allData() {var shengfen = document.getElementById('shengfen');for (var sf in cityList) {shengfen.add(new Option(sf, sf));}}function changeCity() {var chengshi = document.getElementById('chengshi');var sheng = document.getElementById('shengfen').value;chengshi.options.length = 1;for (var cs in cityList[sheng]) {chengshi.add(new Option(cityList[sheng][cs], cityList[sheng][cs]));}}function changequ() {var shiqu = document.getElementById('shiqu');var cheng = document.getElementById('chengshi').value;shiqu.options.length = 1;for (var sh in quList[cheng]) {shiqu.add(new Option(quList[cheng][sh], quList[cheng][sh]));}}</script> </head><body><br /><select id="shengfen" style="width:200px " onchange="changeCity()"><option >--選擇省份--</option></select><select id="chengshi" style="width:200px " onchange="changequ()"><option >--選擇城市--</option></select><select id="shiqu" style="width:200px"><option>--選擇區(qū)縣--</option></select></body></html>

自測

1.實現(xiàn)對數(shù)組[0,9,12,1,6,3,7,11]的冒泡排序

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>冒泡排序</title> </head><body><script>var array = [0, 9, 12, 1, 6, 3, 7,11];for (var i = 0; i < array.length - 1; i++) {for (var j = i + 1; j < array.length; j++) {if (array[j] < array[i]) {var temp = array[i];array[i] = array[j];array[j] = temp;} } } alert(array)</script> </body></html>

2.解釋JavaScript在的堆和棧數(shù)據(jù)結(jié)構(gòu)的區(qū)別
答:

棧是一種具有后進先出性質(zhì)的數(shù)據(jù)結(jié)構(gòu) 堆是一種經(jīng)過排序的樹形數(shù)據(jù)結(jié)構(gòu)

3,a=1,b=2,用三種方法交換ab的值

1.設中間變量temp, temp=a,a=b,b=temp; 2.交換ab兩個值的地址, 3.a+1,b-1

4.使用for循環(huán)找出0-300的奇數(shù)和.

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><script>var sum = 0;for (var i = 0; i <= 300; i++) {if (i % 2 == 1)sum += i;}alert(sum);</script> </body></html>

5.取出數(shù)組[8,7,2,1,5,0,1,9,2]中重復的值,相同的值只保留一個

6.使用非遞歸方式對數(shù)組[8,7,12,1,5,0,6,9,2]執(zhí)行折半查找

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><script>function binary_search(arr, key) {var low = 0;var high = arr.length;while (low <= high) {var mid = parseInt((low + high) / 2);if (arr[mid] == key) {return mid;}if (arr[mid] > key) {high = mid - 1;}if (arr[mid] < key) {low = mid + 1;}if (low == high && arr[mid] != key)return -1;}}var arr = [8, 7, 12, 1, 5, 0, 6, 9, 2];arr.sort();var s = binary_search(arr, 1);alert(s);</script> </body></html>

總結(jié)

以上是生活随笔為你收集整理的C1之路 | 训练任务04-JavaScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： C1之路 | 训练任务03-WEB
下一篇： STM32 基础系列教程 48 – CJ