<javascript>每日小结

最新推荐文章于 2022-09-15 21:04:50 发布
最新推荐文章于 2022-09-15 21:04:50 发布
阅读量477 收藏
点赞数
分类专栏： 前端开发基础 文章标签： js 二维数组 switch 取值 赋值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Selina_Chan/article/details/50739240
版权

1.使用webstorm的时候，直接创建html文件，无需将html文件再放到文件夹中；创建css文件时注意需添加.css后缀。


2.javascript，二维数组的使用有两种方法：

（1）直接赋值：

var myarr=[[1,2],[2,3],[3,4]];

(2)先new一维数组，再做成二维数组：

var myarr=new Array();

if(i=0;i<10;i++){

myarr[i]=new Array();

if(j=0;j<2;j++){

myarr[i][j]=i+j;

 }

 }


3.switch语句中，如果每个case所要执行的都不一样，那么在每一个case后面都应该加一个break；

4.声明一个变量最好需要制定它的类型，比如：var num=0、var num=‘ ‘、var num=[];

5.赋值：document.getElementById(“id”）.value =要赋给它的值； 

  取值：var = document.getElementById(“id”）.value；

  注意：使用parseInt()函数可解析一个字符串,并返回一个整数。如：

var txt1=parseInt(document.getElementById("txt1").value);


代码1  实现简单的数组筛选：

<!DOCTYPE  HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流程控制语句</title>
<script type="text/javascript">


 //第一步把之前的数据写成一个数组的形式,定义变量为 infos
 var infos=[
     ['小A','女','21','大一'],
     ['小B','男','23','大三'],
     ['小C','男','24','大四'],
     ['小D','女','21','大一'],
     ['小E','女','22','大四'],
     ['小F','男','21','大一'],
     ['小G','女','22','大二'],
     ['小H','女','20','大三'],
     ['小I','女','20','大一'],
     ['小J','男','20','大三']
     ];
 
 document.write(infos[0]+'<br><br>'+infos[1]+'<br><br>'+infos[2]+'<br><br>'+infos[3]+'<br><br>'+infos[4]+'<br><br>'+infos[5]+'<br><br>'+infos[6]+'<br><br>'+infos[7]+'<br><br>'+infos[8]+'<br><br>'+infos[9]+'<br><br>');
 document.write(infos.length+'<br>');
 //第一次筛选，找出都是大一的信息
 for(i=0;i<10;i++){
     if(infos[i][3]=='大一'){
         document.write('<br>'+infos[i]);
         
     }
     }
  document.write('<br>');
 //第二次筛选，找出都是女生的信息
 for(i=0;i<10;i++){
     if(infos[i][1]=='女'){
         document.write('<br>'+infos[i]);
     }
 }
</script>
</head>
<body>
</body>
</html>


代码2  实现简单的加减乘除：

<!DOCTYPE html>

<html>
 <head>
  <title> 事件</title>  
  <script type="text/javascript">
   function count(){
       
    //获取第一个输入框的值
  var txt1=parseInt(document.getElementById("txt1").value);
//获取第二个输入框的值
   var txt2=parseInt(document.getElementById("txt2").value);
//获取选择框的值
   var count=document.getElementById("select").value;
//获取通过下拉框来选择的值来改变加减乘除的运算法则
    var result='';
    switch(count){
      case '+':
          result=txt1+txt2;
          break;
      case '-':
          result=txt1-txt2;
          break;
      case '*':
          result=txt1*txt2;
          break;
      case '/':
          result=txt1/txt2;
          break;
  } 
    //设置结果输入框的值 
    document.getElementById("fruit").value=result;
   }
  </script> 
 </head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
   </select>
   <input type='text' id='txt2' /> 
   <input type='button' value=' = ' οnclick="count()" /> 
   <!--通过 = 按钮来调用创建的函数，得到结果--> 
   <input type='text' id='fruit' />   
 </body>
</html>
AryaoO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
每日JavaScript - 8
tcap99的博客
11-06 116
面向对象都有类的概念，而通过类可以创建多个具有相同属性和方法的对象。对于Java来说，就是一门彻底面向对象的语言，有着官方的类封装。 但在ES6之前，JavaScript是没有官方提供的类库。 下面我们来创建一个对象 let animal = { name: &quot;animal&quot;, // 注意不能使用箭头函数，它的this指向的window // eat: () =&amp;gt; console...
JavaScript《每日一点儿》
qq_43710627的博客
07-02 126
Reflect.ownKeys(target)、Object.keys(target)、. . . 对象的每一个属性都有一个描述对象，用来描述和控制该属性的行为，获取到的描述对象中的enumerable属性，称为可枚举性，ture为可枚举，false即不可枚举。当属性不可枚举时，就表示某些操作会忽略当前属性。 将对象的属性添加给变量test 多个对象合并 该方法与类似区别......
每日一结笔记
xz100599的博客
09-15 159
相对div无语义标签来说，更加具有语义化新增语义标签：块级标签header:头部 网页的头部，某个模块的头部footer:底部 网页的底部，某个模块的底部nav:导航 网页中的文字导航、侧边栏导航、面包屑导航article:文章 网页中独立的结构，用的不多，包着多个sectionsection:章节 相当于一个自然段类似与div,区别：一般一个section：一个section元素通常由内容及标题组成aside:侧边栏网页中侧边的广告语义：定义当前页面或文章的附属信息部分。
前端每日小结
qq_51651904的博客
05-03 91
Echarts快速入门 1.第一个实例： 先引入echarts.js文件 创建一个用于容纳echarts的dom <div id="main" style="width: 600px;height:400px;"></div> 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); 将echarts示例的option部分代码填入 利用dom名.se
每日学习小结
weixin_45346719的博客
03-08 203
学习小结 2021.03.08——星期一 1.hidden的工作原理 2.use strict严格模式禁止this关键字指向全局对象 3.css sprites相关信息 4.typeof操作符 5.padding内边距 margin外边距 6.sessionStorage 存储 session，指的是一次会话，其时间作用于你访问开始一个网站到你关闭这个网站。 所以你用sessionStorage保存的数据在你关闭网站页面的时候就会被销毁，一般用于临时的数据保存 localStorage 存储 local，
每日一小结
FBS_123456的博客
05-12 83
1、什么是Js的dom？ DOM编程:Document Object Model,基于文档对象模型编程 在解析html标签的时候,浏览器的js引擎将html的每一个标签,封装标签对象(节点对象/元素对象),形成树结构, 使用一些方式获取节点对象,改变它的特有属性! 2、获取标签对象,通过document方法有几种方式,列举 4种， document.getElementById（“id属性值”） document.getElementsByClassName（“class属性...
暑假学习笔记每日小结
成长过程
06-30 301
vue学习笔记初次接触，安装了，实现了奇偶行变色的项目，下载了，安装解决了代码的问题，运行了中自定义的dev脚本，并生成、替换了js文件自定义了，自定义压缩的js文件名、生成的文件夹位置、名字，生成的js文件名字 安装了两个插件：一个一个 ，前者是否保存文件，用来创建访问实时变换网页，另一个是复制文件放到其他文件下接着昨天的说，设置了的属性 比如在之后直接进入网页，然后设置下载插件来处理不能处理的文件 其中今天学习了处理css、less、image、高级语法的js今天学会了中的打包文件和来设置，设置了符号表
每日一结,文件的上传与下载
Mr.ZD的专栏
12-14 401
1.文件上传 问题:什么是文件上传？为什么使用文件上传? 就是将客户端资源，通过网络传递到服务器端。 就是因为数据比较大，我们必须通过文件上传才可以完成将数据保存到服务器端操作. 文件上传的本质:就是IO流的操作。 演示:文件 上传应该 怎样操作? 浏览器端: 1.method=post 只有post才可以携带大数据 2.必须使用要有name属性 3.en
每日小结9.5
not_in_mountain的博客
09-05 245
每日记录
Vue中通过<script></script>引入的Vue.js文件
04-28
<script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"></script> src里面的内容根据自己的下载的Vue.js的文件位置决定的，我这里只是拿我自己做的举个例子。这个地方的vue.js是因为我下载了两次...
ja<x>vasc<x>ript基础语法
07-22
资源名称：Javaｓｃｒｉｐｔ基础语法资源截图：  资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
标签内JavaScript代码的高亮显示插件
04-19
NULL 博文链接：https://tjuking.iteye.com/blog/1865994
JavaScript 验证浏览器是否支持javascript的方法小结
01-21
http://login.xiaonei.com/Login.do : 用户禁用Js后有提示信息 我的实现步骤: 思想: 1,默认(禁用js)submit按钮式不显示的,如果启用后,就显示submit按钮 2,通过<noscript>…………………..</noscript> 显示提示信息 ...
ja<x>vasc<x>ript加强
07-22
资源名称：Javaｓｃｒｉｐｔ加强资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
d3.js——树状图的绘制
热门推荐
Selina_Chan的博客
04-27 2万+
树状图和集群图其实差不多，就一点点不一样，见下图： 图（1）：集群图——d3.layout.cluster() 图（2）：树状图——d3.layout.tree() 这样一来差别就看出来了。由于两者的代码差不多，这里就直接附上树状图源码，不多加解释咯~ city.json文件： { "name":"中国", "children": [
d3.js——图形缩放平移操作
Selina_Chan的博客
05-10 1万+
缩放操作 var width = 400, height = 400; var circles =[{cx:150,cy:200,r:30}, {cx:250,cy:200,r:30}] var svg = d3.select("body").append("svg") .attr("width",wi
d3.jd——监听鼠标事件
Selina_Chan的博客
04-25 1万+
对一个被选择的元素，添加监听操作，代码如下：.on("click", function(){ } )   常用的事件（event）有： click  ： 鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起mouseover  ： 鼠标移到某元素上mouseout  ： 鼠标从某元素移开mousemove ： 鼠标被移动mousedown
d3.js——箭头的绘制
Selina_Chan的博客
05-09 1万+
首先我们要明白如何在svg中进行箭头的绘制： 先写一对，里面再写一对，其中marker的属性意义为： viewBox 坐标系的区域 refX, refY 在 viewBox 内的基准点，绘制时此点在直线端点上（要注意大小写） markerUnits 标识大小的基准，有两个值：strokeWidth（线的宽度）和userSpaceOnUse（图形最前端的
试一试，在<script>的标签内容，获取所有LI标签，并输出相应节点的名称、节点的值、节点的类型。<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>节点属性</title> </head> <body> <ul> <li>javascript</li> <li>HTML/CSS</li> <li>jQuery</li> </ul> <script type="text/javascript"> </script> </body> </html>
最新发布
06-03
<li>javascript</li> <li>HTML/CSS</li> <li>jQuery</li> </ul> <script type="text/javascript"> // 获取所有LI标签 var lis = document.getElementsByTagName("li"); // 遍历LI标签，并输出相应节点的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值