1. onblur   属性在元素失去焦点时触发。

2. onfocus 属性在元素获得焦点时触发。

3.addEventlistener 事件监听

　　监听键盘按下事件

componentDidMount(){

    document.addEventListener("keydown",this.handleEnterKey);

}

  handleEnterKey = (e) => {

    if(e.keyCode === ){ // 按下回车键后触发登录函数

      this._login()  // 登录函数

    }

  }

4.focus() 方法用于给予该元素焦点。这样用户不必点击它，就能编辑显示的文本了。

5.Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内

 backTop() {

       if (document.documentElement) {

         document.documentElement.scrollIntoView({

           behavior: "smooth",

           block: "start",

           inline: "nearest"

         });

       } else {

         document.body.scrollIntoView({

           behavior: "smooth",

           block: "start",

           inline: "nearest"

         });

       }

     }
6. marquee 跑马灯标签

页面的自动滚动效果，可由javascript来实现，但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制。

使用marquee标记不仅可以移动文字，也可以移动图片，表格等.

语法：<marquee>...</marquee>； 说明：在标记之间添加要进行滚动的内容。

重要属性：

1.滚动方向direction（包括4个值：up、 down、 left和 right）

　　语法：<marquee direction="滚动方向">...</marquee>

2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）

　　语法：<marquee behavior="滚动方式">...</marquee>

3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）

　　语法：<marquee scrollamount="5">...</marquee>

4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）

　　语法：<marquee scrolldelay="100">...</marquee>

5.滚动循环loop（默认值是-1，滚动会不断的循环下去）

　　语法：<marquee loop="2">...</marquee>

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

代码示例：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 </head>

 <body>

 <div>

 <marquee direction="up" behavior="scroll" scrollamount="" scrolldelay="" loop="-1" width="" height="" bgcolor="#0099FF" hspace="" vspace="">

 指整个Marquee对齐方式; ()behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复...

 </marquee>

 </div>

 </body>

 </html>

9.CSS 多余两行省略符号

.box-text{

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: ;

  line-clamp: ;

  -webkit-box-orient: vertical;

}

10.防止图片宽度/高度 过大而产生拉伸效果  使用背景图片的 cover属性

<div style={{

     backgroundSize: 'cover',

     backgroundPosition: 'center center',

     width: autoWidth(),

     height: autoWidth(),

     backgroundImage: `url(${"https:" + String(item.photos).split(',')[]})`

}} />

11.input标签 上传图片/文件上传

html代码

<form>
  <input ref={(e)=>this._image = e} style={{opacity:0}} type="file" id='image' name="image" accept='image' onChange={(e)=>this.handleInputChange(e)} />
  <label htmlFor="image" style={{position:'absolute'}} className='photo_text'>(点击拍摄)</label>
</form>

js代码

// 全局对象，不同function使用传递数据

const imgFile = {};

 handleInputChange = (event) => {

    // 获取当前选中的文件

    const file = event.target.files[];

    const imgMasSize =  *  * ; // 10MB

    // 检查文件类型

    if(['jpeg', 'png', 'gif', 'jpg'].indexOf(file.type.split("/")[]) < ){

        // 自定义报错方式

        // Toast.error("文件类型仅支持 jpeg/png/gif！", 2000, undefined, false);

        return;

    }

　　this._image.value = ''

    // 文件大小限制

    if(file.size > imgMasSize ) {

        // 文件大小自定义限制

        // Toast.error("文件大小不能超过10MB！", 2000, undefined, false);

        return;

    }

    // 判断是否是ios

    if(!!window.navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){

        // iOS

        this.transformFileToFormData(file);

        return;

    }

    // 图片压缩之旅

    this.transformFileToDataUrl(file);

}

// 将File append进 FormData

 transformFileToFormData (file) {

    const formData = new FormData();

    // 自定义formData中的内容

    // type

    formData.append('type', file.type);

    // size

    formData.append('size', file.size || "image/jpeg");

    // name

    formData.append('name', file.name);

    // lastModifiedDate

    formData.append('lastModifiedDate', file.lastModifiedDate);

    // append 文件

    formData.append('file', file);

    // 上传图片

    this.uploadImg(formData);

}

// 将file转成dataUrl

