任务一：生成广告图片
- 利用HTML+CSS+JS在页面正中央生成一幅图片
<style>
*{
padding: 0;
margin: 0;
}
/* 设置盒子宽度和高度并且让盒子在页面中居中 */
div {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -150px;
}
</style>
<body>
<div></div>
<script>
var div = document.querySelector('div');
var img = document.createElement('img');
img.src = './img/image.jpg';
img.style.width = '100%';
img.style.height = '100%';
div.appendChild(img);
</script>
</body>
- 用JS数组在页面上放多张照片，同时动态计算图片之间的间距，实现水平等间距布局
<style>
*{
padding: 0;
margin: 0;
}
img {
position: absolute;
width: 250px;
height: 200px;
}
</style>
<div>
<img src="./img/image.jpg" alt="">
<img src="./img/image.jpg" alt="">
<img src="./img/image.jpg" alt="">
<img src="./img/image.jpg" alt="">
</div>
<script>
var imgs = document.querySelectorAll('img');
//获取屏幕宽度
var window_width = window.screen.availWidth;
//计算间隙
var gap = (window_width - imgs.length * imgs[0].offsetWidth)/(imgs.length+1);
for(var i=0 ; i<imgs.length ; i++){
imgs[i].style.left = (i+1)*gap + i*imgs[0].offsetWidth +'px';
}
</script>
- 实现多张广告图片轮播效果，页面正中每隔三秒切换不同图片，做了一个比较完整的轮播图
style:
<style>
*{
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ol {
list-style: none;
}
.box {
position: absolute;
width: 720px;
height: 400px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -360px;
}
.focus {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
background-color: pink;
}
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li {
float: left;
}
.focus ul li img {
width: 720px;
height: 400px;
}
.arrow-l,.arrow-r {
display: none;
position: absolute;
width: 24px;
height: 40px;
top: 50%;
margin-top: -20px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-size: 18px;
z-index: 2;
}
.arrow-r {
right: 0;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
}
.current {
background-color:#fff;
}
</style>
主体：
<div class="box">
<div class="focus">
<!-- 左侧按钮 -->
<a href="javascript:;" class="arrow-l"> < </a>
<!-- 右侧按钮 -->
<a href="javascript:;" class="arrow-r"> > </a>
<!-- 滚动区域 -->
<ul>
<li><img src="./img/image.jpg" alt=""></li>
<li><img src="./img/image2.jpg" alt=""></li>
<li><img src="./img/image3.png" alt=""></li>
<li><img src="./img/image4.jpg" alt=""></li>
</ul>
<!-- 小圆点 -->
<ol class="circle">
</ol>
</div>
</div>
JS:
<script>
//移动动画
function animate(obj,target,callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var step = (target - obj.offsetLeft)/10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == target){
clearInterval(obj.timer);
callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
},15)
}
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
//每次移动的距离
var focusWidth = focus.offsetWidth ;
//鼠标经过盒子的时候显示左右按钮 鼠标离开盒子的时候隐藏左右离开
focus.addEventListener('mouseenter',function(){
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
})
focus.addEventListener('mouseleave',function(){
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
})
//动态生成小圆点，有多少张图片就生成多少个小圆点
var ul = document.querySelector('ul');
var ol = document.querySelector('.circle');
for(var i = 0 ;i < ul.children.length ; i++){
var li = document.createElement('li');
//区分li是第几个，添加index属性
li.setAttribute('index',i);
ol.appendChild(li);
//点击某个小圆点时，就改变这个小圆点
li.addEventListener('click',function(){
for(var i = 0 ; i < ol.children.length ; i++){
ol.children[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
num = index;
circle = index;
//点击第几个小圆点就跳转到第几张
animate(ul,-index*focusWidth);
})
}
//默认设置第一个小圆点为current
ol.children[0].className = 'current';
//把第一张图片克隆放到最后面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//每点击一次按钮，图片滚动一张
var num = 0;
//控制小圆圈
var circle = 0;
//右侧按钮效果
arrow_r.addEventListener('click',function(){
//如果已经走到了克隆的最后一张图片，就要快速的切换到第一张图片
if( num == ul.children.length-1){
ul.style.left = 0;
num = 0;
}
num++;
animate(ul,-num*focusWidth);
circle++;
if(circle == ol.children.length){
circle = 0;
}
//小圆圈也要发生变化
for(var i = 0 ; i < ol.children.length ; i++){
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
})
//左侧按钮
arrow_l.addEventListener('click',function(){
if(num == 0){
num = ul.children.length - 1;
ul.style.left = -num * focusWidth +'px';
}
num--;
animate(ul,-num*focusWidth);
circle--;
if(circle < 0){
circle = ol.children.length -1;
}
//小圆圈也要发生变化
for(var i = 0 ; i < ol.children.length ; i++){
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
})
//自动播放
var timer = setInterval(function(){
arrow_r.click();
},3000)
</script>
扩展：多级联动菜单
<div>
<select name="province" id="province" onchange="changeCity(this.value)">
<option value="请选择省份">请选择省份</option>
</select>
<select name="city" id="city" onchange="changeBlock(this.value)">
<option value="请选择市">请选择市</option>
</select>
<select name="block" id="block">
<option value="请选择区">请选择区</option>
</select>
</div>
<script>
var data = {
"湖南省":{
"长沙市":["芙蓉区","天心区","岳麓区","开福区","雨花区","望城区"],
"株洲市":["荷塘区","芦淞区","石峰区","天元区","渌口区"],
"衡阳市":["珠晖区","雁峰区","石鼓区","蒸湘区"]
},
"湖北省":{
"武汉市":["江汉区","武昌区","汉阳区","洪山区","江夏区"],
"宜昌市":["西陵区","伍家岗区","点军区","猇亭区","夷陵区"]
}
};
var province = document.querySelector('#province');
var city = document.querySelector('#city');
var block = document.querySelector('#block');
var pro_sel = '';
//添加省份
for(var item in data){
var option = document.createElement('option');
option.value = item;
option.innerHTML = item;
province.appendChild(option);
}
//添加市区
function changeCity(pro){
city.innerHTML = `<option value="请选择市">请选择市</option>`;
block.innerHTML = `<option value="请选择区">请选择区</option>`;
if ( pro == '请选择省份'){
return;
}
for(var item in data[pro]){
var option = document.createElement('option');
option.value = item ;
option.innerHTML = item;
city.appendChild(option);
}
pro_sel = pro ;
}
function changeBlock(cit){
block.innerHTML = `<option value="请选择区">请选择区</option>`;
if( cit == '请选择市'){
return;
}
for(var item in data[pro_sel][cit]){
var option = document.createElement('option');
option.value = data[pro_sel][cit][item];
option.innerHTML = data[pro_sel][cit][item] ;
block.appendChild(option);
}
}
</script>
自测
- 实现对数组[0,9,12,1,6,3,7,11]的冒泡排序
<script>
//冒泡实现元素从小到大排序
var arr = [0,9,12,1,6,3,7,11] ;
for(var i = 0 ; i < arr.length ; i++){
for(var j = i + 1 ; j < arr.length ; j++){
if(arr[j] < arr[i]){
var temp = arr[i] ;
arr[i] = arr[j] ;
arr[j] = temp ;
}
}
}
</script>
- 解释JavaScript中的堆和栈数据结构的区别
答：栈中存储了基本数据类型的值和引用数据类型的地址，内存能由系统自动释放；堆中存储引用数据类型的值 - a=1,b=2，使用至少三种方法交换变量a和b的值
//第一种
var a = 1;
var b = 2;
var temp = a;
a = b;
b = temp;
//第二种
var a = 1 ;
var b = 2 ;
a = a + b ;
b = a - b ;
a = a - b ;
//第三种
var a = 1 ;
var b = 2 ;
a = a ^ b ;
b = a ^ b ;
a = a ^ b ;
- 使用for循环求出0～300之间的奇数之和
var sum = 0;
for(var i = 0 ; i <= 300 ; i++){
if(i % 2 == 1){
sum += i ;
}
}
- 去除数组[8,7,2,1,5,0,1,9,2]中重复的值，相同的值只保留一个
var arr = [8,7,2,1,5,0,1,9,2];
var newArr = [];
for(var i = 0 ; i < arr.length ; i++){
if(newArr.indexOf(arr[i]) === -1){
newArr.push(arr[i]);
}
}
- 使用非递归方式对数组[8,7,12,1,5,0,6,9,2]执行折半查找
function sortNumber(a,b) {
return a-b ;
}
var midSearch = function(num,arr) {
//折半查找针对于有序数组
arr = arr.sort(sortNumber);
var start = 0;
var end = arr.length - 1;
if(num < arr[0] || num > arr[arr.length-1]){
return -1;
}
while(start <= end) {
var mid = parseInt((start + end)/2);
if(num == arr[mid]){
//返回元素是数组中的第几个
return mid+1;
}else if(num <arr[mid]){
end = mid -1;
}else {
start = mid +1;
}
}
return -1;
}
472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
