HTML5自学笔记[ 6 ]data自定义数据

在标签中添加data-name属性并赋值,在js脚本中用ele.dataset.name就可以获取该属性的值.如: <div id="box" data-age="20">年龄</div> <script> var oDiv = document.getElementById('box'); alert(oDiv.dataset.age); //20 </script> 如果name是用-连接的两个及以上单词来命名,那…

Python自学笔记——Matplotlib风羽自定义

[前言]对于气象专业的小学生来说,风场是预报重要的参考数据,我们所知的风羽有四种:短线代表风速2m/s,长线代表风速4m/s,空心三角代表风速20m/s,实心三角代表风速50m/s.而matplotlib的风羽只有短线.长线.三角三种,而这里的三角不分空心实心,但是可通过改变风羽颜色为白色使三角变为空心形状,虽然这三种可以自定义各自代表的风速,但是仍与我们的使用习惯不符,即使把三角设成20m/s,原本一个实心三角就能表示的50m/s的风在matplotlib中需要两个三角外加两条长线一条短线.为…

Html5 自学笔记

1 html的全称 Hyper Text Markup Language 2 HTML的意义使用标记标签( Markup Tag)来描述网页 3 HTML标签一定成对吗是 4 <html> </html> 它们之间的文本用来描述网页 5 <body></body> 它们之间的文本描述网页上的可见内容 6 html标题标签 h1 到 h5 7 html段落用<p>来定义的 8 html链接 html链接是用<a> 来定义的…

HTML5自学笔记[ 18 ]canvas绘图基础5

