HTML相关（四）
溢出设置
设置行内元素垂直对齐方式: top上对齐, middle中间对齐, bottom下对齐, baseline基线对齐，此处按钮下方与图片下方对齐
<head>
<style>
body>img{
width: 100px;
/* bottom下对齐*/
vertical-align: bottom;
}
</style>
</head>
<body>
<input type="text"><img src="图片地址" alt="">
</body>设置超出的部分:显示(默认)visible/隐藏hidden/滚动显示scroll，此处图片超出的部分可通过滑动显示条部分查看
<head>
<style>
body>div{
width: 200px;
height: 200px;
border: 1px solid red;
/*设置超出的部分：滚动显示scroll*/
overflow: scroll;
}
</style>
</head>
<body>
<div>
<img src="图片地址" alt="">
</div>
</body>z-index: 设置显示层级,值越大显示越靠前，int值
<head>0
<style>
#d1{
width: 100px;
height: 50px;
background-color: red;
position: absolute;
/*设置显示层级,值越大显示越靠前*/
z-index: 1;
}
#d2{
width: 50px;
height: 100px;
background-color: blue;
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<div id="d1">这个显示在前边</div>
<div id="d2"></div>
</body>js的引入方式
运行时，会在控制台输出：内部js代码执行成功，此行在控制台输出
-------my.js:1 外部js代码成功运行！
<!----内联：在标签的事件属性中添加js代码------>
<input type="button" value="按钮" onclick="alert('按钮被点击了')">
<script>
//控制台输出
console.log("内部js代码执行成功，此行在控制台输出");
</script>
<!--引入外部js文件，script标签引入文件后不能写js代码-->
<script src="my.js"></script>
-------------------------------------------------------------
<!--js内容-->
console.log("外部js代码成功运行！")方法的调用：
点击按钮后，控制台显示f1，其他的不点击按钮也会输出在控制台
<body>
<!---通过按钮调用方法--->
<input type="button" value="按钮" onclick="f1()">
<script>
//1.无参无返回值的方法
function f1() {
console.log("f1");
}
// 调用方法
f1();
// 2.有参无返回值的方法
function f2(name,age) {
console.log(name+":"+age);
}
f2("张三",50);
//3.无参有返回值
function f3() {
return "这是返回值";
}
let info=f3();
console.log(info);
//4.有参有返回值
function f4(x,y) {
return x*y;
}
let result=f4(5,9);
console.log(result);
//第二种定义方法的方式
let f5=function (name,age) {
console.log(name+":"+age);
}
f5("李四",30);
//第三种定义方法的方式
let f6 =new Function("name","age","console.log(name+':'+age)")
f6("王五",20);
</script>
</body>页面相关的方法
点击按钮后，div中的值会变成text中的值
<div>原本的值</div>
<input type="text">
<input type="button" value="按钮" onclick="f()">
<script>
function f() {
//得到div和文本框
let d =document.querySelector("div");
let i=document.querySelector("input");
//把input的值取出赋给div
d.innerText=i.value;
}
</script>悬停的动画效果
body>div>div:hover{
/*当将块的position属性设置为relative时,与设置为absolute完全不同,这时子块是相对于他原本的位置定位,无论是否进行移动,其所占的位置仍然留有空位*/
position: relative;
bottom: 5px;
/*元素阴影：x偏移值 y偏移值 浓度 范围 颜色*/
box-shadow: 0 0 5px 8px blue;
}填充：大概是当空格用的，暂时没想到用法
<style>
p.padding {padding-left:2cm;}
p.padding2 {padding-left:50%;}
</style>
</head>
<body>
<p>这是一个没有左填充边距的文本。</p>
<p class="padding">这个文本的左填充边距为2厘米。</p>
<p class="padding2">这个文本的左填充边距为50%。</p>
</body>定时器（方法名称，每隔多长时间）
<h1>0</h1>
<h2>0</h2>
<script>
//开启定时器
setInterval(f,1000);
let count = 0;
let h1 =document.querySelector("h1");
function f(){
count++;
h1.innerText = count;
}
//通过匿名方法开启定时器
let timer = setInterval(function (){
console.log(count);
if(count==5){
//停止计时器
clearInterval(timer);
}
},100);
//开启只执行一次的定时器
setInterval(function () {
let h2=document.querySelector("h2");
h2.innerText ="时间到";
},3000);
</script>
在页面上添加东西，按下按钮后，会在页面上显示text中的内容以及显示一张图片
<input type="text">
<input type="button" value="按钮" onclick="f()">
<script>
function f() {
//通过选择器得到文本框对象
let i = document.querySelector("input");
//创建h1
let h1 = document.createElement("h1");
//设置显示的内容为文本框的值
h1.innerText = i.value;
//把h1添加到body里面
document.body.append(h1);
//创建图片标签
let img = document.createElement("img");
img.src = "图片地址";
document.body.append(img);
}
</script>
添加图片显示的代码
<input type="text" placeholder="请输入添加图片的数量" id="i1">
<input type="button" value="猫猫" onclick="f(1)">
<input type="button" value="随机来点" onclick="f(2)">
<script>
function f(x) {
let imgName = x==1?"猫猫的图片地址":"随便来点的图片地址";
//得到文本框
let i1 =document.querySelector("#i1");
for (let i =0;i<i1.value;i++){
//创建图片标签
let img =document.createElement("img");
img.src = imgName;
img.width = 100; //设置宽度
//添加到body；里面
document.body.append(img);
}
}
</script>列表的创建
<input type="text" placeholder="员工姓名" id="i1">
<input type="text" placeholder="员工工资" id="i2">
<input type="text" placeholder="员工工作" id="i3">
<input type="button" value="添加" onclick="f()">
<table border="1">
<caption>员工列表</caption>
<tr>
<th>姓名</th>
<th>工资</th>
<th>工作</th>
</tr>
</table>
<script>
function f() {
//1.创建tr
let tr=document.createElement("tr");
// 2.创建3个td
let nameTd=document.createElement("td");
let salaryTd=document.createElement("td");
let jobTd=document.createElement("td");
// 3.把三个文本框的值给到三个td
//完整代码
// let i1 =document.querySelector("#i1");
// let i2 =document.querySelector("#i2");
// let i3 =document.querySelector("#i3");
nameTd.innerText=i1.value;
salaryTd.innerText=i2.value;
jobTd.innerText=i3.value;
// 4.把td装进tr
tr.append(nameTd,salaryTd,jobTd);
// 5.得到table 把tr装进table
let table = document.querySelector("table");
table.append(tr);
}
</script>自定义对象，运行后在控制台输出p1,p2的数据
<table border="1">
<caption>商品列表</caption>
<tr>
<th>商品标题</th>
<th>商品价格</th>
<th>商品销量</th>
</tr>
</table>
<script>
//实例化对象 空对象
let p1 = {};
//动态给实例化完成的对象添加属性和方法
p1.name = "张三";
p1.age = 20;
p1.run = function () {
console.log(this.name+":"+this.age);
}
//调用对象的方法
p1.run();
//实例化自带属性和方法的对象
let p2 = {
name:"李四",
age:18,
run:function () {
console.log(this.name+":"+this.age);
}
}
p2.run();
//通过数组装对象的方式封装 列表数据
let arr = [{title:"商品1",price:4000,saleCount:200},
{title:"商品2",price:500,saleCount:1200},
{title:"商品3",price:5,saleCount:300}];
//遍历数组 把数据展示到页面中
for (let product of arr) {
//创建行
let tr = document.createElement("tr");
let titleTd = document.createElement("td");
let priceTd = document.createElement("td");
let saleCountTd = document.createElement("td");
titleTd.innerText = product.title;
priceTd.innerText = product.price;
saleCountTd.innerText = product.saleCount;
//把3个td装进tr
tr.append(titleTd,priceTd,saleCountTd);
//把tr装进table
let table = document.querySelector("table");
table.append(tr);
}
</script>