每日思考(2020/03/27)

题目概览

  • HTML5在移动端如何打开APP
  • 对webp的理解
  • formData主要是用来做什么的?它的操作方法有哪些?
  • js动画和css动画有什么区别?

题目解答

HTML5在移动端如何打开APP

  • Android 是利用 deeplink, iOS 是利用 URL Schemes
  • 用 a 标签
    <a href="yourapp://page/xxx" />
    

对webp的理解

formData主要是用来做什么的?它的操作方法有哪些?

  • 作用:

    • 将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率
    • 异步上传文件
  • 创建formData对象
    • 创建一个空对象

      //通过FormData构造函数创建一个空对象
      var formdata=new FormData();
      //可以通过append()方法来追加数据
      formdata.append("name","laotie");
      //通过get方法对值进行读取
      console.log(formdata.get("name"));//laotie
      //通过set方法对值进行设置
      formdata.set("name","laoliu");
      console.log(formdata.get("name"));//laoliu
      
    • 通过表单对formData进行初始化
      <form id="advForm">
          <p>广告名称:<input type="text" name="advName"  value="xixi"></p>
          <p>广告类别:<select name="advType">
              <option value="1">轮播图</option>
              <option value="2">轮播图底部广告</option>
              <option value="3">热门回收广告</option>
              <option value="4">优品精选广告</option>
          </select></p>
          <p><input type="button" id="btn" value="添加"></p>
      </form>
      
      //获得表单按钮元素
      var btn=document.querySelector("#btn");
      //为按钮添加点击事件
      btn.onclick=function(){
          //根据ID获得页面当中的form表单元素
          var form=document.querySelector("#advForm");
          //将获得的表单元素作为参数,对formData进行初始化
          var formdata=new FormData(form);
          //通过get方法获得name为advName元素的value值
          console.log(formdata.get("advName"));//xixi
          //通过get方法获得name为advType元素的value值
          console.log(formdata.get("advType"));//1
      }
      
  • 操作方法
    • 通过get(key)与getAll(key)来获取相对应的值

      // 获取key为age的第一个值
      formdata.get("age");
       // 获取key为age的所有值,返回值为数组类型
      formdata.getAll("age");
      
    • 通过append(key,value)在数据末尾追加数据
      //通过FormData构造函数创建一个空对象
      var formdata=new FormData();
      //通过append()方法在末尾追加key为name值为laoliu的数据
      formdata.append("name","laoliu");
      //通过append()方法在末尾追加key为name值为laoli的数据
      formdata.append("name","laoli");
      //通过append()方法在末尾追加key为name值为laotie的数据
      formdata.append("name","laotie");
      //通过get方法读取key为name的第一个值
      console.log(formdata.get("name"));//laoliu
      //通过getAll方法读取key为name的所有值
      console.log(formdata.getAll("name"));//["laoliu", "laoli", "laotie"]
      
    • 通过set(key, value)来设置修改数据
      //通过FormData构造函数创建一个空对象
      var formdata=new FormData();
      //如果key的值不存在会为数据添加一个key为name值为laoliu的数据
      formdata.set("name","laoli");
      //通过get方法读取key为name的第一个值
      console.log(formdata.get("name"));//laoli
      
      //通过FormData构造函数创建一个空对象
      var formdata=new FormData();
      //通过append()方法在末尾追加key为name值为laoliu的数据
      formdata.append("name","laoliu");
      //通过append()方法在末尾追加key为name值为laoliu2的数据
      formdata.append("name","laoliu2");
      //通过get方法读取key为name的第一个值
      console.log(formdata.get("name"));//laoliu
      //通过getAll方法读取key为name的所有值
      console.log(formdata.getAll("name"));//["laoliu", "laoliu2"]
      
      //将存在的key为name的值修改为laoli
      formdata.set("name","laoli");
      //通过get方法读取key为name的第一个值
      console.log(formdata.get("name"));//laoli
      //通过getAll方法读取key为name的所有值
      console.log(formdata.getAll("name"));//["laoli"]
      
    • 通过has(key)来判断是否存在对应的key值
      //通过FormData构造函数创建一个空对象
      var formdata=new FormData();
      //通过append()方法在末尾追加key为name值为laoliu的数据
      formdata.append("name","laoliu");
      //判断是否包含key为name的数据
      console.log(formdata.has("name"));//true
      //判断是否包含key为age的数据
      console.log(formdata.has("age"));//false
      
    • 通过delete(key)可以删除数据
      //通过FormData构造函数创建一个空对象
      var formdata=new FormData();
      //通过append()方法在末尾追加key为name值为laoliu的数据
      formdata.append("name","laoliu");
      console.log(formdata.get("name"));//laoliu
      //删除key为name的值
      formdata.delete("name");
      console.log(formdata.get("name"));//null
      
  • 通过XMLHttpRequest发送数据
    • 创建表单

      <form id="advForm">
          <p>广告名称:<input type="text" name="advName" value="xixi"></p>
          <p>广告类别:<select name="advType">
              <option value="1">轮播图</option>
              <option value="2">轮播图底部广告</option>
              <option value="3">热门回收广告</option>
              <option value="4">优品精选广告</option>
          </select></p>
          <p>广告图片:<input type="file" name="advPic"></p>
          <p>广告地址:<input type="text" name="advUrl"></p>
          <p>广告排序:<input type="text" name="orderBy"></p>
          <p><input type="button" id="btn" value="添加"></p>
      </form>
      
    • 发送数据:
      var btn=document.querySelector("#btn");
      btn.onclick=function(){
          var formdata=new FormData(document.getElementById("advForm"));
          var xhr=new XMLHttpRequest();
          xhr.open("post","http://127.0.0.1/adv");
          xhr.send(formdata);
          xhr.onload=function(){
              if(xhr.status==200){
                  //...
              }
          }
      }
      

