JavaScript练习与提升

已于 2022-09-28 13:48:55 修改
阅读量341 收藏 3
点赞数
文章标签： javascript servlet 前端
于 2022-09-17 15:29:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ifeng_iPhone/article/details/126905846
版权

概要：

JavaScript 是⼀种 基于对象的、事件驱动型的、解释型的脚本语⾔，JS设计的⽬的是实现⽹⻚的交互能⼒

•        基于对象：（区别于⾯向对象），JavaScript和Java语⾔⼀样可以通过对象调⽤⽅法 obj.fn()

•        事件驱动：⽹⻚⽂档中的HTML标签事件触发JavaScript代码执⾏

•        解释型：边解释边执⾏（不会先对⽹⻚进⾏编译⽣成中间⽂件）

•        脚本语⾔：JavaScript不会独⽴运⾏，依赖于⽹⻚⽂件（HTML⽂档）存在 （通俗的理解为js要写在⽹⻚中）

1、基础操作以及身份证校验

1.1 基础操作：

        （1）求和差积商

        （2）输入日期，计算是某年的的第几天

        （3）99乘法表

        （4）正则表达式

        （5）流的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/test.js"></script>
  <script>
    window.onload=function (){ console.log("loading...")}
    window.onscroll=function (){console.log("scrolling...")}
    window.onresize=function (){console.log("resizing...")}
  </script>
</head>
<body>
<form>
  <input type="button" value="clickMe1" onclick="test01();"></input>
  <input type="button" value="clickMe2" onclick="test02();"></input>
  <input type="button" value="clickMe3" onclick="test03();"></input>
  <input id="666" type="button" value="clickMe4"></input>
  <input id="888" type="button" value="校验"></input>
  <input type="button" value="开启延时" onclick="delayTask();"></input>
  <input type="button" value="开启循环" onclick="loopTask();"></input>
  <input type="button" value="关闭循环" onclick="closeLoopTask();"></input>
</form>
<from action="" onsubmit="return validate()"><label>表单2</label>
  输入身份证：<input type="text" id="myId">
  备注信息：<textarea  id="note" cols="15" rows="1.5"></textarea>
<input type="button" value="使用document获取元素" onclick="testDocument();"></input>
  <input type="submit/">
</from>
</body>
  <script>
    document.getElementById("888").onclick=function validate(){
      let myId = document.getElementById("myId").value;
      let regId=new RegExp("[0-9]{17}[0-9,X]");
      let result = regId.test(myId);
      if(!result){
        alert("身份证格式错误")
        return false;
      }
​
      let note =document.getElementById("note").value;
      if(note==null || note==""){
        alert("备注有误")
        return false;
      }
      return alert("校验成功");
    }
​
    document.getElementById("666").onclick= function (){
      alert("666666！")
      console.log("666")
    }
  </script>
</html>

//求和差积商
function test01(a,b){
  console.log(a+"和"+b+"的差为"+(a-b));
  console.log(a+"和"+b+"的积为"+(a*b));
  console.log(a+"和"+b+"的商为"+(a/b));
}
​
//计算输入的哪年的第几天
function test02(y,m,d){
  var sum = 0;//记录总天数
  switch (m-1){//由月份计算，利用case穿透的特点
    case 11:sum += 30;
    case 10:sum += 31;
    case 9:sum += 30;
    case 8:sum += 31;
    case 7:sum += 31;
    case 6:sum += 30;
    case 5:sum += 31;
    case 4:sum += 30;
    case 3:sum += 31;
    case 2:sum += 28;
    case 1:sum += 31;
    case 0:sum += d;
  }
  if(m > 2) {
    if (y % 400 == 0 || y % 4 == 0 && y % 100 != 0) {
      sum++;
    }
    console.log("这是"+y+"年的第"+sum+"天")
  }
  }
​
​

