一定要先自己做,不要上来就直接看答案,只有这样你才会学到东西。
练习一
//需求:
//1.声明一个变量,用于存放用户购买的商品 数量(num)为20件
//2.声明一个变量,用于存放用户的 姓名(name)为 张三
//3.依次在 控制台(console) 打印输出两个变量
<script>
//声明变量 num ,并初始化值为 20
let num = 20;
//声明变量 name ,并初始化值为 张三
let name = "张三";
//在控制台打印输出两个变量
console.log(num);
console.log(name);
//可在浏览器页面按下F12进入开发者模式,选择控制台(Console)查看输出信息
</script>
练习二
//需求
//1.定义两个变量 (n1,n2) 分别存放两个数 (10,20)
//2.写出两种方法交换 n1 和 n2 的值
<script>
//定义变量并初始化
let n1 = 10 , n2 = 20 ;
//方法一:通过中间变量交换
let temp ;
temp = n1 ;
n1 = n2 ;
n2 = temp ;
//方法二:通过简单加减法交换
n1 = n1 + n2 ;//存放两数总和
n2 = n1 - n2 ;//总和减去原来的 n2 就是原来的 n1
n1 = n1 - n2 ;//总和减去现在的 n2(原本是n1) 就是现在的 n1
</script>
练习三
//需求
//1.提供用户输入界面,计算圆的周长和面积并显示在页面上
//2.要求用到Boolean()、isNaN()、Number()函数)
/*思路分析
进入网页时弹出输入提示框(利用prompt函数实现),提供给用户输入圆的半径。
如果用户什么也没有输入,直接点击“确定”,或者是点击“取消”,则提示用户“您什么也没有输入或是点击了取消按钮!”;
如果用户输入了包含了非数字的字符串时,则提示用户“请输入正确的数值!”;
当用户输入了纯数字时,但小于等于0,则提示“半径小于等于0!”
当用户输入了纯数字时,且大于0,则计算圆的周长和面积并在网页上显示结果。
*/
<script>
let value;
//循环接收用户输入
while (true) {
value = prompt("请输入圆的半径");
//判断用户是否输入
if (Boolean(value)) {
//判断是不是数字
if (isNaN(Number(value))) {
//如果不是数字
alert("请输入正确的数值!");
}
//判断是否小于等于0
else if (Number(value) <= 0) {
alert("半径小于等于0!");
} else {
document.write("圆的半径:" + value + "<br>");
document.write("圆的周长:" + Number(value * Math.PI * 200) / 100 + "<br>");
document.write("圆的面积:" + (value * value * Math.PI).toFixed(3).slice(0, -1) + "<br>");
break;
}
} else {
alert("您什么也没有输入或是点击了取消按钮!");
}
}
</script>
//toFixed(n):把数字转为字符串,四舍五入保留n为小数,不写n就是不保留小数
//slice(start,end):[strat,end)提取字符串的某个部分,并以新的字符串返回被提取部分
//start参数:字符串中第一个字符位置索引为0,第二个为1,以此类推
//end参数:如果为负数,-1表示字符串最后一个字符位置,-2表示倒数第二个,以此类推
任务四
/*需求
1.定义三个变量并赋初值var num1=6, num2 = 3, num3 = 4
2.然后对这三个变量进行恰当的类型转换,并执行“+”运算,获得最终结果67。
*/
<script>
let num1 = 6, num2 = 3, num3 = 4;
// 30+4+30+3
console.log(num2 * 10 + num3 + num2 * 10 + num2);
// 34+33
console.log(Number("" + num2 + num3) + Number("" + num2 + num2));
// 24+43
console.log(num1 * num3 + Number("" + num3 + num2));
// 6+7
console.log(Number(""+num1+(3+4)));
</script>
/*
Number():将数字字符串转为对应数字,如果转换失败返回NaN。
*/
练习五
/*需求
日常生活中经常遇到给商品算账的问题。当商品标价100元,税率为0.05,统计买一件该商品的总金额和税金分别是多少?
实现思路:
1.程序运行后,弹出输入提示框,让用户输入商品标价。注意要做异常判断。
2.计算商品的总金额和税金
税金 = 标价 * 税率
总金额 = 标价 + 税金
3.利用算术运算符来计算
4.先定义四个变量分别用来存储标价、税率、税金和总金额的值,再通过运算符来计算。
*/
<script>
//接收用户输入
let userInput;
//税率
let tax = 0.05;
//总金额
let totalMoney = 0;
//税金
let taxMoney = 0;
//用户是否输入
let isInput = false;
while (true) {
userInput = prompt("请输入商品价格:");
// 判断用户输入是否为空
if (Boolean(userInput)) {
// 把字符串转为数字
userInput = Number(userInput);
// 判断是不是数字
if (!isNaN(userInput)) {
// 判断是不是正数
if (userInput <= 0) {
alert("请输入大于0的数");
} else {
isInput = true;
// 一件商品的总金额和税金
taxMoney = userInput * tax;
totalMoney = userInput + taxMoney;
printInfo();
continue;
11
}
} else {
alert("请输入正确的数值");
}
} else {
if (isInput) {
alert("生成价格表");
isInput = false;
break;
} else {
alert("您还未输入内容");
}
}
}
//函数封装打印方法
function printInfo() {
document.write("商品价格:" + userInput + "<br>");
document.write("税率:" + tax + "<br>");
document.write("税金:" + taxMoney + "<br>");
document.write("总价:" + totalMoney + "<br>");
document.write('<img src="cuxiao.png" alt="Not Found File100" width="100px100"><br>');
}
</script>
练习五增强版
上个版本有阻塞问题,这个版本较上一个更完整更好,附上完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Operator</title>
<style>
* {
margin: 0;
padding: 0;
}
main {
height: 100px;
}
fieldset {
margin: 0 auto;
width: 500px;
position: sticky;
border: 1px solid black;
}
fieldset.basic {
position: relative;
text-align: center;
}
fieldset.actually {
text-align: left;
}
fieldset legend {
text-align: center;
}
button.submit, button.select {
box-sizing: border-box;
background-color: white;
border: 1px solid gray;
border-radius: 5px;
padding: 2px;
font-size: 10px;
}
button.submit:hover, button.select:hover {
filter: brightness(0.9);
}
input.value {
box-sizing: border-box;
padding: 1px 5px;
margin-bottom: 2px;
}
input:focus {
outline: none;
}
</style>
</head>
<body>
<main>
<fieldset class="basic">
<legend>请输入商品标价</legend>
<label for="value">
<input class="value" id="value" onblur="delEvent()" onfocus="addEvent()" onkeydown="EnterKey">
</label>
<button class="submit" onclick="start()">确定</button>
<select class="select" id="selectTo">
<option class="option" style="display: none">编号</option>
</select>
<button class="select" onclick="select()">查询</button>
</fieldset>
<fieldset class="actually">
<legend>实付价格</legend>
<div class="content">
<div class="text" style="display: none"></div>
</div>
</fieldset>
</main>
<script>
//设置编号
let id = 1;
//接收用户输入
let userInput;
//税率
let tax = 0.05;
//总金额
let totalMoney = 0;
//税金
let taxMoney = 0;
//用户是否输入
let isInput = false;
//价格计算
function start() {
let userElement = document.getElementById("value");
userInput = userElement.value;
userElement.value = null;
// while (true) {
// 判断用户输入是否为空
console.log(userInput);
if (Boolean(userInput)) {
// 把字符串转为数字
userInput = Number(userInput);
// 判断是不是数字
if (!isNaN(userInput)) {
// 判断是不是正数
if (userInput <= 0) {
alert("请输入大于0的数");
} else {
//判断价格选择税率
switch (userInput / 100) {
case 0:
case 1:
tax = 0.05;
break;
case 2:
tax = 0.1;
break;
case 3:
tax = 0.2;
break;
case 4:
tax = 0.3;
break;
case 5:
tax = 0.4;
break;
case 6:
tax = 0.5;
break;
case 7:
tax = 0.6;
break;
case 8:
tax = 0.7;
break;
case 9:
tax = 0.8;
break;
case 10:
tax = 0.9;
break;
default:
tax = 0.95;
}
isInput = true;
// 一件商品的总金额和税金
taxMoney = parseInt(userInput * tax);
totalMoney = userInput + taxMoney;
printInfo();
}
} else {
alert("请输入正确的数值");
}
} else {
if (isInput && userInput == null) {
alert("生成价格表");
isInput = false;
// break;
} else {
alert("您还未输入内容");
}
}
// }
}
//函数封装打印方法
function printInfo() {
let content = "<div " + `id=${id} ` + "class='text' style='height: 110px;overflow: hidden'>"
+ "<hr>"
+ "编号:[" + id + "]<br>"
+ "商品价格:" + userInput + "<br>"
+ "税率:" + tax + "<br>"
+ "税金:" + taxMoney + "<br>"
+ "总价:" + totalMoney + "<br>"
+ '<img src="cuxiao.png" style="z-index:-1;display:inline;position: relative;top: -80px;left: 300px;" alt="Not Found File100" width="100px"><br>'
+ "</div>";
let element = document.querySelector(".text:last-child");
element.insertAdjacentHTML("afterend", content);
addLink();
id++;
}
//锚点
function select() {
let element = document.getElementById("selectTo");
let value = element.value;
window.location.href = "#" + value;
}
// 添加锚点
function addLink() {
let element = document.querySelector("option.option:last-child");
let temp;
temp = `<option class="option" value="${id}" id="option${id}">${id}</option>`;
element.insertAdjacentHTML("afterend", temp);
}
// 添加事件监听
function addEvent() {
document.addEventListener("keydown", EnterKey, false);
}
//键盘事件
function EnterKey(event) {
event = event || window.event;
if(Number(event.keyCode)==13){
console.log("按下回车");
start();
}
}
//事件监听清除
function delEvent() {
document.removeEventListener("keydown",EnterKey, false);
}
</script>
</body>
</html>
练习六
/*
需求:
编写程序,由用户输入一个数值型数据,与70作比较,分别输出经过以下比较运算符比较后的结果:
n输入数据>=70
n输入数据<70
n输入数据!=70
n输入数据>70
n输入数据===’70’(注意这个70前后有一对引号)
n输入数据!==’70’(注意这个70前后有一对引号)
实现思路:
①需要用到相关比较运算符>=、<、!=、>、===、!==
②利用prompt来提供用户输入数值型数据的提示框(注意:为保证输入的是数值型数据,需要进行异常判断)
③声明一个变量用来接收用户输入数值型数据
④将该变量的值转换为数值型后,再与70(’70’)进行>=、<、!=、>、===、!==六种比较。
最后将这些比较的结果通过document.write()在页面上输出。
*/
<script>
let input = prompt("请输入一个数字");//prompt的返回值类型是Strng
document.write(input + ">=70是" + (input >= 70) + "<br>");
document.write(input + "<70是" + (input < 70) + "<br>");
document.write(input + "!=70是" + (input != 70) + "<br>");
document.write(input + ">70是" + (input > 70) + "<br>");
document.write(input + "==='70'是" + (input === '70') + "<br>");
document.write(input + "!=='70'是" + (input !== '70') + "<br>");
</script>
练习七
/*
需求:输出1+2+3+4+5+...+997+998+999+1000的和
思路:
1.通过循环函数来写(while,do...while,for)
2.初始值设为1,终值设为1000
3.条件为<=1000
4.每次递增一
5.定义一个变量存放总和,初值为0
*/
<script>
let total = 0;
for(let i = 1; i <= 1000 ; i++){
total += i ; //等同于 total = total + i
}
//控制台输出
console.info('1-1000的和为 :',total);
//页面输出
document.write('1-1000的和为 :',total);
</script>