transformFileToDataUrl (file) {

    const imgCompassMaxSize =  * ; // 超过 200k 就压缩

    // 存储文件相关信息

    imgFile.type = file.type || 'image/jpeg'; // 部分安卓出现获取不到type的情况

    imgFile.size = file.size;

    imgFile.name = file.name;

    imgFile.lastModifiedDate = file.lastModifiedDate;

    // 封装好的函数

    const reader = new FileReader();

    // file转dataUrl是个异步函数，要将代码写在回调里

    reader.onload = function(e) {

        const result = e.target.result;

        if(result.length < imgCompassMaxSize) {

            compress(result, processData, false );    // 图片不压缩

        } else {

            compress(result, processData);            // 图片压缩

        }

    };

    reader.readAsDataURL(file);

}

// 使用canvas绘制图片并压缩

 compress (dataURL, callback, shouldCompress = true) {

    const img = new window.Image();

    img.src = dataURL;

    img.onload = function () {

        const canvas = document.createElement('canvas');

        const ctx = canvas.getContext('2d');

        canvas.width = img.width;

        canvas.height = img.height;

        ctx.drawImage(img, , , canvas.width, canvas.height);

        let compressedDataUrl;

        if(shouldCompress){

            compressedDataUrl = canvas.toDataURL(imgFile.type, 0.2);

        } else {

            compressedDataUrl = canvas.toDataURL(imgFile.type, );

        }

        callback(compressedDataUrl);

    }

}


 processData (dataURL) {

    // 这里使用二进制方式处理dataUrl

    const binaryString = window.atob(dataUrl.split(',')[]);

    const arrayBuffer = new ArrayBuffer(binaryString.length);

    const intArray = new Uint8Array(arrayBuffer);

    const imgFile = this.imgFile;

    for (let i = , j = binaryString.length; i < j; i++) {

        intArray[i] = binaryString.charCodeAt(i);

    }

    const data = [intArray];

    let blob;

    try {

        blob = new Blob(data, { type: imgFile.type });

    } catch (error) {

        window.BlobBuilder = window.BlobBuilder ||

            window.WebKitBlobBuilder ||

            window.MozBlobBuilder ||

            window.MSBlobBuilder;

        if (error.name === 'TypeError' && window.BlobBuilder){

            const builder = new BlobBuilder();

            builder.append(arrayBuffer);

            blob = builder.getBlob(imgFile.type);

        } else {

            // Toast.error("版本过低，不支持上传图片", 2000, undefined, false);

            throw new Error('版本过低，不支持上传图片');

        }

    }

    // blob 转file

    const fileOfBlob = new File([blob], imgFile.name);

    const formData = new FormData();

    // type

    formData.append('type', imgFile.type);

    // size

    formData.append('size', fileOfBlob.size);

    // name

    formData.append('name', imgFile.name);

    // lastModifiedDate

    formData.append('lastModifiedDate', imgFile.lastModifiedDate);

    // append 文件

    formData.append('file', fileOfBlob);

    this.uploadImg(formData);

}

// 上传图片

uploadImg (formData) {

    const xhr = new XMLHttpRequest();

    // 进度监听

    xhr.upload.addEventListener('progress', (e)=>{console.log(e.loaded / e.total)}, false);

    // 加载监听

    // xhr.addEventListener('load', ()=>{console.log("加载中");}, false);

    // 错误监听

    xhr.addEventListener('error', ()=>{Toast.error("上传失败！", , undefined, false);}, false);

    xhr.onreadystatechange = () => {

        if (xhr.readyState === ) {

            const result = JSON.parse(xhr.responseText);

            if (xhr.status === ) {

                // 上传成功

            } else {

                // 上传失败

            }

        }

    };

    xhr.open('POST', '/uploadUrl' , true);

    xhr.send(formData);

}

12.jquery 渲染JSON数据/数组对象数据

    const  data = [

        {

        title:'保险1',

        detail:'承包....',

        price:

        },

        {

            title:'保险2',

            detail:'承包...',

            price:

        },

    ]

    let str="<ul class='package-gift'>";

    $.each(data,function(item,value){

        str+="<li style='margin-bottom: 10px;'><div class='package-common-title'><img src='asset/unchecked.png' alt=''><p>"+value.title+"</p></div>";

        str+="<p class='package-gift-detail'>"+value.detail+"</p>";

        str+="<div class='package-gift-price'><span>原价</span><span>￥</span><span>" + value.price +"</span></div></li>";

    });

    str+="</ul>";

    $(".package-gift-section").append(str);