​//99乘法表
function test03(){
  document.write("<table>");
  for (var i = 1; i < 10; i++) {
    document.write("<tr>");
    for (var j = 1; j <= i; j++) {
      document.write("<td style='border: 3px solid brown;'>");//设置元素边框border，颜色是brown
      document.write(j + " * " + i + " = " + i * j + " ");
      document.write("</td>");
    }
    document.write("<br>");
    document.write("</tr>");
  }
  document.write("</table>");
}
​
//switch 的使用
function myObj() {
  var people = {
    id: "10086",
    name: "Yaof",
    sport: function () {
      switch (num) {
        case 1:
          console.log("我在打篮球");
          break;
        case 2:
          console.log("我在踢足球");
          break;
        default:
          return 0;
      }
      return this.sport();
    }
​
  };
}

//使用正则表达式进行身份验证
function test04(){
  var regExp = new RegExp("^//d{6}[1900-2022][01-12][01-31][000-999][0-9x-z]$");
  var inPut = parseInt(prompt("请输入身份证证号："));
  var id = inPut;
  var flag = regExp.test(id);
  if(flag==ture){
    prompt("身份证正确！");
}else {
    prompt("身份证格式错误！");
  }
}
​
//window交互及流的使用
var i=0;
var task;
function delayTask(){
  window.setTimeout("action()",1000)
}
function action(){
  console.log(i++);
  if(i==500){
    window.clearInterval(task);
  }
}
function loopTask(){
  task = window.setInterval("action()",10);
}
function closeLoopTask(){
  window.clearInterval(task);
}
function testDocument(){
  document.write("hello!"+"<br>");
  document.write("hello!");
  document.close();
}
​
/*let imgTag = document.createElement("img");
let srcAttr = document.createAttribute("src"); // src=""
srcAttr.nodeValue = "../img/0.jpg"; // src="../img/0.jpg"
//3.将属性节点添加到标签节点中
imgTag.setAttributeNode(srcAttr);*/

2、省市选择栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>地址选择</title>
</head>
<body onload="initProvince();initCity();">
<form>
  <label>省份</label>
  <select id="province" onchange="showCity();"></select>
  <label>城市</label><select id="city" onchange="showCountry()"></select>
<!--  <label>区县</label><select id="country"></select>-->
</form>
<script src="../js/test03.js"></script>
</body>
</html>

let province = ["北京","上海","安徽","浙江"]
let city = [["北京"],["上海"],["合肥","滁州","宿州","蚌埠"],["杭州","湖州","宁波"]]
// let country = [[["北京一区"],["北京二区"],["北京三区"]],[["上海一区"],["上海二区"],["上海三区"]],[["蜀山区","瑶海区","包河区"],["琅琊区","明光市"],["埇桥区"]],[["西湖区","余杭区"]]]
function showCity(){
  let p = document.getElementById("province")
  p.selectedIndex;
  let result=city[p.selectedIndex]
  let c = document.getElementById("city")
​
  c.options.length=0;
  for (let i = 0; i < result.length; i++) {
    let option = document.createElement("option")
    option.value = result[i];
    option.text = result[i];
    c.appendChild(option);
  }
​
​
  // document.getElementById("city").selectedIndex = p.selectedIndex
}
/*function showCountry() {
  let p = document.getElementById("city")
  p.selectedIndex;
  let result = country[p.selectedIndex]
  let cty = document.getElementById("country")
​
  cty.options.length = 0;
  for (let i = 0; i < result.length; i++) {
    let option = document.createElement("option")
    option.value = result[i];
    option.text = result[i];
    c.appendChild(option);
  }
}*/
​
function initProvince(){
  //省下拉
  let p = document.getElementById("province")
  //下拉项
  for (let i = 0; i <province.length ; i++) {
    let option = document.createElement("option")
    option.value=i
    option.text=province[i]
    //添加到省的下拉列表中
    p.appendChild(option)
  }
​
}
function initCity(){
  //市下拉
  let p = document.getElementById("city")
​
  //下拉项
  for (let i = 0; i <city.length ; i++) {
    let option = document.createElement("option")
    option.value=i
    option.text=city[i]
    //添加到省的下拉列表中
    p.appendChild(option)
  }
}
​
/*
function initCountry(){
  //区下拉
  let p = document.getElementById("country")
​
  //下拉项
  for (let i = 0; i <country.length ; i++) {
    let option = document.createElement("option")
    option.value=i
    option.text=country[i]
    //添加到市的下拉列表中
    p.appendChild(option)
  }
}
*/