练习七(花里胡哨版)
/*
需求:
1.求1+3+5+7+...+997+999的和
2.输出每个数,除了最后一个数,其他数后面跟+号
3.十个一行,右对齐
4.奇数行背景为粉色(pink),偶数行背景色为灰色(gray)
思路:
(略)
*/
let i = 1;
let sum = 0;
let strSum = "";
let space;
let span;
let count = 0;
let rows = 0;
let color;
do {
if (i % 2 === 1) {
sum += i;
if (i < 10) {
space = " ";
} else if (i < 100) {
space = " ";
} else if (i < 1000) {
space = "";
}
strSum += space + i;
count++;
if (i + 1 !== 1000) {
strSum += "+"
} else {
strSum += "=";
}
if (count % 20 === 0) {
rows++;
if (rows % 2 === 1) {
color = "gray";
} else {
color = "pink";
}
console.log(strSum.length)
strSum += "<br>";
span = `<span style="background-color: ${color}">${strSum}</span>`;
strSum = "";
document.write(span)
}
}
i++;
}
while (i <= 1000) ;
document.write(`<div style="color: red;font-size: 30px">${sum}</div>`)
练习八
需求:实现一个可以进行加、减、乘、除四则运算的简易网页版计算器。

实现思路
1、前端界面实现,要用到表单元素文本框<input type=“text”/>,下拉选择框<select></select>,按钮<input type=“button”/>
2、当单击“=”按钮时,将执行一个函数,该函数用来计算两个数相加、相减、相乘、相除的结果。通过自定义函数实现。
3、要想在JavaScript函数里面访问文本框或者下拉选择框的值,要用到document的getElementById()方法(函数)
4、设置文本框的值,通过document的getElementById()方法(函数)找到文本框元素,通过设置它的value属性来实现。
5、点击重置按钮可以清空文本框里面的数据。
<body>
<h1>网页版简易计算器</h1>
<form action="javascript:void(0)" name="Calculate" method="GET">
<label><input type="text" id="one"></label>
<select id="operator">
<option value="+">+</option>
<option value="-"> -</option>
<option value="*">x</option>
<option value="/">÷</option>
</select>
<label><input type="text" id="two"></label>
<label><input onclick="calculate()" type="submit" id="agree" value="="></label>
<label><input type="text" id="answer" disabled="disabled"></label>
<label><input type="reset" value="重置"/></label>
</form>
</body>
body {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
input,
select {
border: 1px solid black;
border-radius: 5px;
padding: 5px;
user-select: none;
}
function calculate() {
let form = document.querySelector("form");
let answer = eval(form.one.value + form.operator.value + form.two.value);
form.answer.value = answer;
}
练习九
需求


代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>金字塔</title>
<style>
</style>
</head>
<body>
<script>
let rows = 1;
let cols = rows * 2 - 1;
let body = document.querySelector("body");
window.onload=function () {
rows = prompt("请输入层数","5");
begin();
}
//创建表格
function createSpan(text, color) {
let space;
space = document.createElement("div");
space.style.cssText = `
width:50px;
height:50px;
background:${color};
display:inline-block;
position:relative;
border:1px solid black;
margin: -5px 0 0 -1px;
`;
let txt = document.createElement("p");
txt.innerText = text;
txt.style.cssText = `
width:100%;
position:absolute;
text-align:center;
`;
//将内容添加到表格
space.appendChild(txt);
//返回表格
return space;
}
function begin() {
body.innerHTML = "";
//上半部分
for (let i = 1; i <= rows; i++) {
draw(i);
body.appendChild(document.createElement("br"));
}
//下半部分
for (let i = rows - 1; i > 0; i--) {
draw(i);
body.appendChild(document.createElement("br"));
}
}
//绘制表格
function draw(i) {
//前空格 rows - row
for (let j = 1; j <= rows - i; j++) {
// document.write("0")
body.appendChild(createSpan("", "skyblue"));
}
//内容格子
for (let j = 1; j <= 2 * i - 1; j++) {
// document.write("4")
body.appendChild(createSpan("*", "yellow"));
}
//后空格 rows - row
for (let j = 1; j <= rows - i; j++) {
// document.write("0")
body.appendChild(createSpan("", "skyblue"));
}
}
</script>
</body>
</html>
待更新……
练习十
/*描述:要求使用Date类的对象来获取当前系统时间,
并完成在页面上输出“今天是XXXX年XX月XX日XX小时XX分XX秒 星期X”。
实现思路:
①根据任务要求,可以使用Date对象的方法中的getFullYear()得到年份,
getMonth()方法得到月份,getDate()得到日期,getHours()得到小时,
getMinutes()得到分钟数,getSeconds()得到秒数,getDay()得到星期几。
②使用new Date()方法创建一个当前系统时间的Date实例对象。
③利用document.write()按格式输出当前系统日期。
*/
function getToDate(){
//创建Date对象:默认是用当前日期创建日期对象
let myDate = new Date();
//获取年份
let year = myDate.getFullYear();
//获取月份:月份从0开始计算,最高11,所以要加1
let month = myDate.getMonth() + 1//获取日期
let date = myDate.getDate();
//获取小时
let hours = myDate.getHours();
//获取分钟数
let minutes = myDate.getMinutes();
//获取秒数
let seconds = myDate.getSeconds();
//获取星期几
let today = myDate.getDay();
//打印
document.write("今天是" + year + "年" + month + "月" + date + "日" + hours + "时" + minutes + "分" + seconds + "秒")
//以本地格式输出日期时间
console.log(myDate.toLocaleString())
}
练习十一
/*
设计一个函数,这个函数能够实现从含有数字的字符串取出所有数字的功能;
调用该函数在页面上输出这个数字串。
*/
//函数代码
function getNumber(number) {
//存放数字容器
let numStr = "";
//遍历字符串
for (let i = 0; i < number.length; i++) {
//判断是否不是数字
if (!isNaN(number[i])) {
//字符串拼接:concat()用于两个或多个字符串拼接,返回新字符串
numStr = numStr.concat(number[i]);
}
}
//返回纯数字字符串
return numStr;
}
练习十二
任务描述:要求用户输入自己的出生日期后,在页面上输出“您已经活了XXXX天
对用户的输入做出检测


<!-- 主体 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<style>
form {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
margin: 0 auto;
width: 250px;
text-align: center;
}
.hide, .show {
background-color: #eeafaf;
color: red;
width: 20px;
border-radius: 20%;
position: absolute;
}
.hide {
display: none;
}
.show {
display: inline-block;
}
#answer {
text-align: center;
}
</style>
<script src="getLiveDay.js"></script>
</head>
<body>
<form action="javascript:void(0)" autocomplete="off" id="goLiveDay" method="post" name="liveDay">
<fieldset>
<legend>请输入您的输出日期</legend>
<label class="userInput"><input name="birthYear" type="text" value="2022"><span>年</span></label><br>
<label class="userInput"><input name="birthMonth" type="text" value="4"><span>月</span></label><br>
<label class="userInput"><input name="birthDay" type="text" value="12"><span>日</span></label>
</fieldset>
<input id="submit" name="to" onclick="getLiveDay(this.form)" type="button" value="计算">
<fieldset>
<legend>您已存活</legend>
<input id="answer" name="answer" readonly type="text"><label for="answer"></label>
</fieldset>
</form>
</body>
</html>
//内部js
<script>
let myForm = document.getElementById("goLiveDay");
let label = document.getElementsByClassName("userInput");
window.onload = function () {
for (const single of label) {
let element = document.createElement("span");
element.className = "hide";
element.innerText = "X";
single.appendChild(element);
}
label[0].addEventListener("input", () => {
if (myForm.birthYear.value.search(/[^\d]/) !== -1 || myForm.birthYear.value < 1900 || myForm.birthYear.value > new Date().getFullYear()) {
label[0].lastElementChild.className = "show";
} else {
label[0].lastElementChild.className = "hide";
}
doYouHaveClassShow(label);
});
label[1].addEventListener("input", () => {
if (myForm.birthMonth.value.search(/[^\d]/) !== -1 || myForm.birthMonth.value < 1 || myForm.birthMonth.value > 12) {
label[1].lastElementChild.className = "show";
} else {
label[1].lastElementChild.className = "hide";
}
doYouHaveClassShow(label);
});
label[2].addEventListener("input", () => {
let monthDay = getHowMonth(myForm.birthYear.value, myForm.birthMonth.value);
console.log("monthDay", monthDay)
if (myForm.birthDay.value.search(/[^\d]/) !== -1 || myForm.birthDay.value < 1 || myForm.birthDay.value > monthDay) {
label[2].lastElementChild.className = "show";
} else {
label[2].lastElementChild.className = "hide";
}
doYouHaveClassShow(label);
});
}
</script>
//外部js
function getLiveDay(form) {
function FormatDate(date) {
if (date < 0) {
return "NULL";
}
if (date < 10)
date = "0" + date;
return date;
}
console.log("Hello World");
//获取出生日期年月日
let year = form.birthYear.value;
let month = form.birthMonth.value;
let day = form.birthDay.value;
//创建出生日期的Date对象
let birthDate = new Date(year + "-" + month + "-" + day);
//创建当前日期的Date对象
let nowDate = new Date();
//获取已存在时间的秒数
let life = (nowDate - birthDate) / 1000;
if (life < 0) {
form.answer.value = "Are you kidding ?"
return;
}
//获取已存在日期的年月日时分秒
//86400一天的秒数
//3600一小时的秒数
//60一分钟的秒数
let liveYear = Math.floor(life / 86400 / 360);
//除去年的秒数
life = life - liveYear * 365 * 86400;
let liveMonth = Math.floor(life / 86400 / 30);
//除去月的秒数
life = life - liveMonth * 30 * 86400;
let liveDay = Math.floor(life / 86400);
//除去天的秒数
life = life - liveDay * 86400;
let liveHours = Math.floor(life / 3600);
//除去时的秒数
life = life - liveHours * 3600;
let liveMinutes = Math.floor(life / 60);
//除去分的秒数
life = life - liveMinutes * 60;
let liveSeconds = Math.floor(life);
form.answer.value = FormatDate(liveYear) + "年" + FormatDate(liveMonth) + "月" + FormatDate(liveDay) + "日" +
FormatDate(liveHours) + "时" + FormatDate(liveMinutes) + "分" + FormatDate(liveSeconds) + "秒";
}
function doYouHaveClassShow(label) {
for (const ak of label) {
if (ak.lastElementChild.className === "show") {
myForm.to.disabled = true;
return;
}
}
myForm.to.disabled = false;
}
function getHowMonth(year, month) {
console.log(year, month)
switch (Number(month)) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
return 31;
case 2:
if (year % 400 === 0 || year % 4 === 0 && year % 100 !== 0) {
return 29;
} else {
return 28;
}
case 4:
case 6:
case 9:
case 11:
return 30;
default:
return 0;
}
}