13.fixed 页面滚动

{

position:fixed;

overflow:scroll;

bottom:;

top:;

}

14.jquery 多重遍历 + 元素替换  实现了点击A 替换 B 和C ，其中C为列表

packageList代码

[{"id":,"title":"电信花卡19元","tag":"流量多多 畅玩不停","content":"200GB专属流量；免费接听； 100分\n","icon":"https://image.baidu.com/search/detail?ct=503316480\u0026z=\u0026tn=baiduimagedetail\u0026ipn=d\u0026word=%E5%9B%BE%E6%A0%87%20icon\u0026step_word=\u0026ie=utf-8\u0026in=\u0026cl=2\u0026lm=-1\u0026st=-1\u0026hd=undefined\u0026latest=undefined\u0026copyright=undefined\u0026cs=2258620003,138289266\u0026os=3769280324,3390709901\u0026simid=3363682034,337277918\u0026pn=2\u0026rn=1\u0026di=137390\u0026ln=1537\u0026fr=\u0026fmq=1389861203899_R\u0026fm=\u0026ic=0\u0026s=undefined\u0026se=\u0026sme=\u0026tab=0\u0026width=\u0026height=\u0026face=undefined\u0026is=0,0\u0026istype=2\u0026ist=\u0026jit=\u0026bdtype=0\u0026spn=0\u0026pi=0\u0026gsm=0\u0026hs=2\u0026oriquery=%E5%9B%BE%E6%A0%87\u0026objurl=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F1f409a2915794183044b9b6f5a733ef3c6b483af6e61-vsvFa3_fw658\u0026rpstart=0\u0026rpnum=0\u0026adpicid=0\u0026force=undefined","give_away":[{"id":,"title":"中国平安保险E生平安·重疾险","content":"承保100种高发疾病，确诊即可赔付","original_price":"90.00000000000000000000","contract_id":},{"id":,"title":"中国平安保险E生平安·重疾险","content":"承保100种高发疾病，确诊即可赔付","original_price":"90.00000000000000000000","contract_id":}],"actual_price":"19.00000000000000000000"},{"id":,"title":"电信花卡129元","tag":"赠送宽带 飞速上网","content":"200GB专属流量；免费接听； 100分 ","icon":"https://image.baidu.com/search/detail?ct=503316480\u0026z=\u0026tn=baiduimagedetail\u0026ipn=d\u0026word=%E5%9B%BE%E6%A0%87%20icon\u0026step_word=\u0026ie=utf-8\u0026in=\u0026cl=2\u0026lm=-1\u0026st=-1\u0026hd=undefined\u0026latest=undefined\u0026copyright=undefined\u0026cs=1624956854,2683166289\u0026os=428664698,3137670526\u0026simid=4182229141,534921667\u0026pn=29\u0026rn=1\u0026di=81840\u0026ln=1537\u0026fr=\u0026fmq=1389861203899_R\u0026fm=\u0026ic=0\u0026s=undefined\u0026se=\u0026sme=\u0026tab=0\u0026width=\u0026height=\u0026face=undefined\u0026is=0,0\u0026istype=2\u0026ist=\u0026jit=\u0026bdtype=0\u0026spn=0\u0026pi=0\u0026gsm=0\u0026hs=2\u0026oriquery=%E5%9B%BE%E6%A0%87\u0026objurl=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F92e4826b11ec121e35c0d3bf62c1709b0f730e62289d-o8V8fR_fw658\u0026rpstart=0\u0026rpnum=0\u0026adpicid=0\u0026force=undefined","give_away":[],"actual_price":"129.00000000000000000000"},{"id":,"title":"电信花卡59元","tag":"流量多多 无限畅玩","content":"200GB专属流量；免费接听； 100分 ","icon":"https://image.baidu.com/search/detail?ct=503316480\u0026z=\u0026tn=baiduimagedetail\u0026ipn=d\u0026word=%E5%9B%BE%E6%A0%87%20icon\u0026step_word=\u0026ie=utf-8\u0026in=\u0026cl=2\u0026lm=-1\u0026st=-1\u0026hd=undefined\u0026latest=undefined\u0026copyright=undefined\u0026cs=2973854516,307071732\u0026os=706910135,3868125202\u0026simid=3374560104,335918967\u0026pn=21\u0026rn=1\u0026di=78540\u0026ln=1537\u0026fr=\u0026fmq=1389861203899_R\u0026fm=\u0026ic=0\u0026s=undefined\u0026se=\u0026sme=\u0026tab=0\u0026width=\u0026height=\u0026face=undefined\u0026is=0,0\u0026istype=2\u0026ist=\u0026jit=\u0026bdtype=0\u0026spn=0\u0026pi=0\u0026gsm=0\u0026hs=2\u0026oriquery=%E5%9B%BE%E6%A0%87\u0026objurl=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fc9d50569eb0d9decf3afa0c3982b1f966bc83b7f59af0-BPVUzU_fw658\u0026rpstart=0\u0026rpnum=0\u0026adpicid=0\u0026force=undefined","give_away":[],"actual_price":"59.00000000000000000000"}]