3、用户注册校验

包括用户名、密码、确认密码、手机号码、邮箱

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <link href="DataValidation.css" rel="stylesheet">
  <script src="../js/DataValidation.js"></script>
</head>
<body>
<!-- fieldset新增边框 -->
<fieldset>
<h1>用户注册-数据校验</h1>
<form>
  <hr>
  <div>
    <label>
      <input id="userName" type="text"  placeholder="用户名" ></input>
    </label>
  </div>
  <div>
    <label>
      <input id="password1" type="password"  placeholder="密码"></input>
    </label>
  </div>
  <div>
    <label>
      <input id="password2" type="password"  placeholder="确认密码"></input>
    </label>
  </div>
  <div>
    <label>
      <input id="tel" type="tel"   placeholder="手机号码"></input>
    </label>
  </div>
  <div>
    <label>
      <input id="email" type="email" placeholder="邮箱"></input>
    </label>
  </div>
  <div>
    <button onclick="validation()">提交</button>
  </div>
</form>
</fieldset>
</body>
</html>

body{
  text-align: center;!important;
  margin: 0;
}
​
input{
  border: 0;
  background: #cccccc;
  border-radius: 20px;
  margin-top:10px;
  height: 40px;
  width: 200px;
  padding: 0 20px 0 20px;
  font-size: 16px;
​
}
input:focus{
  /*轮廓为0*/
  outline: 0;
}
​
​
button{
  border: 0;
  background: #4d8bd5;
  border-radius: 20px;
  margin-top:20px;
  height: 40px;
  width: 200px;
  padding: 0 20px 0 20px;
  font-size: 16px;
  color: white;
  box-shadow: 2px 2px 2px #7575ef;
}
button:focus{
  outline:0;
  background: #0248fc;
}
button:hover{
  color: #505f85;
}
fieldset{
  height: 500px;
  /*设置文字居中*/
  margin:auto;
  color: #202123;
}
​
.illegal-input{
  border: red 1px solid !important;
  box-shadow: 0 0 5px red;
}
function validation() {
  //账号校验
  let userName = document.getElementById("userName").value;
  let um = new RegExp("[0-9a-zA-z]{8,20}$");
  if (!um.test(userName)) {
     alert("账号格式出错")
    return;
  }
​
  //密码校验
  let pwd1 = document.getElementById("password1").value;
  let pwd2 = document.getElementById("password2").value;
  let pd = new RegExp("^[0-9a-zA-z]{8,16}$");
  if (!pd.test(pwd1)) {
    alert("密码格式出错")
    return;
  }else if (!(pwd1 == pwd2)) {
    alert("密码不一致")
    return;
  }
​
  //手机号校验
  let tel = document.getElementById("tel").value;
  let tl = new RegExp("^1[3456789][0-9]{9}$");
  if (!tl.test(tel)) {
    alert("手机号码格式出错")
    return;
  }
​
  //邮箱校验
  let email = document.getElementById("email").value;
  let em = new RegExp("^[0-9a-zA-z]+@[0-9a-zA-z]+.[0-9a-zA-z]+$");
  if (!em.test(email)) {
    alert("邮箱格式出错")
    return;
  }
  alert("校验成功，数据正确！")
  return;
}

4、计算器的实现：

4.1 初步架构图：

4.2 具体实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算器</title>
  <link rel="stylesheet" href="myCalculator.css">
