web之js基础

最新推荐文章于 2024-11-13 13:48:38 发布

一个三分钟热度的人

最新推荐文章于 2024-11-13 13:48:38 发布

阅读量219

点赞数

分类专栏： web 文章标签：数据结构 js javascript jquery java

本文链接：https://blog.csdn.net/weixin_44245332/article/details/117252466

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js基础

1.生成图片广告
2.程序逻辑训练
拓展：多级联动菜单
自测

1.生成图片广告

html+css+js

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<img src="1.jpg" alt="onload........" >
</body>
<style>
 img{
  			width: 500px;
            height: 400px;
            top: 50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -250px;
            position: absolute;


}
</style>
</html>

js实现多张图片动态布局，水平等间距

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<img src="1.jpg" alt="onload........" >
<img src="2.jpg" alt="onload........" >
<img src="3.jpg" alt="onload........" >
<img src="4.jpg" alt="onload........" >
</body>
<style>
 img{
	width: 500px;
	height: 400px;
	folat:left;

}
</style>
<script>
var window_width=document.documentElement.clientWidth;
let imgs=document.getElementsByTagName("img");
for(let i=0;i<imgs.length;i++){
	imgs[i].style.marginLeft=(window_width-imgs.length*imgs[i].offsetWidth)/(imgs.length + 1) + "px";
}
</script>
</html>

轮播，3秒切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gbk">
    <title>demo</title>
</head>
 
<style type="text/css">
*{
margin:0;
padding:0;
}
#bg{
width:400px;
height:340px;
padding:20px;
margin:auto;
background-color:bisque;
text-align:center;
}
</style>
<script  type="text/javascript">
window.onload=function(){
var bg=document.getElementById("bg");
setCenter();
window.onresize=setCenter;
 
function setCenter(){
var winH=document.documentElement.clientHeight;
bg.style.marginTop=(winH-bg.clientHeight)/2+"px";
}

var imgs=["1.jpg","2.jpg","3.jpg","4.jpg"];

var pic=document.getElementById("pic");
var info=document.getElementById("info");
var count=1;
var play=document.getElementById("play");
var stop=document.getElementById("stop");
play.addEventListener("click",function(){
var timer=setInterval(()=>{  
    if(count>imgs.length-1){
	count=0;
    }
    pic.src=imgs[count++];
    info.innerText=`一共${imgs.length}图,这是第${count}涨`; 
 },3000);
stop.addEventListener("click",()=>{
   clearInterval(timer);   
  },false);
 },false);
};
</script>
<body>
<div id="bg">
	<p id="info">图片信息</p>
	<img src="1.jpg" id="pic" height="300" width="400">
	<button id="play">播放</button>
	<button id="stop">停止</button>
</div>
</body>
</html>

2.程序逻辑训练

自己联系一下，很容易

拓展：多级联动菜单

树形数据结构实现省市区联动下拉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gbk">
    <title>demo</title>
</head>
 
