00、练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>人民币</h2>
<input type="number" name="" id="curry">
<button id="btn">计算</button>
<h2>计算器</h2>
<input type="text" id="su1">
<select name="" id="act">
<option value="+">+</option>
<option value="-">-</option>
<option value="x">x</option>
<option value="÷">÷</option>
</select>
<input type="text" id="su2">
<button id="eq">=</button>
<input type="text" id="su3">
</body>
</html>
<script>
//获取输入人民币的 input
let rmb = document.getElementById('curry');
//获取点击计算的按钮
let cum = document.getElementById('btn');
console.log( rmb.value );
let v0 = rmb.value-0;
//给按钮设置点击事件
cum.onclick = function(){
//重新获取用户输入的值,并且隐式转化为number类型
let v1 = rmb.value-0;
//100的张数
let num1 = parseInt(v1/100);
//除去100元,剩余的金额, 456 余数为56, 查看余数中56中有多少张50面值
let yu1 = v1%100
//50的张数
let num2 = parseInt(yu1/50);
//
let yu2 = yu1%50;
let num3 = parseInt(yu2/20);
let yu3 = yu2%20;
let num4 = parseInt(yu3/10);
let yu4 = yu3%10;
let num5 = parseInt(yu4/5);
let yu5 = yu4%5;
alert(num1+'张100元'+num2+'张50元'+num3+'张20元'+num4+'张10元'+num5+'张5元'+yu5+'张1元');
}
//获取需要的dom元素
let su1 = document.getElementById('su1');
let su2 = document.getElementById('su2');
let su3 = document.getElementById('su3');
let act = document.getElementById('act');
let eq = document.getElementById('eq');
//点击等号
eq.onclick = function(){
let v1 = su1.value -0;
let v2 = su1.value -0;
//获取运算符
let avtVal = act.value;
if(avtVal=='+'){
su3.value = v1+v2;
}
if(avtVal=='-'){
su3.value = v1-v2;
}
if(avtVal=='x'){
su3.value = v1*v2;
}
if(avtVal=='÷'){
su3.value = v1/v2;
}
};
</script>
01、短路算法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>短路算法</title>
</head>
<body>
</body>
</html>
<script>
/*
逻辑运算的短路算法
表达式1 || 表达式2 表达式1为真的时候,表达式2不会被解析
表达式1 && 表达式2 表达式1为真的时候,表达式2才会被解析
*/
let num = 10;
num>2 && num++;
console.log(num);
let n = 10;
console.log( n<2||n++ );
</script>
02、运算符优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>运算符优先级</title>
</head>
<body>
</body>
</html>
<script>
let bol1 = true;
let bol2 = false;
console.log( bol1 + 1 ); //2
console.log( !bol2 + 1 ); //2
console.log( 10 + !bol2 ); //11
console.log( !10 ); // false
console.log( !0 ); // ture
/*
1. !的优先级比 算术运算符的优先级高
2. boolean数据和number类型的数据运算的时候,布尔类型会隐式转化为number类型,其中 false=>0 ture=>1
*/
console.log( 10<5+6 || '中午吃啥' );
let str = 10>(5+6 || '中午吃啥');
console.log( str );
/*
优先级
1. 小括号 ()
2. !
3. 算数运算符
4. 比较运算符
5. 逻辑运算符
6. 赋值运算符
赋值的简写
= += -= *= /=
等于 加等 减等 乘等 除等
简写形式 含义
n+=1 => n=n+1;
n-=1 => n=n-1;
n*=1 => n=n*1;
n/=1 => n=n/1;
*/
let n = 10;
n+=5; // n = n + 5
console.log(n);
n = n + 5;
//字符串拼接
let str1 = '日啖荔枝三百颗';
str1+='每天一碗胡辣汤';
str1+='每天一碗胡辣汤';
console.log(str1);
</script>
03、显示转化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据类型的显示转换</title>
</head>
<body>
</body>
</html>
<script>
/*
显示转化
把数据转化为字符串,使用 String()
把数据转化为number,使用 Number()
把数据转化为bollean,使用 Boolean()
另外,非0即为真
0, '', null, undefined 都会转化为false
*/
// 字符串 转 数字
let num = Number('唐伯虎');
console.log(typeof num);
// 数字 转 字符串
let str = String(1000);
console.log(typeof str);
// 把数据转为bool值
let bol1 = Boolean('唐伯虎');
console.log(typeof bol1, bol1);
let bol2 = Boolean('');
console.log(typeof bol2, bol2);
let bol3 = Boolean('-1');
console.log(typeof bol3, bol3);
</script>
04、三元运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三元(目)运算符</title>
</head>
<body>
</body>
</html>
<script>
/*
三元运算符 ?:
判断条件 ? 判断条件为真,则执行当前代码 : 判断条件为假,则执行当前代码
*/
// 执行 表达式
6>4 ? console.log('固始鹅块') : console.log('糍粑');
// 声明不同的变量值
let abc = !1 ? '秦琼' : '尉迟恭';
console.log( abc );
console.log( 5>6 ? '单雄信' : '罗成' );
// 三元运算符嵌套
let username = 5<6 ? 6>7 ? '李元霸' : '宇文成都' : '杨广';
console.log( username );
</script>
05、获取html中的元素对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取html中的元素对象</title>
<style>
* {
margin: 0;
padding: 0;
}
ul { list-style-type: none; }
ul li {
line-height: 40px;
margin-bottom: 20px;
background: #04be02;
}
.wp {
background: #f60;
}
a.hover {
border: 1px #f00 solid;
}
</style>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul id="">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="wp">5</li>
<li class="wp">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul id="">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="wp">5</li>
<li class="wp">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
<script>
//1.通过id 获取元素
let ul = document.getElementById('list');
ul.style.border = '1px #f00 solid';
/*
2.通过标签获取元素
document.getElementsByTagName('标签名')
特点:
1.调用对象可以是 documen之外的对象
如果通过 document 对象获取的标签,则是获取页面上所有的标签对象
如果通过 其他对象获取的标签,则是获取该对象下所有的标签对象
2.获取的元素对象不仅仅是一个,可以是多个
3.获取的标签对象存放在数组中,也就是该方法的返回值是一个数组
数组,在数组中可以存放任意类型的数据
let arr = ['电影','作业','美食','游戏',123,325,true];
数组的下标从0开始计算,因此如果需要从数组中获取内容则:
arr[内容对于的下标]
*/
let li = document.getElementsByTagName('li')
// li.style.border = '10px #ff0 solid';
console.log( li );
li[7].style.border = '2px #00f solid'
let li1 = ul.getElementsByTagName('li')
console.log( li1 );
li1[9].style.background = '#000'
let arr = ['电影','作业','美食','游戏',123,325,true];
console.log(arr[3]);
/*
3. 通过class类名获取元素
document.getElementsByClassName('class名');
返回值是 一个数组,数组包含了所有具有该class名的元素对象
特点和 document.getElementsByTagName 一致
*/
let liBox = document.getElementsByClassName('wp');
console.log( liBox );
liBox[3].style.background = '#808080';
/*
获取body的方法
1. document.getElementsByTagName('body')[0]
2. documen.body
*/
let body1 = document.getElementsByTagName('body')[0];
body1.style.background = '#ccc'
document.body.style.background = '#666'
</script>
06、简单轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
.wp {
width: 250px;
height: 400px;
border: 1px #f00 solid;
margin: 40px auto 0;
position: relative;
overflow: hidden;
}
#list {
width: 1000px;
display: flex;
flex-wrap: nowrap;
transform: translateX(0);
/* 添加过渡动画 */
transition: all 1s;
}
#list img {
width: 250px;
height: 400px;
}
#box {
height: 40px;
width: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
left: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
#box span {
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
#box span:hover {
background: #f60;
box-shadow: 0 0 0px 5px #ccc;
}
</style>
</head>
<body>
<!-- 外层的div,包含图片列表 -->
<div class="wp">
<div id="list">
<img src="../images/1.png" alt="">
<img src="../images/5.jpg" alt="">
<img src="../images/3.png" alt="">
<img src="../images/4.png" alt="">
<!-- 分页器 -->
</div>
<div id="box">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
<script>
// 获取需要点击的分页器
let box = document.getElementById('box');
let spanBox = box.getElementsByTagName('span');
// 获取列表元素
let list = document.getElementById('list');
// 点击分页器
spanBox[0].onclick = function(){
console.log('点击了第一个图片');
list.style.transform = 'translateX(0px)';
};
spanBox[1].onclick = function(){
console.log('点击了第二个图片');
list.style.transform = 'translateX(-250px)';
};
spanBox[2].onclick = function(){
console.log('点击了第三个图片');
list.style.transform = 'translateX(-500px)';
};
spanBox[3].onclick = function(){
console.log('点击了第四个图片');
list.style.transform = 'translateX(-750px)';
};
</script>