####溢出设置overflow
==
和===
, ==
是先统一两个变量的类型再比较值,===
先比较类型如果类型相等再比较值
"666"==
666 true; "666"===
666 falsed.innerHTML
d.innerHTML="<h1>abc</h1>";
###NaN
1.溢出方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid blue;
/* visible(默认)
hidden超出隐藏 scroll超出滚动*/
overflow:scroll;
}
</style>
</head>
<body>
<div>
<img src="../2.jpg" >
</div>
</body>
</html>
显示效果:
2.引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 内联引入方式 -->
<input type="button" value="按钮" onclick="alert('内联引入成功!')"/>
<!-- 内部引入方式 -->
<script type="text/javascript">
alert("内部引入成功!")
</script>
<!-- 引入外部js文件 -->
<script src="my.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
显示效果:
3.方法声明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//js中注释和java类似 //单行注释/* */多行注释
// 声明无参无返回值方法
function fn1(){
alert("fn1执行!");
}
//调用方法 和java一样
// fn1();
// 声明有参无返回值
function fn2(name,age){
alert(name+":"+age);
}
// fn2("刘备",18)
// 声明无参有返回值方法
function fn3(){
return "疫情赶紧过去吧!";
}
var s = fn3();
console.log(s) ;
// 声明有参有返回值
function fn4(x,y){
return x*y;
}
var result = fn4(5,9);
console.log(result);
// 第二种声明方法的格式
var fn5 = function(){
alert("fn5执行!");
}
fn5();
</script>
</body>
</html>
运行效果:
4.页面相关方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="按钮" onclick="myfn()"/>
<input type="text" id="i1"/>
<div id="d1">这是div</div>
<script type="text/javascript">
//点击按钮时执行此方法
function myfn(){
//通过元素id获取元素对象
var d = document.getElementById("d1");
// 获取div中的文本内容
// alert(d.innerText)
// d.innerText="修改完成!";
// 通过id得到文本框
var i = document.getElementById("i1")
// 修改文本框的值
// i.value="abc";
// 把文本框里面的值取出给到div
d.innerText = i.value;
}
</script>
</body>
</html>
显示效果:
5.平方练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="i1"/>
<input type="button" value="平方" onclick="myfn()"/>
<div id="d1">
</div>
<script type="text/javascript">
function myfn(){
var d = document.getElementById("d1");
var i = document.getElementById("i1");
if(isNaN(i.value)){/* 是NaN不是数 */
d.innerText="输入错误!";
}else{/* 是数 */
d.innerText = i.value*i.value;
}
}
</script>
</body>
</html>
6.计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="i1" />
<input type="text" id="i2" /><br>
<input type="button" value="加" onclick="fn5(1)" />
<input type="button" value="减" onclick="fn5(2)" />
<input type="button" value="乘" onclick="fn5(3)" />
<input type="button" value="除" onclick="fn5(4)" />
<hr />
<div id="mydiv">
</div>
<script type="text/javascript">
function fn1() {
/* var d = document.getElementById("mydiv");
var i1 = document.getElementById("i1");
var i2 = document.getElementById("i2"); */
mydiv.innerText = i1.value * 1 + i2.value * 1;
}
function fn2() {
mydiv.innerText = i1.value - i2.value;
}
function fn3() {
mydiv.innerText = i1.value * i2.value;
}
function fn4() {
mydiv.innerText = i1.value / i2.value;
}
function fn5(x) {
//判断是否是数值
if (isNaN(i1.value) || isNaN(i2.value)){
mydiv.innerText = "输入错误";
return; //结束当前方法
}
switch (x) {
case 1:
mydiv.innerText = i1.value*1 + i2.value*1;
break;
case 2:
mydiv.innerText = i1.value-i2.value;
break;
case 3:
mydiv.innerText = i1.value*i2.value;
break;
case 4:
mydiv.innerText = i1.value/i2.value;
break;
}
}
</script>
</body>
</html>
7.猜数字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" placeholder="请输入0- 100之间的整数" id="i1"/>
<input type= "button" value="猜一猜" onclick="myfn()"/>
<div id= "mydiv">
</div>
<script type="text/javascript">
// 生成0-100的随机数
var x = parseInt(Math.random()*100);
console.log(x);
/* 实现步骤:
1.给按钮添加点击事件,点击时调用myfn方法
2.声明myfn方法,在方法中判断文本框里面的值和x的关系,如果大于x
在mydiv里面显示猜大了, 如果小于x显示猜小了,else mydiv中显示
恭喜你猜对了,
*/
var count=0;
function myfn(){
count++;
if(i1.value>x){
mydiv.innerText="猜大了!";
}else if(i1.value<x){
mydiv.innerText="猜小了!";
}else{
mydiv.innerText="恭喜你第"+count+"次猜对了!";
// 重置数据
count = 0;
x = parseInt(Math.random()*100)
}
}
</script>
</body>
</html>