js有趣小案例
张敬坤
小小前端一枚
展开
-
JS原生复制功能
js原生复制功能原创 2022-11-18 11:47:28 · 360 阅读 · 0 评论 -
递增递减小案例-星星
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-08-03 13:36:52 · 279 阅读 · 0 评论 -
do-while循环-小案例- 求1-100之间的和
// ------- 求1-100之间的和 ----------- let sum = 0 let i = 0 // 反正是先循环一次,到时候i=0+1,在进行循环 do { sum += i i++ } while (i <= 100) console.log(sum);...原创 2021-08-03 13:36:24 · 2785 阅读 · 0 评论 -
do-whlie循环-求1-100之间的偶数的和
// ------- 求1-100之间的偶数的和 ----------- let sum5 = 0 let a = 1 do { if (a % 2 == 0) { sum5 += a } a++ } while (a <= 100) console.log(sum5);...原创 2021-08-03 13:35:59 · 1150 阅读 · 0 评论 -
for循环输出1-100之间能被3整除的数的和
//---------------for循环输出1-100之间能被3整除的数的和---------- let num2 = 0 for (let h = 1; h <= 100; h++) { if(h%3==0){ num2 += h } } console.log(num2);原创 2021-08-03 13:35:37 · 12535 阅读 · 0 评论 -
for循环-求出1-100之间所有偶是数和奇数的和
//---------------求出1-100之间所有偶是数和奇数的和---------- let even = 0 let odd = 0 for (let c = 1; c <= 100; c++) { if (c % 2 === 0) { even += c } else { odd += c } .原创 2021-08-03 13:35:18 · 1690 阅读 · 0 评论 -
for循环-一天记录五个单词,记录三天
// ------- 一天记录五个单词,记录三天------------- for(let a =1;a<=3;a++){ // 外部循环控制里边循环的次数,直到不满足 document.write(`第${a}天<br>`) for(let b =1; b<=5;b++){ document.write(`记住了${b}个单词<b...原创 2021-08-03 13:34:51 · 344 阅读 · 0 评论 -
自增自减-举个栗子
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-08-03 13:34:26 · 61 阅读 · 0 评论 -
无脑登录--案例
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-08-03 13:34:01 · 103 阅读 · 0 评论 -
案例-Math方法-房贷每月还款
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-08-03 13:33:37 · 85 阅读 · 0 评论 -
Math方法--求房贷(小年轻的奋斗之力)
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-07-11 15:37:22 · 68 阅读 · 0 评论 -
案例 -- 设计一个简单的倒计时
如果你看到这是分享时间晚了,倒计时出现了负数,请修改我设置的未来时间戳即可!<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,原创 2021-07-11 15:35:37 · 290 阅读 · 0 评论 -
案例-随机更换背景图片
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-07-11 15:34:32 · 159 阅读 · 0 评论 -
案例 -- 用户注册倒计时
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <te..原创 2021-07-11 15:33:57 · 707 阅读 · 0 评论 -
案例-跳动倒计时!
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g.原创 2021-07-11 15:32:15 · 147 阅读 · 0 评论 -
案例-今时今日(动态)
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g.原创 2021-07-11 15:26:45 · 109 阅读 · 0 评论 -
案例--消除图片
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g.原创 2021-07-11 15:25:29 · 135 阅读 · 0 评论 -
案例--点击倒计时用户注册
点击后倒计时结束<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> b.原创 2021-07-11 15:24:42 · 151 阅读 · 0 评论 -
案例 -- 点击修改按钮样式
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&..原创 2021-07-11 15:23:51 · 334 阅读 · 0 评论 -
案例--好看的无脑验证
输入正确口令错误css样式/* 清除浏览器默认边距,使边框和内边距的值包含在元素的width和height内 */* { margin: 0; padding: 0; box-sizing: border-box;}/* 使用flex布局,让内容垂直和水平居中 */section { /* 相对定位 */ position: relative; overflow: hidden; display: flex; justify-content: ce.原创 2021-06-20 00:15:54 · 348 阅读 · 2 评论 -
案例 -- 好看的真正的随机点名!(样式我随便写了写)
点击开始点击结束一人只会出现一次!代码演示!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style.原创 2021-06-20 00:15:16 · 419 阅读 · 2 评论 -
案例 --切换tab栏1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>..原创 2021-06-20 00:14:40 · 89 阅读 · 0 评论 -
案例 --开关灯
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&..原创 2021-06-20 00:14:22 · 539 阅读 · 0 评论 -
案例--JS(原生)渲染表格实现增删改查
点击提交点击删除<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body.原创 2021-06-20 00:13:54 · 847 阅读 · 0 评论 -
案例--根据父子查找,实现案例
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { .原创 2021-06-20 00:13:29 · 116 阅读 · 0 评论 -
九九乘法表案例
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-06-20 00:12:59 · 104 阅读 · 0 评论 -
案例--京东电梯导航
点击哪个,定位到哪个位置上<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-06-15 16:58:14 · 538 阅读 · 0 评论 -
循环案例-用户输入爱,退出,否则无限循环
话不多说,上代码! // ---------用户输入爱,退出,否则无限循环------------- let love = prompt('你爱我吗') while (love !== '爱') { // 如果不是爱,循环就是true,一直循环循环体 love = prompt('你爱我吗') // 变量已经生命过了,所以不用再次声明,直接使用 }...原创 2021-08-03 13:33:15 · 202 阅读 · 0 评论 -
循环案例-求1-100偶数和
话不多说,上代码 // ---------求1-100的偶数和--------- let num = 1 let sum2 = 0 while (num <= 100) { // 需要用到if if (num % 2 === 0) { // 当数为偶数的时候,进入到运算之中 sum2 += num } num++原创 2021-06-13 17:40:11 · 769 阅读 · 0 评论 -
循环案例-用户输入-求两值的和
话不多少,上代码! // ---------用户输入两个数,求两个数的累加和--------- let z = +prompt('输入两个数.求区间的累加和,请输入第一个数') let x = +prompt('输入两个数.求区间的累加和,请输入第二个数') let sum1 = 0 while (z <= x) { sum1 += z z++ }...原创 2021-06-13 17:39:13 · 147 阅读 · 0 评论 -
循环案例-打印1-100的和
话不多说上代码: // ---------控制台打印1-100的和--------- let b = 1 // 因为是求1-100的和,所以初始值为1 let sum = 0 // 建立一个求和的辅助变量 while (b <= 100) { // 设置循环条件为100次原创 2021-06-13 17:37:46 · 676 阅读 · 0 评论 -
循环-控制台打印1-100
话不多说,上代码 // ---------控制台打印1-100--------- let a = 0 while (a <= 100) { console.log(`${a}`); a++ }原创 2021-06-13 17:36:27 · 424 阅读 · 0 评论 -
循环案例--打印十句我是帅哥!
话不多说上代码: // --------- 打印十句我是帅哥 --------- let i = 10 while (i <= 10) { document.write(`我是帅哥<br>`) i++ }原创 2021-06-13 17:33:02 · 137 阅读 · 0 评论 -
js数字类型转换小案例-求:用户五年后的年龄为多少?
要求:用户输入姓名性别以及年龄求:用户五年后的年龄为多少?<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-原创 2021-05-10 23:24:02 · 204 阅读 · 0 评论 -
js基础-用户输入车子的时速以及行驶的时间求总距离
要求:让用户输入车子的时速以及行驶的时间求:一共行驶了多长时间<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial原创 2021-05-10 23:21:32 · 308 阅读 · 0 评论 -
利用js的运算符做一个简易的计算器
直接上代码!<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2021-05-10 23:19:01 · 169 阅读 · 0 评论 -
js基础-理解函数的重复使用
直接上代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-05-10 23:17:11 · 254 阅读 · 0 评论 -
js运用return返回值进行求银行卡余额
让用户输入银行卡余额 水费 网费求银行卡余额在页面上输出,并将返回的值在控制台打印出来<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic原创 2021-05-10 23:14:58 · 285 阅读 · 0 评论 -
js-基础-案例-银行卡余额求解
项目场景:在使用javascript进行简单的运算逻辑问题描述:用户输入银行卡总数/消耗的水费/消耗的电费/消耗的网费/消耗的生活费要求:求出最后银行卡号的余额是多少?(用表格完成)答案如下:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge原创 2021-05-09 23:44:38 · 510 阅读 · 0 评论