packageList 代码

          function getGift(item,giftData){

                        giftStr = "<ul class='package-gift'>";

                        $.each(giftData,function(item,value){

                            giftStr+="<li style='margin-bottom: 20px;'><div class='package-common-title' ><img src='asset/unchecked.png' alt=''><p style='color: #000;'>"+value.title+"</p></div>";

                            giftStr+="<p class='package-gift-detail'>"+value.content+"</p>";

                            giftStr+="<div class='package-gift-price'><span>原价</span><span>￥</span><span>" + Number(value.original_price) +"</span></div></li>";

                        });

                        console.log(item,giftStr)

                        return giftStr

                    }

                    $.each(packageList,function (item,value) {

                        console.log('让我康康',packageList)

                        giftList.push(value.give_away)

                        expensesList.push({content:value.content,title:value.title})

                        packageListStr += "<li><div class='package-order '><p class='package-order-txt'>" + (item + ) +"</p></div>"

                        packageListStr += "<img class='package-func'  src="+ value.icon +" ><p class='package-title'>"+ value.title +"</p><p class='package-subtitle'>" + value.tag +"</p><div class='package-info-section'> <div class='package-common-title'><p>"

                            + value.title +"</p></div><table class='package-info-box'><tr><th>套餐包含</th><td>" + value.content + "</td></tr><tr><th>套外包含</th><td>" + value.content +"</td></tr></table></div>"+

                            getGift(item,value.give_away)  +  "</ul></li>"

                    });

                    packageListStr += "</ul>";

                    $('.package-check-section').append(packageListStr);

替换元素代码

                    //初始化套餐详情

                    $('.package-section').html($('.package-check li').eq().find('.package-info-section').prop('outerHTML'))

                    $('.package-section .package-info-section').removeClass('hidden')

                    //初始化赠品

                    $('.package-gift-section').html($('.package-check li').eq().find('.package-gift').prop('outerHTML'))

                    $('.package-gift-section .package-gift').removeClass('hidden')

                    // 选择套餐修改套餐详情

                    $('.package-check li').on('click',function () {

                        const idx = $(this).index();

                        $('.package-info>li').eq(idx).show()

                        $('.package-info>li').eq(idx).siblings().hide()

                        console.log($('.package-gift-section li'),'不删')

                        // $(this).siblings().find('.package-info-section').addClass('hidden')

                        $('.package-section').html($(this).find('.package-info-section').prop('outerHTML'))   //这里的prop('outerHTML')包括了自己这个标签 以及里面的内容

                        $('.package-section .package-info-section').removeClass('hidden');

                        $('.package-gift-section').html($(this).find('.package-gift').prop('outerHTML'))

                        $('.package-gift-section .package-gift').removeClass('hidden');

                    });

因为 59元 129元套餐的赠品data为[] 所以只有19元套餐有赠品

extra :

1. input 文件上传时，不能连续上传同一个文件，因为浏览器会判断文件路径，所有要使文件路径清空

 this._image.value=''