js动画和css动画有什么区别?

  • 代码复杂度方面,简单动画,css 代码实现会简单一些,js 复杂一些。复杂动画的话,css 代码就会变得冗长,js实现起来更优。
  • 动画运行时,对动画的控制程度上,js 比较灵活,能控制动画暂停,取消,终止等,css动画不能添加事件,只能设置固定节点进行什么样的过渡动画。
  • 兼容方面,css 有浏览器兼容问题,js 大多情况下是没有的。
  • 性能方面,css动画相对于优一些,css 动画通过GUI解析,js 动画需要经过j s 引擎代码解析,然后再进行 GUI 解析渲染

原文地址:https://www.cnblogs.com/EricZLin/p/12578659.html

时间: 03-26

每日思考(2020/03/27)的相关文章

java每日小算法(27)

/* [程序27]  题目:求100之内的素数    */ package test; import java.util.Scanner; public class test { public static boolean prime(int number) { boolean flag = true; int mid = (int)Math.sqrt(number); for(int i = 2; i< mid+1; i++) { if(number % i == 0) { flag = fa

2017/03/27学习笔记

程序的输入是指从输入文件讲数据传送给程序,程序的输出是指从程序将数据传送输出文件.C++输入输出包含以下三方面内容:对系统指定标准设备的输入和输出.即从键盘输入数据,输出到显示器.这种输入输出称为标准输入输出,简称标准IO.以外出磁盘文件为对象进行输入输出,即从磁盘文件输入数据,将数据输出到文件.以外存为对象的输入输出称为文件的输入输出,简称文件IO.度内存中指定的空间进行输入输出,通常指定一个字符串数组作为储存空间(实际上可以利用该空间储存任何信息).这种输入输出称为字符串输入输出,简称串IO

每日工作总结03

我昨天做了什么:做了项目记账的页面 我今天做了什么:做了预算余额的页面 遇到什么问题:界面布局出现问题,在手机中运行会出现控件重叠的问题

多行文本省略号,alt,title,...03/27/9:30

1,导航栏设置,li只设置block和float:left 就可以了,剩下的大小,样式设置a就可以了.2.<img>里面title属性是可以鼠标滑过有文字提醒;alt是在图片加载不出来时有文字,鼠标滑过没有文字提醒, 3,单行文本省略号: overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 4,webkit浏览器或移动端的网页 overflow:hidden;text-overflow:ellipsis;display:-web

2015/03/27 &nbsp; 压缩和解包

一.gzip压缩和解包 1. 压缩; [[email protected] ~]# gzip 2.txt 2. 解包; [[email protected] ~]# gzip -d 2.txt.gz 3. 查看包压缩的内容; [[email protected] ~]# zcat 1.txt.gz 二.bzip压缩和解包 1. 压缩; [[email protected] ~]# bzip2 2.txt 2. 解包; [[email protected] ~]# bzip2 -d 2.txt.b

深入浅出WPF--笔记(2015.03.27)

命令具有一处声明,处处使用的特点.微软在WPF类库中准备了一些便捷的命令库,包括: (1).ApplicationCommands; (2).ComponentCommands; (3).NavigationCommands; (4).MediaCommands; (5).EditingCommands 都是静态类,而命令就是用这些类的静态只读属性以单件模式暴露出来. 命令源一定是实现了ICommandSource接口的对象,而ICommandSource有一个属性是CommandParamet

moon HTML 2016.03.27

HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag). HTML 标签是由尖括号包围的关键词,比如 <html> HTML 标签通常是成对出现的,比如 <b> 和

Python基础教程(第十章 自带电池)

本文内容全部出自<Python基础教程>第二版,在此分享自己的学习之路. ______欢迎转载:http://www.cnblogs.com/Marlowes/p/5459376.html______ Created on Marlowes 现在已经介绍了Python语言的大部分基础知识.Python语言的核心非常强大,同时还提供了更多值得一试的工具.Python的标准安装中还包括一组模块,称为标准库(standard library).之前已经介绍了一些模块(例如math和cmath,其中包

好几年才收集到的软件,分享给大家。。。

QQ:365543212Email:[email protected]请按Clrt+F查找,输入软件关键字查询(不要输入版本号),如果找不到,您可以咨询客服.................FD......................12D MODEL 7.0 规划设计232Analyzer v4.1 高级串口分析监测3D Home Architect Design Suite Deluxe 8.0 室内装潢3D Profiler Tools 11.2 For Archicad 113D R

翻出当年的学习进度汇报邮件——前路不易,且行且珍惜

离回归程序猿行列已经一年又一个月整了,也就是进入现在这家公司已经一年又一个月整.确实是个整数,清清楚楚的记得去年入职时间是3月27日,似乎冥冥中总有那么些凑巧的事情发生.现在的公司是一家创业型公司,接受过一轮风投,从创办至今,时间其实不算短.今年是公司非常关键的一年,总觉得年初至今的项目目标不够明确,甚至有点杂乱.作为一个开发人员兼中层管理,最近这段时间想的比较多.可能由于上个月拼死拼活做的项目因为找不到盈利模式被迫暂停的缘故,最近几个星期尤为浮躁,很难静下心来看书学习. 今天下午一时兴起开始整