1. 商品列表打折
.box {
height: 300px;
width: 300px;
border: 1px solid #000;
margin: 50px;
overflow: hidden;
}
/* attribute 属性 -->简写 attr */
.box::after {
content: attr(data-aaa);
display: block;
height: 40px;
width: 100%;
background-color: green;
transform: rotate(-45deg) translateX(-30%) translateY(-150%);
text-align: center;
color: white;
line-height: 40px;
font-size: 30px;
}
<div class="box" data-aaa="打5折"></div>
<div class="box" data-aaa="打4折"></div>
<div class="box" data-aaa="打7折"></div>
<div class="box" data-aaa="打8折"></div>
<div class="box" data-aaa="打9折"></div>
效果:
2. while循环
// while (true) {
// console.log("111");
// }
// while循环是先判断后执行
//计算1+2+3+……+100之和
// var num = 1;//增长
// var sum = 0;//统计结果
// while (num <= 100) {
// // console.log(num); // 1
// sum = sum + num;
// num++
// }
// console.log(sum);
//循环被 break中断
var num = 1;
while (num <= 100) {
console.log(num);
if (num == 10) {
break;
}
num++;
}
while练习
//#region
/* 打印100以内 7的倍数
打印100以内的奇数
打印100以内所有偶数的和
打印图形
* * * * * * * * * *
* * * * * * * * * *
* * * * * * * * * *
* * * * * * * * * *
*/
//#endregion
//打印100以内 7的倍数
var num = 1;
while (num <= 100) {
if (num % 7 == 0) {
console.log(num);
}
num++;
}
//打印100以内的奇数
console.log("---------------");
var num = 1;
while (num <= 100) {
if (num % 2) {
console.log(num);
}
num++;
}
//打印100以内所有偶数的和
console.log("---------------");
var num = 1;
var sum = 0;
while (num <= 100) {
if (num % 2 == 0) {
sum += num;
}
num++;
}
console.log(sum); //2550
console.log("---------------");
var num = 1;
while (num <= 40) {
document.write(" * ");
if (num % 10 == 0) {
document.write("<br>")
}
num++;
}
document.write("<br>")
//方式2
var row = 0;
while (row < 4) {
var num = 1;
while (num <= 10) {
document.write(" * ");
num++;
}
document.write("<br>")
row++;
}
3. do while循环
// 1~100和相加
var num = 1;
var sum = 0;
do {
// console.log(num);
sum += num;
// sum = sum + num;
num++;
} while (num <= 100);
console.log(sum); //5050
// var num = 1;
// do {
// if (num % 7 == 0) {
// console.log(num);
// }
// num++;
// } while (num <= 100);
// var num = 1;
// do {
// if (num % 2 == 1) {
// console.log(num);
// }
// num++;
// } while (num <= 100);
// var num = 1;
// var sum = 0;
// do {
// if (num % 2 == 0) {
// sum += num;
// }
// num++;
// } while (num <= 100);
// console.log(sum);
// var num = 1;
// do {
// document.write(" * ");
// if (num % 10 == 0) {
// document.write("<br>");
// }
// num++;
// } while (num <= 40);
// document.write("<br>");
// // 1---> 15 // 4
console.log("---------");
// var row = 1;
// do {
// var num = 1; //如同每次游戏从1级开始
// do {
// document.write(" * ")
// num++;
// } while (num <= 10);
// document.write("<br>")
// row++;
// } while (row <= 4)
//while是先判断,后执行
//do..while,先执行,后判断
console.log("------------------------");
//1, 一个新入职,月工资为2000元的员工,每年涨当年工资5%,
//20年后的月工资是多少?
var salary = 2000;
var num = 1;
while (num <= 20) {
salary = salary * (1 + 0.05);
num++
}
console.log(salary.toFixed(1));
console.log("------------------------");
// 2, 山上有一口缸可以装50升水,现在有15升水。
//老和尚叫小和尚下山挑水,每次可以挑5升。
// 问:小和尚要挑几次水才可以把水缸挑满?通过编程解决这个问题。
var num = 15;
var count = 0;
do {
console.log(num);
num += 5;
count++;
} while (num < 50);
console.log(count);
console.log("------------------------");
// 3, 打印100–200之间所有能被3或者7整除的数
var num = 100;
while (num <= 200) {
if (num % 3 == 0 || num % 7 == 0) {
console.log(num);
}
num++;
}
console.log("------------------------");
// 4, 计算10的阶乘 (1*2*3*4*5*6*7*8*9*10 n的阶乘1*2……*n)
var n = 10;
var sum = 1;
while (n != 0) {
// console.log(n);
sum *= n;
n--;
}
console.log(sum); //3628800
console.log("----------------");
// 5, 计算1+3+5+...+99的和
// 0 为false ,
// 99,98 97 95.... 1,0
var n = 99;
var sum = 0;
while (n) {
if (n % 2 == 1) {
sum += n;
}
n--;
}
console.log(sum); //2500
// 6, 99乘法表
console.log("----------------");
// 1-9
var n = 1;
while (n <= 9) {
var m = 1;
while (m <= n) {
document.write(m + "x" + n + '=' + m * n + " ");
m++;
}
document.write("<br>");
n++;
}
//计算1+3+5+...+99的和
var n = 1;
var sum = 0;
while (true) {
//1 2 3 4.. 98,99
if (n % 2 == 1) {
sum += n;
}
n++;
if (n == 100) {
break; //终止循环
}
}
console.log(sum);
4. for循环
// for(表达式1;表达式2;表达式3){
// }
// for (; ;) {
// console.log(1111);
// }
// 1~10的和
// var sum = 0;
// for (var i = 1; i <= 100; i++) {
// sum += i;
// }
// console.log(sum); //5050
for (var i = 0, j = 0; i < 5, i < 10; i++, j++) {
// 9 * 9
console.log(i * j); //最后一次的乘积是多少?
}
// 16, 36,0,8
// for (var i = 0; i < 5; i++) {
// for (var j = 0; j <= i; j++) {
// document.write(" ★ ") //搜狗输入法 v1 + -
// }
// document.write("<br>")
// }
//1.
for (var i = 0; i <= 100; i++) {
if (i % 7 == 0) {
console.log(i);
}
}
console.log("----------------");
//2.
for (var i = 0; i <= 100; i++) {
if (i % 2 == 1) {
console.log(i);
}
}
console.log("----------------------");
//3.
var sum = 0;
for (var i = 0; i <= 100; i++) {
if (i % 2 == 0) {
sum += i;
}
}
console.log(sum);
console.log("----------------------");
//4.
for (var i = 1; i <= 40; i++) {
document.write(" * ");
if (i % 10 == 0) {
document.write("<br>")
}
}
5. break和continue
// break 和 continue 的区别?
//break 中断,终止
// 1.它可以用在分支(switch)和循环中
// 2.结束整个循环
// 3.默认是结束就近的循环,还可以结束 指定的循环
//continue 继续
// 1.它只能用在循环中
// 2.结束当次循环
//相同点:break和continue关键字后面的代码都不会被执行!
// 1, 判断一个数是不是合数。(指自然数中除了能被1和本身整除外,还能被其他的数整除(不包括0)的数。)
// 2, 判断一个数是不是素数。(除了1和它本身以外不再有其他的除数整除。)
// 9, 1和9, 3, 27 合数
// 7 11 13 17 19 23 素数
var num = 30; //3,5,6,10
var isSu = true;//假设它是素数
// 2-6
for (var i = 2; i < num; i++) {
if (num % i == 0) {
isSu = false;//把素改成合数
console.log("被整除");
break;
}
}
// console.log(isSu);
var res = isSu ? "素数" : "合数"
console.log(num + "是" + res);
// 求整数1~100的累加值,但要求跳过所有个位为3的数。
// var sum = 0;
// for (var i = 1; i <= 100; i++) {
// if (i % 10 == 3) {
// continue;
// break;
// }
// sum += i;
// }
// console.log(sum); // 4570
// tree
//扩展
a: for (var i = 0; i < 5; i++) {
console.log(" i:" + i);
b: for (var j = 0; j < 5; j++) {
console.log(" j:" + j);
c: for (var k = 0; k < 5; k++) {
console.log(" k:" + k);
break a;
}
}
}
9.5练习
//#region switch的练习
//1.接受用户输入的'分数'
var score = prompt("请输入分数?");
//2.判断输入分数,是否合法
if (score >= 0 && score <= 100) {
// 90
switch (true) {
case score >= 80 && score <= 100:
console.log("A");
break;
case score >= 70 && score < 80:
console.log("B");
break;
case score >= 60 && score < 70:
console.log("C");
break;
case score >= 0 && score < 60:
console.log("D");
break;
default:
console.log("别捣蛋");
}
}
//#endregion
// 2. 判断一个整数,属于哪个范围:大于0;小于0;等于0
var num = 1;
if (num == 0) {
console.log("等于0");
} else if (num > 0) {
console.log("大于0");
} else {
console.log("小于0");
}
var num = 1;
if (num != 0) {
if (num > 0) {
console.log("大于0");
} else {
console.log("小于0");
}
} else {
console.log("等于0");
}
var num = 1;
var res = num == 0 ? "等于0" : (num > 0 ? "大于0" : "小于0");
// 3. 判断一个整数是偶数还是奇数,并输出判断结果
var num = parseInt(Math.random() * 100);
var res = num % 2 == 0 ? "偶数" : "奇数"
console.log(res);
if (num % 2 == 0) {
console.log("偶数");
} else {
console.log("奇数");
}
// 4. 开发一款软件,根据公式(身高-108)*2=标准体重,
//可以有10斤左右的浮动。来观察测试者体重是否合适
var h = prompt("请输入身高?");
var w = prompt("请输入体重?");
var s = (h - 108) * 2; //算出标准值
var min = s - 10;
var max = s + 10;
if (w >= min && w <= max) {
console.log("您身体健康!");
} else {
console.log("请与你80岁的女友分手吧");
}
// // 5. 已知圆的半径r,求出圆的面积s (S = π×r2)
// // 随意输入一个年份,判断这个年份是否为闰年.
var r = 100;//半径
var res = Math.PI * r * r;
var res = Math.PI * r ** 2;
var res = Math.pow(r, 2) * Math.PI
// // 7. 输入赵本山的考试成绩,显示所获奖励
// // 成绩==100分,爸爸给他买辆车
// // 成绩>=90分,妈妈给他买MP4
// // 90分>成绩>=60分,妈妈给他买本参考书
// // 成绩<60分,什么都不买
var score = prompt("请输入分数?");
if (score == 100) {
console.log("爸爸给他买辆车");
} else if (score >= 90 && score < 100) {
console.log("妈妈给他买MP4");
} else if (score >= 60 && score < 90) {
console.log("妈妈给他买本参考书");
} else {
console.log("男女混合双打!");
}
// // 8. 会员购物时,根据积分的不同享受不同的折扣,
// // 计算会员购物时所获得折扣
var x = prompt("请输入积分?");
if (x >= 0 && x < 2000) {
console.log("打9折");
} else if (x >= 2000 && x < 4000) {
console.log("8折");
} else if (x >= 4000 && x < 8000) {
console.log("打7折");
} else {
console.log("打6折");
}
var w = prompt("请输入体重?");
var h = prompt("请输入身高?");
var bmi = w / (h ** 2);
console.log(bmi);
if (bmi < 18.5) {
console.log("过轻");
} else if (bmi >= 18.5 && bmi < 25) {
console.log("正常");
} else if (bmi >= 25 && bmi <= 28) {
console.log("过重");
} else if (bmi > 28 && bmi <= 32) {
console.log("肥胖");
} else {
console.log("非常肥胖!");
}