<style type="text/css">
*{
margin:0;
padding:0;
}
.nav{
width:400px;
margin:auto;
text-align:center;
}
select{
width:100px;
height:30px;
text-align-last:center;
}
</style>
<script  type="text/javascript">
  window.onload = function () {
        //存储省、市、区信息，省、市为JSON形式，区信息为Array形式
        var data = {
            "北京市":{
                "市直辖":["东城市","西城市","朝阳区","海淀区","房山区","通州区","昌平区","丰台区","石景山区","门头沟区"]
            },
            "台湾省":{
                "特别行政省":["。。。"]
            },
            "湖南省":{
                "长沙市":["芙蓉区","天心区","岳麓区","开福区","雨花区","望城区"],
                "株洲市":["荷塘区","芦淞区","石峰区","天元区","渌口区"],
                "湘潭市":["雨湖区","岳塘区"],
                "衡阳市":["珠晖区","雁峰区","石鼓区","蒸湘区"]
            }
        };

        //首先加载省份
        var province = document.getElementById("province");
        var proOption = "";
        for(var provin in data){
            proOption += `<option value="${provin}">${provin}</option>`;
        }
        province.innerHTML +=proOption;

        var city = document.getElementById("city");
        var country = document.getElementById("country");
        //点击省份，后加载city
        province.onchange = function () {
            //清空上一次province变动加载的city
            clearInsert(city,"city","-市-");
            // city.innerHTML = `<option value="city">-市-</option>`;

            //清空上一次city变动加载的country
            clearInsert(country,"country","-区-");
            // country.innerHTML = `<option value="country">-区-</option>`;

            //获取province的value值
            var cities = data[province.value];
            //如果cities为undefined，则说明选择的province不在data内，停止后续操作
            if( cities == null ){
                return;
            }

            //根据上一步的value值加载city对象
            var cityOption = "";
            for(var ci in cities){
                cityOption += `<option value="${ci}">${ci}</option>`;
            }

            //将新增的option标签内容添加到city的selection中
            city.innerHTML += cityOption;

            //点击city，后加载country
            city.onchange = function () {
                //清空上一次city变动加载的country
                clearInsert(country,"country","-区-");
                //获取city的value值，根据value值加载country对象
                var countries = cities[city.value];
                //如果countries为undefined，则说明选择的city不在data内，停止后续操作
                if( countries == null){
                    return;
                }
                var countryOption = "";
                for(var i = 0; i < countries.length;i++){
                    countryOption += `<option value="${countries[i]}">${countries[i]}</option>`;
                }

                //将新增的option标签内容添加到country的selection中
                country.innerHTML += countryOption;
            }
        }

        function clearInsert(handle,valueInfo,text) {
            handle.innerHTML = `<option value=${valueInfo}>${text}</option>`;
        }
    }
</script>
<body>
<div class="nav">
<select name="province" id="province">
<option vlaue="province">省份</option>
<option value="1">1</option>
</select>
<select name="city" id="city">
<option vlaue="city">市</option>
</select>
<select name="country" id="country">
<option vlaue="country">区</option>

</select>	 
</div>
</body>
</html>

自测

1.实现对数组[0,9,12,1,6,3,7,11]的冒泡排序

var arr = [0, 9, 12, 1, 6, 3, 7, 11];
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  for (let i in arr){
    document.write(arr[i] + " ");
  }

2.解释JavaScript中的堆和栈数据结构的区别
栈是一种先进后出的数据结构，栈内存是内存中用于存放临时变量的一片内存块。当声明一个基本变量时，它就会被存储到栈内存中。
堆内存的存储不同与栈，虽然他们都是内存中的一片空间，但是堆内存存储变量时没有什么规律可言。
栈像个容器，容量小速度快
堆像个房间，容量较大
3.a=1,b=2，使用至少三种方法交换变量a和b的值

	a = a + b; //A+B
	b = a - b; //A
	a = a - b; //B

  temp = a;
  a = b;
  b = temp;

  var temp = {
    a: b,
    b: a
  };
  a = temp.a;
  b = temp.b;

4.使用for循环求出0～300之间的奇数之和

 var sum = 0;
for(var i = 0; i < 300;){
 if (i % 2 != 0) {
      sum += i;
    }
}

5.去除数组[8,7,2,1,5,0,1,9,2]中重复的值，相同的值只保留一个。

set集合
var array = [8,7,2,1,5,0,1,9,2];
//创建set对象，将数组中的每个元素添加到set中
var set = new Set();
array.forEach((item)=>{
    set.add(item);
})
//将set中的元素重新转换成array
array = Array.from(set);
console.log(array); //[8, 7, 2, 1, 5, 0, 9]

6.使用非递归方式对数组[8,7,12,1,5,0,6,9,2]执行折半查找

 var arr = [8, 7, 12, 1, 5, 0, 6, 9, 2];
  var x = search(arr, 8);
  console.log(x)//0
  function  search (arr, num) {
    var low = 1;
    var high = arr.length;
    var mid;
    while (low < high) {
      mid = (low + high) / 2;

      if (num == arr[mid - 1]) {
        return mid - 1;
      } else if (num > arr[mid - 1]) {
        low=mid+1;
      } else {
        high = mid - 1;
      }
    }
    return 0;
  }