重庆网站建设优斗士,dede网站栏目管理空白,注册深圳公司需要什么条件,江苏网站关键词优化优化弹性盒子布局#xff08;Flexbox Layout#xff09;#xff1a;通过display: flex;设置容器为弹性盒子#xff0c;可以实现更复杂的自适应和响应式布局。 网格布局#xff08;Grid Layout#xff09;#xff1a;通过display: grid;设置容器为网格布局#xff0c;可以将… 弹性盒子布局Flexbox Layout通过display: flex;设置容器为弹性盒子可以实现更复杂的自适应和响应式布局。 网格布局Grid Layout通过display: grid;设置容器为网格布局可以将元素划分为一个个网格并定义网格在容器中的位置和大小。
display属性主要用来决定元素的呈现方式
display:block;/*以块级元素的方式显示*/
display:inline-block;/*在一行中以块级元素的方式显示*/
display:inline;/*在一行中显示*/
display:flex;/*弹性盒子布局*/
display:grid;/*网格布局*/flex布局
flex-grow: 1.5;/*弹性布局时元素的扩充比例*/
flex-shrink: 0.8;/*弹性布局时元素的收缩比例*/
flex-direction: row;!DOCTYPE html
html langenheadmeta charsetUTF-8titleflex弹性布局/titlestylehtml,body{height: 100%;width: 100%;margin: 0;display: flex;flex-direction: column;font-size: 50px;font-family: 楷体, serif;}header{height: 60px;background-color: #0a142b;color: #dddddd;}main{flex-grow: 1.5;flex-shrink: 0.8;display: flex;flex-direction: row;}aside{width: 200px;background-color: #acacb3;}section{flex-grow: 1.5;flex-shrink: 0.8;display: flex;flex-direction: column;}nav,footer{height: 60px;background-color: #33b4da;}article{flex-grow: 1.5;flex-shrink: 0.8;background-color: bisque;}/style/headbodyheader头部区域/headermainaside菜单栏/asidesectionnav操作导航/navarticle独立内容区/articlefooter网页相关信息/footer/section/main/body
/html结果 !DOCTYPE html
html langenheadmeta charsetUTF-8titleflex弹性布局/titlestylehtml,body{height: 100%;width: 100%;margin: 0;display: flex;flex-direction: row;font-size: 50px;font-family: 楷体, serif;}aside{width: 200px;background-color: #acacb3;color: black;}aside .title{height: 60px;background-color: #0a142b;}main{flex-grow: 1.5;flex-shrink: 0.8;display: flex;flex-direction: column;}header{height: 60px;background-color: black;color: #dddddd;}section{flex-grow: 1.5;flex-shrink: 0.8;display: flex;flex-direction: column;}nav,footer{height: 60px;background-color: #33b4da;}article{flex-grow: 1.5;flex-shrink: 0.8;background-color: bisque;}/style/headbodyasidediv classtitle/div菜单栏/asidemainheader头部区域/headersectionnav操作导航/navarticle独立内容区/articlefooter网页相关信息/footer/section/main/body
/html结果 grid布局
display: grid;
grid-template-columns: 100%;
grid-template-rows: 60px calc(100% - 200px);!DOCTYPE html
html langenheadmeta charsetUTF-8titlegrid网格布局/titlestylehtml,body{height: 100%;width: 100%;margin: 0;font-size: 50px;font-family: 楷体, serif;}body{display: grid;grid-template-columns: 100%;grid-template-rows: 60px calc(100% - 60px);}header{background-color: #0a142b;color: #dddddd;}main{display: grid;grid-template-columns: 200px calc(100% - 200px);grid-template-rows: 100%;}aside{background-color: #acacb3;}nav,footer{height: 60px;background-color: #33b4da;}article{height:calc(100% - 120px);}/style/headbodyheader头部区域/headermainaside菜单栏/asidesectionnav操作导航/navarticle独立内容区/articlefooter网页相关信息/footer/section/main/body
/html结果 JavaScript
script typetext/javascript srcdemo.js/scriptJavaScript执行过程 用户从浏览器发出页面请求服务器接收请求并进行处理处理完成后会将页面返回至浏览器浏览器开始解释执行该页面如果页面中包含有 JavaScript 脚本那么浏览器会再次向服务器发出 JavaScript 脚本获取请求服务器接收请求并进行处理处理完成后会将 JavaScript 脚本返回至浏览器浏览器开始解释执行JavaScript 脚本。 数据类型
数据类型undefinednullnumberbooleanstringobject
var和let的区别 var是全局变量 let是局部变量 字符串
let name ZhangSan;
let nameLiSi;方法说明charAt(index)返回指定位置的字符串indexOf(str)查找字符串首次出现的位置substring(start,end)返回在【】区间中的字符串split(str)分割replace(oldStr,newStr)替换
数组 push()添加元素 .concat()拼接数组 join(“”)按照指定字符串拼接结果是字符串 splice(start,deleteCount,items)从start开始删除指定数量的元素并插入items 遍历 numbers.forEach(numconsole.log(num)) let num [1,2,3];
console.log(num)
//在JavaScript中数组是可以自动扩容的
//添加元素
let num2 num.push(4,5,6);
console.log(num2)
let num3 [7,8,9];//拼接num3在num后面生成一个新数组
let num4 num.concat(num3);
console.log(num4)
//将数中的元素按照给定字符串拼接起来结果是一个字符串
var s num4.join();
console.log(s)let arr [1,2,3,4,5,6]
//从3开始删除数组中的元素删除2个元素
arr.splice(3,2);
console.log(arr)
// //从2这个位置开始删除元素删除1个元素然后再将10,20,30,40从2这个位置开始插入
arr.splice(2,1,10,20,30,40)
console.log(arr)//拼接
let arr2 [100,200]
let numbers arr.concat(arr2);
console.log(numbers)for (let i 0; i numbers.length; i) {console.log(numbers[i])
}console.log()// for (const index in numbers) {
// console.log(numbers[index])
// }console.log()
numbers.forEach(numconsole.log(num))
console.log()
numbers.map(numnum*10).filter(numnum%30).forEach(numconsole.log(num))
console.log(--------)
let number numbers.find(numnum%50);
console.log(number)
console.log(-----------)
//找到数组中第一个匹配条件的元素如果没有那么结果就是undefined
let num1 numbers.find(num num % 5 0);
console.log(num1)
对象Object
对象创建的方式
let user {name:ZhangSan,age:18,sex:男
}let student new Object();student.nameZhangSan;student.age 18;student.sex男;
对象属性的遍历
//基于工具类实现对象的遍历
Object.keys(student).forEach(propconsole.log(propstudent[prop]))
//for-in循环循环的就是对象的属性名
for (let prop in student) {console.log(propstudent[prop])
}
对象的访问方式
//访问对象的方式有两种
//第一种通过 对象名.属性名
console.log(student.name)
//第二种 通过 对象名[属性名]
console.log(student[nick-name])
将一个对象赋值给另一个对象
let stu1 {name:WangWu,sex:男
};
let stu2{};Object.keys(stu1).forEach(propstu2[prop]stu1[prop])
console.log(stu2)
console.log(stu1stu2)
console.log(------)
let s1 JSON.stringify(stu1)//将stu1转化为json格式的字符串
console.log(s1)
//再将json格式的字符串解析成一个对象这个解析出来的对象就与原来的对象地址不一样了
let s2 JSON.parse(s1);
console.log(s2)
console.log(s1s2)
窗体函数
函数名说明alert(“提示信息”)提示对话框confirm(“提示信息”)确认对话框prompt(“提示信息”)输入对话框
数学相关函数
方法说明ceil()向上取整floor()向下取整round()返回与给定数值最近的一个整数random()随机数浮点数
let number parseInt(123)
console.log(typeof number)//将字符串解析成数字必须是以数字开头
//如果中间存在其他非数字字符解析停止
let num parseInt(1234aa32);
console.log(num)//1234//在js中两个整数相除结果可能是浮点数
let n1 5; n23;
console.log(n1/n2)//判断结果是否不是数字
let b isNaN(123)
console.log(b)//falseconsole.log(Math.ceil(0.2));//1
console.log(Math.floor(0.99999));//0
console.log(Math.abs(-1))//1
//返回与给定数值最近的一个整数
console.log(Math.round(-2.6))//-3
console.log(Math.random());
自定义函数
function sum(a,b){return ab;
}function show(msg){console.log(msg)
}
console.log(sum(1,2))
show(hello world)
function sum(a,b){return ab;
}function show(msg){console.log(msg)
}
console.log(sum(1,2))
show(hello world)//匿名函数将函数赋值给一个变量这个变量本质是一个函数
let print function (msg){console.log(msg)
}
print(javascript);/* function calculate(num1,num2){const result num1num2;return function (num3,num4){return result*(num3num4);}}let s calculate(1,2)(3,4);console.log(s)*/
let result (function calculate(num1, num2){const result num1num2;return function (num3,num4){return result*(num3num4);}
})(1,2)(3,4);
console.log(result)
元素事件
名称说明click鼠标左键单击blur元素失去焦点focus元素获得焦点keydown键盘按下keyup键盘按下后释放mouseover鼠标移动到元素上mouseout鼠标移动到元素外change元素内容发生改变input元素内容发生改变 开启元素事件只需要在事件名前面加上“on”即可关闭元素事件只需要在事件名前面加上“off”即可。 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title点击事件/title
/head
bodyinput typebutton value登录 idloginBtn/body
script typetext/javascriptlet btn document.getElementById(loginBtn);
btn.onclick function (event){console.log(event)alert(你点击了登录按钮)
}
/script
/html
input typetext onfocusconsole.log(获得焦点) onblurconsole.log(失去焦点)
!DOCTYPE html
html langenheadmeta charsetUTF-8title按键事件/title/headbodyinput typetext ida/bodyscript typetext/javascriptlet el document.getElementById(a);el.onkeydown function (){}el.onkeyup function (event){let key event.key;if (keyEnter){console.log(登录)}}/script
/html
密码强度检测
!DOCTYPE html
html langenheadmeta charsetUTF-8title密码强度/titlestyleul {margin: 0;padding: 0;}#a,#b,#c {display: inline-block;background-color: gray;height: 5px;width: 56px;}/style/headbodyinput typetext idpwulli ida/lili idb/lili idc/li/ul/bodyscript typetext/javascriptdocument.getElementById(pw).onkeyupfunction (){let password this.value;let strong 0;for (let i 0; i password.length; i) {let s password.charAt(i);//test函数检测给定的字符串是否满足正则表达式if (/[0-9]/.test(s)){strong | 2;}else if (/[a-z]/.test(s)){strong | 4;}else if (/[A-Z]/.test(s)){strong | 8;}else if (/[~!#$%^*?\\.]/.test(s)){strong | 16;}}let a document.getElementById(a);let b document.getElementById(b);let c document.getElementById(c);if(strong 0 strong 10){a.style.backgroundColor green;b.style.backgroundColor gray;c.style.backgroundColor gray;} else if(strong 10 strong 20){a.style.backgroundColor green;b.style.backgroundColor green;c.style.backgroundColor gray;} else if(strong 20){a.style.backgroundColor green;b.style.backgroundColor green;c.style.backgroundColor green;} else {a.style.backgroundColor gray;b.style.backgroundColor gray;c.style.backgroundColor gray;}}/script
/html
鼠标事件-轮播图
!DOCTYPE html
html langenheadmeta charsetUTF-8title轮播图-鼠标事件/titlestyle.img-box {width: 590px;height: 470px;margin: 0 auto;border-style: solid;}img{display: none;}.active{display: block;}/style/headbodydiv classimg-boximg src../img/a.jpgimg src../img/b.jpgimg src../img/c.jpgimg src../img/d.jpgimg src../img/e.jpgimg src../img/f.jpg/div/bodyscript typetext/javascript//js提供了周期函数周期从本质来说就是一个时间间隔因此这个//函数叫setInterval也就是设置时间间隔。这个函数接收两个参数//第一个参数是一个函数的调用或者函数的名称第二个参数是间隔时间//通过标签名获取元素得到的结果是一个数组let imgArr document.getElementsByTagName(img);for (let i 0; i imgArr.length; i) {imgArr[i].onmouseover function (){clearInterval(t);}imgArr[i].onmouseout function (){t setInterval(changeImage, 1000)}}let index 0; //默认显示的图片是第一张const changeImage () {imgArr[index].className ;//将原来的图片的显示移除index; //下标自加1if(index imgArr.length)index 0;imgArr[index].className active; //下一张图片显示}// function changeImage(){// imgArr[index].className ;//将原来的图片的显示移除// index; //下标自加1// if(index imgArr.length)// index 0;// imgArr[index].className active; //下一张图片显示// }//第一个参数是一个函数名这个函数名不能有字符串。如果要使用//字符串那么就必须是函数的调用let t setInterval(changeImage, 1000)//周期函数可以通过clearInterval函数来清理掉// function removeInterval(){//// }/script
/html
changeinput change事件主要表示的是元素的内容发生了变化可用于下拉列表、文件域、复选框、单选按钮 input事件主要表示的是元素的内容或者值发生了变化可用于下拉列表、文件域、复选框、单选按钮以及所有的能够输入的元素这个事件是HTML5提供的 input事件 在输入框输入的时候会实时响应并触发 change事件在输入框失去焦点并且输入框的值发生变化的时候才会触发和 blur事件略有不同blur事件是每次失去焦点时触发不管输入框数据有没有变化
