HTML不熟悉方法总结
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不熟悉方法总结的更多相关文章
- python import模块熟悉方法
python import导入的可用模块很多,新增速度较快,无法一次性全部掌握. 掌握熟悉一种模块的方法是非常有价值的技能. 探究模块可以从python解释器入手,具体流程记录如下: 以os模块为例: ...
- 改代码不是很熟悉------方法上加入synchronized关键字，会有性能问题---如何改善
package com.bjpowernode.t14; import java.time.Duration;import java.time.LocalTime; public class Proc ...
- 获取元素CSS值之getComputedStyle方法熟悉
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...
- 转贴：获取元素CSS值之getComputedStyle方法熟悉
获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...
- JS获取元素CSS值的各种方法分析
先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...
- Android中贝塞尔曲线的绘制方法
贝塞尔曲线,很多人可能不太了解,什么叫做贝塞尔曲线呢?这里先做一下简单介绍:贝塞尔曲线也可以叫做贝济埃曲线或者贝兹曲线,它由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋.一般的矢量图形软件常 ...
- C#开发Unity游戏教程之游戏对象的行为逻辑方法
C#开发Unity游戏教程之游戏对象的行为逻辑方法 游戏对象的行为逻辑——方法 方法(method),读者在第1章新建脚本时就见过了,而且在第2章对脚本做整体上的介绍时也介绍过,那么上一章呢,尽管主要 ...
- wordpress整站无损搬迁的几种方法 最后一种最完美
网站建设之wordpress整站无损搬迁的几种方法 最后一种最完美 网站搬家,当我们更换php虚拟主机,空间升级或更好空间提供商都会发生,站长们请注意,掌握网站迁移方法,是网站日常维护技术中必须掌握的 ...
- Linux CAT与ECHO命令详解 <<EOF EOF
Linux CAT与ECHO命令详解 cat命令是Linux下的一个文本输出命令,通常是用于观看某个文件的内容的: cat主要有三大功能: .一次显示整个文件. $ cat filename .从键盘 ...
随机推荐
- Android开发笔记（11）——DialogFragment & 点击监听
转载请注明:http://www.cnblogs.com/igoslly/p/6931519.html DialogFragment使用 & 点击监听 /* DialogFragment是用于 ...
- 【Oracle】服务器端监听配置
一.静态监听 创建端口为1521的监听,静态注册,本机ip:192.168.10.2 [oracle@localhost ~]$ vi /u01/app/oracle/product/11.2.0/d ...
- Arduino 9g舵机操作
一.接线原理图 一.实物图 三.事例代码 从0转180度,再从180转到0度
- 记Python学习
上周学的Python,感觉有点忘了,现在回顾一下... 一.Python安装及测试:https://www.cnblogs.com/weven/p/7252917.html 例子: Python自带的 ...
- BZOJ 3036: 绿豆蛙的归宿 期望 + 拓扑排序
随着新版百度空间的下线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿.给出一个有向无环的连通图,起点为1终点为N,每条边都有一个长度.绿豆蛙从起点出发,走向终点. 到达每一个顶点时,如果有K条离 ...
- Hbuider sass配置 webstorm scss配置
--no-cache %FileName% ../css/%FileBaseName%.css sass编译后保存到css目录下 webstorm scss配置 C:\Ruby22-x64\bin ...
- 自编码器----Autoencoder
一.自编码器:降维[无监督学习] PCA简介:[线性]原矩阵乘以过渡矩阵W得到新的矩阵,原矩阵和新矩阵是同样的东西,只是通过W换基. 自编码: 自动编码器是一种无监督的神经网络模型,它可以学习到输入数 ...
- phpqrcode生成二维码
这篇文章讲解得非常详细: https://www.jb51.net/article/136418.htm 备注一下: 如果遇到生成的二维码是一串乱码.只需要在代码最后加上 exit();即可解决,原理 ...
- Linux之浅谈VIM常见用法及原理图
本次归纳以强大的VIM文本处理工具常见用法去展开论述. 文本编辑种类: 行编辑器:sed 全屏编辑器:nano,vi vim - Vi改进 其他编辑器: ...
- SOA架构设计的案例分析
面向服务的架构(SOA)是一个组件模型,它将应用程序的不同功能单元(称为服务)进行拆分,并通过这些服务之间定义良好的接口和契约联系起来.接口是采用中立的方式进行定义的,它应该独立于实现服务的硬件平台. ...