</head>
<body>
<fieldset style="width:300px;height: 500px;background:linear-gradient(to right, #e9eacd, #e89dae);margin: auto">
  <h1 style="padding: 0 100px 0 110px">计算器</h1>
  <div>
    <input  id="result" readonly="readonly" placeholder="0">
  </div>
  <div style="margin-left: 10px">
  <button onclick="clearValue()" class="span-two" value="AC" style="width: 145px">AC</button>
  <button onclick="get(this.value)" class="symbol" id="%" value="%">%</button>
  <button onclick="get(this.value)" class="symbol" id="/" value="/">/</button><br>
  <button onclick="get(this.value)" class="number" id="7" value="7">7</button>
  <button onclick="get(this.value)" class="number" id="8" value="8">8</button>
  <button onclick="get(this.value)" class="number" id="9" value="9">9</button>
  <button onclick="get(this.value)" class="symbol" id="×" value="*">×</button><br>
  <button onclick="get(this.value)" class="number" id="4" value="4">4</button>
  <button onclick="get(this.value)" class="number" id="5" value="5">5</button>
  <button onclick="get(this.value)" class="number" id="6" value="6">6</button>
  <button onclick="get(this.value)" class="symbol" id="-" value="-">-</button><br>
  <button onclick="get(this.value)" class="number" id="1" value="1">1</button>
  <button onclick="get(this.value)" class="number" id="2" value="2">2</button>
  <button onclick="get(this.value)" class="number" id="3" value="3">3</button>
  <button onclick="get(this.value)" class="symbol" id="+" value="+">+</button><br>
  <button onclick="get(this.value)" class="number" id="0" value="0">0</button>
  <button onclick="get(this.value)" class="symbol" id="." value=".">.</button>
  <button onclick="calculate()" class="calculate" id="=" value="=" style="width: 145px">=</button>
  </div>
  </fieldset>
<script src="../js/myCalculator.js"></script>
</body>
</html>
button{
  margin-top:10px;
  width: 70px;
  height: 50px;
  background: #e7d6ad;
}
​
button:focus{
  outline:0;
  background: #f3c86d;
}
button:hover{
  background: #e5e5c9;
}
​
input{
  width: 200px;
  height: 50px;
  margin: 0 50px 20px 55px;
  background: #f6f6e5;
  text-align: center;
  font: bold 20px Arial;
}
​
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to right, #CBCE91FF, #EA738DFF);
}
.calculator-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}
​
.calculator-grid > button {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid #FFFFFF;
  outline: none;
  background-color: rgba(255, 255, 255, 0.75);
}
​
.calculator-grid > button:hover {
  background-color: #a9a9a9;
}
/*.span-two {
  grid-column: span 2;
  color: #adf802;
  background-color: rgba(139, 0, 139, 0.8);
}*/
function clearValue(){
  document.getElementById("result").value="";
}
function get(value){
  document.getElementById("result").value+=value;
}
function calculate(){
  let result=0;
  result=document.getElementById("result").value;
  document.getElementById("result").value=result+"="+eval(result);
};

Ifeng_iPhone
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript练习题
zxf318的博客
08-10 1468
JavaScript练习题，选择，编程，问答
javascript 作用域、变量提升练习题
黑夜人的博客
01-19 1682
 今天我们来做下作用域和变量提升的面试题； 答案我会写在最下面，大家先开始自己尝试下 //第1题 console.log(a); var a=12; function fn(){ console.log(a); var a=13; } fn(); console.log(a); //第2题 console.log(a); v...
