8.26总结 JS
一、居中方式
text-align: center;只作用于行元素，块级元素不受 text-align: center影响，要是想居中块元素只有两种方法：
1.将块设置为行块元素：display: inline-block.
2.设置外边距：margin ：0 auto.
二、定位方式，绝对路径
position: absolute;对于窗口
position: relative; 相对于窗口
/*显示层级值越大越靠前，只作用于非静态*/
z-index: 1; //用po'si'ti'tion relive 添加配合使用
三、图片浮动效果
/*悬停*/
div:hover{
/*相对定位*/
position: relative;
top: 10px;
left: 20px;
}四、动画效果
img {
position: absolute;
top: 20px;
right: 35px;
width: 318px;
height: 319px;
/*设置动画持续时间*/
transition-duration: 2s;
}
img:hover {
/*让图片缩放*/
transform: scale(1.25);
}五、JS
5.1 创建和引用
JS的创建方式：Jscript书写和引用都在标签<body>，不能既引用，又写代码 。
引用：<script src="myjs.js"></script>
<!--控制台输出--> console.log("内部js代码执行成功");
5.2 内部方法的创建
function f1() { } //js不需要定义返回值的类型无需void
function f4(x, y) { return x + y; } //可以定义参数列表，但不需要定义传参的类型。
调用时：<input type="button" value="按钮" οnclick="f()">。
5.3 获取对象
//获取对象
let d=document.querySelector("div");
let i=document.querySelector("input");
//传递值
d.innerText=i.value;i.value获取 input文本框里的内容。
d.innerText 将值赋值给 div显示。
isNaN(参数名) 判断是否为数字。
/*在运算中不能直接+会拼接为字符串*/
d.innerText = (i.value*1+i.value*1); 需要乘数字1 或者 parseFloat( );
alert ( );页面提示框
六、猜数字
<body>
<input type="text" id="d1">
<input type="text" id="d2">
<input type="button" value="加" onclick="f1(1)">
<input type="button" value="减" onclick="f1(2)">
<input type="button" value="乘" onclick="f1(3)">
<input type="button" value="除" onclick="f1(4)">
<div>.</div>
<script>
let d1 = document.querySelector("#d1");
let d2 = document.querySelector("#d2");
let d3 = document.querySelector("div");
function f1(x) {
if (isNaN(d1.value) || isNaN(d2.value)) {
d3.innerText = "输入错误";
console.log(d1 + "非法了");
return;
}
switch (x) {
case 1:
d3.innerText = (d1.value * 1 + d2.value * 1);
break;
case 2:
d3.innerText = d1.value * 1 - d2.value * 1;
break;
case 3:
d3.innerText = d1.value * 1 * d2.value * 1;
break;
case 4:
d3.innerText = d1.value * 1 / d2.value * 1;
break;
}
}
</script>
</body>