获取图像数据:getImgData(x,y,w,h),返回的是一个ImageData对象,这个对象有三个属性保存图像信息:width/height/data.data是一个数组,保存了每个像素的信息,一个像素用4个元素保存,分别表示红.绿.蓝和透明度. 创建图像数据:createImgData(w,h),w/h表示图像的大小,返回的也是一个ImageData对象,只要设置好data,就可以用putImgData()将该图像绘制到画布上了. 绘制图像数据:putImgData(imgData,x,…

HTML5学习笔记之客户端存储数据方法：localStorage(),sessionStorage()

HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储下面的一个例子用localStroage()方法对用户访问页面的次数进行计数 <script type="text/javascript"> if(localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount)+…

HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>马赛克</title> <style> body{background:#000;} canvas{background: #fff; margin-left:500px;} </style> <script> windo…

HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>倒影</title> <style> body{background:#000;} canvas{background: #fff; margin-left:500px;} </style> <script> window…

HTML5自学笔记[ 11 ]canvas绘图基础1

html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支持canvas的浏览器里会显示这行文字,这里的文字颜色要和canvas背景色一致才行: <canvas id="canvas1" width="1000" height="1000"> <span>该浏览器不支持canvas&…

HTML5自学笔记[ 10 ]简单的购物车拖拽

用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: <!doctype html> <html> <head> <meta charset="utf-8"> <title>购物车拖拽</title> <style> *{ margin:0; padding:0;} #proList{ overflow:hidden;} #proList li{ list-style:n…

HTML5自学笔记[ 9 ]HTML5实现元素的拖放

要想在html5中实现元素的拖放,被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素,该元素是目标元素:这两个元素在拖放过程中都会触发不同的事件,处理好这些事件才可以完成漂亮的拖放. 被拖放元素触发的事件有: ondragstart:该事件在鼠标按住元素开始拖动时触发. ondragend:该事件在鼠标抬起时触发. ondrag:该事件在dragstart和dragend之间连续触发(即使鼠标不移动). 目标元素触发的事件有: ondrage…

HTML5自学笔记[ 3 ]表单验证反馈

表单控件对象的validity对象可以设置或返回相关的验证信息(在invalid事件处理中获取validity对象): 属性valid:为true所有验证通过,为False至少有一种验证失败. 属性valueMissing:表单控件输入值为空时,该属性值为true:不为空时该属性值为false. 属性typeMismatch:输入的内容不符合控件类型要求时,该属性为true,否则为false. 属性patternMismatch:输入的内容不匹配正则表达式时,该属性为true,否则为false.…

H5标签--“data自定义数据”

HTML代码部分: <div id="div1" data-zg="中国人" data-zgr="我们是祖国的儿女,我爱祖国">国庆节快乐我们爱祖国!!我们爱祖国!</div> JS代码部分: <script type="text/javascript"> var oDiv=document.getElementById('div1'); alert(oDiv.dataset.zg); al…

HTML5自学笔记[ 24 ]canvas绘图之星空草地

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background:#fff;} div{ width:800px; height:600px; margin:0 auto;} canvas{ background:#000;} </sty…

HTML5自学笔记[ 23 ]canvas绘图基础7

变换矩阵: transform(a,b,c,d,e,f),多次使用该函数,效果是多次状态改变的累加: setTransform(a,b,c,d,e,f),会忽略之前的变换,从起始状态开始改变.…

HTML5自学笔记[ 15 ]canvas绘图基础6

关于线条的一些属性: lineCap,这个属性表示的是线条两端的样式,值有butt(默认)/round/square. lineJoin,这个属性表示线条相交的方式,值有miter(默认)/bevel/round: miterLimit,该属性指定默认情况下lineJoin采用miter方式的极限值:比如,在上面的例子中,将miterLimit设置为1,那么第一个图的两条线的相交方式就会自动转变为bevel.…

HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>炫彩时钟</title> <style> body{ background:#000;} canvas{ background:#fff; } </style> <script src="countdown.js&qu…

HTML5自学笔记[ 17 ]canvas绘图基础4

绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘制后的图形大小. drawImage(oImg,x1,y1,w1,h1,x2,y2,w2,h2),该方法获取源图像的一部分进行绘制并且指定绘制起点和绘制后图像的大小,x1/y1/w1/h1表示选取源图上(x1,y1)点起宽w1高h1的部分,x2/y2/w2/h2表示将选取的部分绘制到画布(x2,y2…

HTML5自学笔记[ 16 ]canvas绘图基础3

canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量旋转:rotate(弧度),弧度=角度*Math.PI/180:注:多次旋转角度累加. 缩放:scale(x,y),x和y为水平和垂直方向的缩放比. 注意:scale缩放有个弊端,那就是即缩放宽高,又缩放边框的宽度,所有在使用时应该注意.…

HTML5自学笔记[ 15 ]canvas绘图实例之钟表

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas绘图小实例之方块移动</title> <style> body{ background:#000;} #canvas1{ margin:100px 500px; background:#fff;} #canvas1 span{ color:#fff;} </style…

HTML5自学笔记[ 14 ]canvas绘图基础2

canvas绘制路径不仅可以绘制直线和多边形,还提供了绘制曲线的方法,利用这些方法可以画出多种曲线效果. 方法1:arc(x,y,r,起始弧度,结束弧度,绘制方向);其中(x,y)为圆心坐标,r为半径,弧度计算公式:deg*Math.PI/180,绘制方向默认为false表示顺时针绘制 ,设置为true时,逆时针绘制. 例1,顺时针绘制0-90°圆弧: oContext.beginPath(); oContext.arc(300,300,200,0,90*Math.PI/180,false);…

HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动

HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas绘图小实例之鼠标画线</title> <style> body{ background:#000;} #canvas1{ margin:100px 500px; background:#fff;} #canvas1 span{ color:#fff;} </style…

HTML5自学笔记[ 8 ]历史管理

触发历史管理的三种方法: 跳转页面改变hash值 pushState(在服务器环境下运行) 用hash值来触发历史管理: <!doctype html> <html lang="en"> <head> <title>随机产生彩票号码</title> <meta charset="utf-8"/> <script> window.onload = function(){ var oI…

HTML5自学笔记[ 7 ]defer和async

defer:给位于最前面的script标签设置defer="defer",外联js就会在onload触发之前才加载. async:给script标签设置async="async",外联js就会进行异步加载,加载顺序不确定,有依赖关系的js就不要用了,和其他js没有依赖关系的js用这个属性可以提高加载速度.…

HTML5自学笔记[ 5 ]JSON的新方法

eval和JSON.parse的区别:eval:可以解析任何字符串为js:parse:只能解析JSON形式的字符串变为js(更安全). json格式的字符串中的属性名必须加双引号“”. stringify()方法将json对象转换成严格格式的json字符串. 兼容低版本浏览器:在页面中引入json2.js.…

HTML5自学笔记[ 4 ]js中新增的选择器方法

querySelector():参数与jQuery一样,这个方法获取一组元素中的第一个元素. querySelectorAll():获取一组元素. getElementsByClassName():获取一组class元素. 列表属性classList:返回类数组对象,包含元素所有的class:该对象包含length属性.add()方法.remove()方法和toggle()方法.…

HTML5自学笔记[ 2 ]新增表单控件和表单属性

新增<input>属性type="email",自动验证,若输入不为邮箱,则不能提交. 新增<input>属性type="tel",在移动端切换到数字键盘,其他无变化. 新增<input>属性type="url",自动验证,若输入不为url,则不能提交. 新增<input>属性type="search",输入框内显示删除文本按钮,其他无变化. 新增<input>属性t…

HTML5自学笔记[ 1 ]新增标签

新增语义化标签 <header></header>: 用于页面或板块头部. <footer></footer>:用于页面底部. <nav></nav>:导航. <hgroup></hgroup>:标题组合. <section></section>:一个板块或区块,用来划分区域. <article></article>:一般用来呈现论坛的一篇帖子. <asid…

【笔记】nrf52832广播使用--厂商自定义数据应用

需求: 1)使用蓝牙不停发送ble广播,发送自定义的数据,并每一秒更新自定义数据. 2)设置不同的发射功率.广播间隔.广播名称 1.初始化使用nordic官方sdk17版本,打开一个ble串口用例.首先在main函数初始化ble,这个sdk已经给我们准备好了. int main(void) { log_init(); timers_init(); flash_init(); buttons_leds_init(&erase_bonds); power_management_init(); //…

《Linux内核设计与实现》课本第三章自学笔记——20135203齐岳

<Linux内核设计与实现>课本第三章自学笔记进程管理 By20135203齐岳进程进程:处于执行期的程序.包括代码段和打开的文件.挂起的信号.内核内部数据.处理器状态一个或多个具有内存映射的内存地址空间或执行线程等其他资源. 线程:是在进程中活动的对象.每个线程都有一个独立的程序计数器.进程栈和一组进程寄存器.内核调度的对象是线程而非进程.操作系统中进程提供两种虚拟机制:虚拟存储器和虚拟内存. 程序:本身并不是进程,进程是处于执行期的程序以及相关的资源的总称.不同的进程可以执行同一个程…

【HTML5自学笔记[ 6 ]data自定义数据】的更多相关文章