微语：代码适合中午敲，早晚出BUG
求数组中最大值 JavaScript
方法一：
arr = [1, 3, 5, 79, 11];
let max = arr[0];
arr.forEach(function(v, i) {
if (v > max) {
max = v;
}
})
console.log("最大值：", max)方法二：
arr = [1, 3, 5, 79, 11]
let max = arr[0];
for (let i = 0; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i]
}
}
console.log("最大值", max)商品计算 JavaScript
张大头开了一个超市，平时所有商品在进货价的基础上，提价40%销售，到国庆节这天要做全场活动，在平时售价的基础上全场打8折。
请编写函数计算所有商品的打折价。
如：洗衣粉进货价 3.7元，法式小面包进货价6.2元，苹果进货价 2.66元。（考点：函数定义、函数调用、参数传递、返回值）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function money(name, a) {
let result = [a + (a * 0.4)] * 0.8
console.log(`[${name}]价格：${result}元`);
return result;
}
money("洗衣服", 3.7);
money("法式小面包", 6.2);
money("苹果", 2.66);
</script>
</body>
</html>
函数封装计算商品价格 JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 场景：编写一个函数返回商品总价。情况一：小红购买了5双袜子，每双1.8元，运费3元，她有张2元的优惠卷。
情况二：小刘购买了3盒牙膏，每盒25元，商家包邮，没有优惠卷。（考点：函数的定义、函数调用、参数默认值、编程思维） -->
<script>
function CalTotal(name, num, price, reight = 0, coupon = 0) {
/*name=商品名称
num=商品数量
prince=商品价格
reight=运费
coupon=优惠券*/
let result = num * price + reight - coupon
return `${name}商品价格：${result}元`;
}
console.log(CalTotal("袜子", 5, 1.8, 3, 2));
console.log(CalTotal("牙膏", 3, 25));
</script>
</body>
</html>
JS三目运算比大小 JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function getThreeMax(x, y, z) {
return x > y ? (x > z ? x : z) : (y > z ? y : z);
}
max = getThreeMax(8, 0, 1)
console.log("最大值:", max);
</script>
</body>
</html>
计算2数累计之和 JavaScript
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
margin: 0 auto;
height: 73px;
width: 660px;
background-color: seagreen;
text-align: center;
}
input {
outline: none;
height: 50px;
margin-top: 11px;
border: 0;
vertical-align: bottom;
}
button {
height: 52px;
width: 100px;
border: 0;
}
</style>
</head>
<body>
<!-- 输入两个数，计算2个数之间的整数之和 -->
<p>
<input type="text" name="" id="a" placeholder="请输入起始值">
~
<input type="text" name="" id="b" placeholder="请输入目标值">
<button onclick="js()">计算</button>
<input type="text" name="" id="c">
</p>
<script>
function js() {
let A = parseInt(a.value);
let B = parseInt(b.value);
let sum = 0;
if (A < B) {
for ( ; A <= B; A++) {
sum = sum + A;
document.getElementById("c").value = sum;
}
} else {
document.getElementById("c").value = "参数错误";
}
}
</script>
</body>
</html>
数值判断 JavaScript
根据工资判断选择出行工具
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
margin: 20px auto;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
width: 400px;
height: 200px;
background-color: #00aa7f;
padding-top: 20px;
box-shadow: -2px 7px 12px #000000;
}
input {
border: 0;
margin: 5px;
height: 30px;
line-height: 30px;
padding: 0 15px;
box-shadow: inset -2px 3px 6px #000000;
outline: none;
}
p {
color: #fff;
margin: 5px;
}
button {
box-shadow: -2px 2px 2px #000000;
vertical-align: middle;
height: 30px;
border: 0;
width: 80px;
}
button:hover {
color: #55aaff;
}
button:active {
box-shadow: inset -2px 2px 2px #000000;
}
</style>
</head>
<body>
<!-- 4. 编程题：根据存款的多少决定使用什么交通工具：10万元以上，就买小汽车上班; 有5000元以上，就买摩托上班；
如果有300元以上，就买自行车上班；如果有20元以上，
就坐公交上班；否则，就只好步行上班。使用一个变量money保存存款数，
对该变量进行判断以输出所用的交通工具。（考点：if多分支结构） -->
<div class="box">
<h1 style="text-align: center;">收入查询</h1>
<p>您的工资：<input type="text" name="" id="s" placeholder="请输入你的工资"> <button onclick="cx()">查询</button></p>
<p>出行推荐：<input type="text" id="j"></p>
</div>
<script>
function cx() {
//console.log("测试按钮是否关联成功！")
let a = s.value;
if (a == "" || isNaN(a) == true) {
alert("请输入您的工资")
s.value = null;
} else if (a > 100000) {
document.getElementById("j").value = "小汽车";
console.log(j.value)
} else if (a > 5000) {
document.getElementById("j").value = "摩托";
console.log(j.value)
} else if (a > 300) {
document.getElementById("j").value = "自行车";
console.log(j.value)
console.log("自行车")
} else if (a > 20) {
document.getElementById("j").value = "公交车";
console.log(j.value)
} else {
document.getElementById("j").value = "走路";
console.log(j.value)
}
}
</script>
</body>
</html>
性别判断 JavaScript
代码
<!-- 2. 编程题：定义变量gender保存性别，再使用if语句进行判断。如果是男，
在网页中输出“先生你好”，如果是女，在网页中输出“小姐你好”。（考点：if分支语句） -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.name{
box-shadow: 0px 1px 4px #000000;
border-radius: 15px;
text-align: center;
font-size: 20px;
width: 300px;
margin: 20px auto;
background-color: #55aaff;
}
input{
margin-top: 15px;
width: 210px;
height: 30px;
background-color: #ffffff;
border: 0;
box-sizing: border-box;
padding: 0 15px;
box-shadow: inset 0px 1px 4px #000000;
outline-color: #ffffff;
}
button{
font-size: 20px;
width: 150px;
height: 40px;
border: 0;
background-color: #ffffff;
margin-bottom: 15px;
box-shadow: 0px 1px 4px #000000;
outline-color: #ffffff;
}
button:hover{
box-shadow: inset 0px 1px 4px #ffffff;
}
button:active{
box-shadow: inset 0px 1px 4px #000000;
}
span{
text-align: center;
margin: 0 auto;
width: 150px;
height: 30px;
line-height: 30px;
line: height;: 30px;
background-color:#fff;
display: block;
box-shadow: inset 0px 1px 4px #000000;
}
</style>
</head>
<body>
<div class="name">
<p style="color: #fff; font-weight: bold;">性别：<input type="text" id="gender" placeholder="请输入性别" ></p>
<p><span id="name" ></span></p>
<p><button onclick="log()">注册</button></p>
</div>
<script>
function log(){
//console.log("绑定按钮测试")
if (gender.value === "男"){
document.getElementById("name").innerHTML = "先生您好";
console.log("先生您好")
}
else if(gender.value === "女"){
document.getElementById("name").innerHTML = "女士您好";
console.log("女士您好")
}
else{
alert("请输入性别");
gender.value=""
}
}
/*let man = "先生您好";
let lady = "女士您好";
let gender ="男"
if (gender === "男"){
document.write(man)
}
else if(gender === "女"){
document.write(lady)
}*/
</script>
</body>
</html>++i 和i++区别 JavaScript
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 16px;
font-weight: bold;
}
.box {
color: #fff;
border-radius: 8px;
width: 500px;
height: 240px;
background-color: seagreen;
margin: 20px auto;
box-shadow: inset -2px 7px 22px #000000;
}
input {
text-align: center;
padding: 0 15px;
outline-color: #55aaff;
border: 0;
height: 30px;
box-shadow: 4px 4px 3px #000000;
}
#sum1,
#sum2 {
width: 150px;
}
p {
margin: 20px;
}
#s {
border: 0;
padding: 0 10%;
width: 150px;
height: 30px;
}
#j {
color: #fff;
width: 150px;
line-height: 30px;
}
button {
width: 150px;
height: 30px;
border: 0;
box-shadow: 0px 1px 4px #000000;
}
#xs {
line-height: 30px;
color: #aa0000;
width: 150px;
background-color: #fff;
}
</style>
</head>
<body>
<!-- 3. 编程题: 运算完成后计算出a b c d的值（自己写出答案后再打印运算结果，互相验证）（考点：运算符 ++ --）
let a = 5, b = 7;
let c = b++ - --a;
let d = ++a + b--; -->
<div class="box">
<p style="padding-top: 50px; ">
数值：<input type="text" id="sum1" placeholder="请输入数值1">
数值：<input type="text" id="sum2" placeholder="请输入数值2">
</p>
<p>
过程：<input type="text" id="j" disabled>
运算：<select id="s">
<option>+</option>
<option>-</option>
</select>
</p>
<p>
运行：<button onclick="js()">点击计算</button>
结果：<input type="text" id="xs" disabled>
</p>
</div>
<script>
function js() {
let S = s.value; //定义选择框变量
let Sum = 0; //定义存储计算结果变量
let Sum1 = Number(sum1.value); //输入框1
let Sum2 = Number(sum2.value); //输入框2
if (isNaN(Sum1) == true || isNaN(Sum2) == true) { //判断参数是否为数字
sum1.value = null;
sum2.value = null;
document.getElementById("xs").value = "参数错误"
}
else if (S == "+" && Sum1 != " " && Sum2 != " ") { //判断运算符
Sum = ++Sum1 + Sum2--;
xs.value = Sum; //把运算结果赋值给显示框
document.getElementById("j").value = "++" + sum1.value + " " + "+" + " " + sum2.value + "- -";
}
else if (S == "-" && Sum1 != " " && Sum2 != " ") {
Sum = ++Sum1 - Sum2--;
xs.value = Sum;
document.getElementById("j").value = "++" + sum1.value + " " + "-" + " " + "- -"+sum2.value;
} else {
sum1.value = null;
sum2.value = null;
document.getElementById("xs").value = "参数错误"
}
}
</script>
</body>
</html>
I am 小诸葛
是一名前端工程师，独立开发者、博主
-
11 2023-09-02 14:11
11年后
-
rantrism 2023-04-10 10:44
您好～我是腾讯云开发者社区运营，关注了您...
-
小诸葛 2023-03-06 15:07
来自【Hello word】
-
snow 2023-03-02 14:05
stay hungry stay foo...