2.点击时间触发input中的文件上传事件后，出现了位置偏移(位移)

是因为input标签没有设置宽度导致的，将它的宽度设为0即可。

HTML不熟悉方法总结的更多相关文章

  1. python import模块熟悉方法

    python import导入的可用模块很多,新增速度较快,无法一次性全部掌握. 掌握熟悉一种模块的方法是非常有价值的技能. 探究模块可以从python解释器入手,具体流程记录如下: 以os模块为例: ...

  2. 改代码不是很熟悉------方法上加入synchronized关键字，会有性能问题---如何改善

    package com.bjpowernode.t14; import java.time.Duration;import java.time.LocalTime; public class Proc ...

  3. 获取元素CSS值之getComputedStyle方法熟悉

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...

  4. 转贴：获取元素CSS值之getComputedStyle方法熟悉

    获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...

  5. JS获取元素CSS值的各种方法分析

    先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. Android中贝塞尔曲线的绘制方法

    贝塞尔曲线,很多人可能不太了解,什么叫做贝塞尔曲线呢?这里先做一下简单介绍:贝塞尔曲线也可以叫做贝济埃曲线或者贝兹曲线,它由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋.一般的矢量图形软件常 ...

  7. C#开发Unity游戏教程之游戏对象的行为逻辑方法

    C#开发Unity游戏教程之游戏对象的行为逻辑方法 游戏对象的行为逻辑——方法 方法(method),读者在第1章新建脚本时就见过了,而且在第2章对脚本做整体上的介绍时也介绍过,那么上一章呢,尽管主要 ...

  8. wordpress整站无损搬迁的几种方法 最后一种最完美

    网站建设之wordpress整站无损搬迁的几种方法 最后一种最完美 网站搬家,当我们更换php虚拟主机,空间升级或更好空间提供商都会发生,站长们请注意,掌握网站迁移方法,是网站日常维护技术中必须掌握的 ...

  9. Linux CAT与ECHO命令详解 <<EOF EOF

    Linux CAT与ECHO命令详解 cat命令是Linux下的一个文本输出命令,通常是用于观看某个文件的内容的: cat主要有三大功能: .一次显示整个文件. $ cat filename .从键盘 ...

随机推荐

  1. Android 打开设置界面或者WiFi连接界面

    1.使用APP打开系统的设置界面或者WiFi连接界面 startActivity(new Intent(Settings.ACTION_WIFI_SETTINGS)); //直接进入手机中的wifi网 ...

  2. Glitch-free clock switch

    With multi-frequency clocks being used in today’s devices, it's necessary to switch the source of a ...

  3. Percona Xtrabackup导出/导入单表

    默认情况下,InnoDB表不能通过直接复制表文件的方式在mysql服务器之间进行移植,即便使用了innodb_file_per_table选项.而使用Xtrabackup工具可以实现此种功能,不过,此 ...

  4. 前端面试题总结 -vue

    1.active-class是哪个组件的属性? vue-router模块的router-link组件. 2.嵌套路由怎么定义? 在 VueRouter 的参数中使用 children 配置,这样就可以 ...

  5. wx小程序开发 1：小程序代码构成

    官网学习地址:https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/introduction.html 1: 2:待续.. ...

  6. PAT_A1072#Gas Station

    Source: PAT A1072 Gas Station (30 分) Description: A gas station has to be built at such a location t ...

  7. echarts 中 请求后台改变数据

    function tablenumber() { $.ajax({ type : "get", url : "../res/error.json", dataT ...

  8. JS常见的四种设计模式

    1 工厂模式 简单的工厂模式可以理解为解决多个相似的问题; function CreatePerson(name,age,sex) { var obj = new Object(); obj.name ...

  9. 22.external version

    主要知识点 基于external version进行乐观锁并发控制 es提供了一个feature,就是说,你可以不用它提供的内部_version版本号来进行并发控制,可以基于你自己维护的一个版本号来进 ...

  10. GOF23设计模式之原型模式

    GOF23设计模式之原型模式 1)通过 new 产生一个对象需要飞船繁琐的数据准备或访问权限,则可以使用原型模式. 2)就算 java 中的克隆技术,以某个对象为原型,复制出新的对象.显然,新的对象具 ...