Javascript知识【validation插件重写表单注册校验】
若有所执，必有所成，心之所向，必显光芒
08-13 582
用validation插件进行表单校验
JavaScript-闭包练习
weixin_62467970的博客
06-24 397
（1）因为var声明的i是全局变量，且由于变量提升机制，var的变量i唯一，且var声明的i的自增只会执行一次（JS引擎统计好自增的总次数并加到i上），由于在全局执行上下文中不存在闭包，全局环境下的变量或函数都能访问到，倒计时2秒后超时计时器被首次调用时里面的函数被放置在队列中并被事件循环拾取放置在堆栈中，所以等到超时计时器内函数执行时访问到的i值是5，而learners[5]根本不存在，所以最后超时计时器内的函数被浏览器执行了5次且结果都是undefined。下面是视频给出的代码和代码执行时的效果。
JavaScript练习笔记
小猴子的博客
06-27 1330
JavaScript练习笔记 1、分析下段代码输入出结果是(B) var a,b,c; 隐式类型转换 a=”2”; b=2; c=a+b; console.log©; A.4 B.22 C.20 D.2 自动类型 String() Number() 1. 字符串相加 转成字符串 再拼接 2. 四则运算 1+b 都是字值 直接计算 3+字符串 3. ！运算 自动转换成布尔值 字符串 数值 true 2、分析下段 代码输入出结果是(B) var x,y; x=10; y=x++; conso
JavaScript变量提升详解
程麒阁的博客
08-16 850
变量提升 在js中我们用var声明的变量是存在变量提升的。换句话说，我们js的解释器在解释js代码的时候，会优先把所有的变量声明提到前面。 示例代码 var的变量提升 下面我演示的就是一个简单的变量提升的问题。 js源代码 console.log(a) var a=1 console.log(a) js解释器编译的顺序： //js编译时会把所有的变量声明提前 var a; console.log(a)//显示undefiend，因为此时a没有赋值不知道数据类型 a=1//赋值操作不提前，只是var a的声
JavaScript专项练习（二）
kiku
10-10 2832
1、以下代码执行后，控制台的输出是： var a = 10; function a(){} console.log(typeof a) 答案："number"，解析： 函数提升优先级高于变量提升，所以代码等价于 function a(){} var a； a = 10; console.log(typeof a) 那如果这里使用关键词let呢，代码变为 let a = 10 function a () {} console.log(typeof a) 这里明显会报错。前面提到，函数声明会优先于变量声明
JavaScript 专项练习（三）
kiku
10-11 1836
1、写出程序运行的结果（） var k = 0; for(var i=0,j=0;i<10,j<6;i++,j++){ k += i + j; } console.log(k) 答案：30，解析： 考察知识点：逗号表达式只有最后一项是有效的，即对于i<10,j<6; 来说，判断循环是否结束的是j < 6；而对于 j<6,i<10; 来说，判断循环是否结束的是 i < 10。 k = 0+0=0 1+1+0=2 2+2+2=6 3+3+6=12 4+4
JavaScript练习JavaScript练习JavaScript练习
04-21
JavaScript练习涵盖以下几个关键知识点： 1. **基础语法**：包括变量声明（var、let、const）、数据类型（如字符串、数字、布尔、null、undefined、对象、数组、Symbol、BigInt等）、运算符（算术、比较、逻辑、位...
JavaScript的挑战与练习
03-03
文件名"JavaScript-ChallengesAndExercises-master"可能是一个包含一系列JavaScript练习的项目库，通常这样的资源会分为不同的难度等级，从基础到进阶，逐步提升开发者的能力。在这个目录下，你可能会找到以下内容：...
JavaScript练习
02-24
JavaScript练习可以帮助开发者熟练掌握这门语言，提升编程技能。在这个名为"JavaScriptExrecises-main"的压缩包文件中，很可能包含了一系列的JavaScript练习题，旨在帮助学习者深入理解和运用JavaScript的各种特性。...
javascript练习
02-07
在“javascript练习”这个主题中，我们将会深入探讨JavaScript的基础知识、核心概念以及实际应用。 首先，我们要了解JavaScript的基础语法，包括变量声明（`var`, `let`, `const`）、数据类型（如字符串、数字、...
浅谈JavaScript 声明提升
10-14
JavaScript中的声明提升（Hoisting）是一个关键的概念，它涉及到代码执行前JavaScript引擎如何处理变量和函数的声明。声明提升是指JavaScript会将`var`变量声明和函数声明移动到它们所在的作用域顶部，无论这些声明...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 239
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
VUE中的重点*
最新发布
qq_61132537的博客
07-22 381
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
jquery-选择器常见用法
随笔
07-18 201
jquery-选择器，对象下有多个子元素时如何选择
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 927
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
JavaScript基础练习与解析
"JavaScript基础练习题，包括判断题和单选题，涵盖了变量声明、数据类型、字符串、常量、运算符等基础知识。" 在JavaScript编程语言中，这些习题涉及了多个核心概念： 1. **变量声明**：在JavaScript中，使用`var`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值