一、html5语义化
二、HTML5新特性
1、HTML5新特性的浏览器支持情况
http://www.caniuse.com/#index
2、新的选择器
querySelector 获取单个元素 如:
var obj = document . querySelector ( '.box' );
var obj1 = document . querySelector ( '#box' );
var obj2 = document . querySelector ( '[name="username"]);
querySelectorAll 获取多个元素集合 如:
var obj = document . querySelectorAll ( '.box' );
getElementsByClassName 获取class的元素集合
3、获取class列表属性 : 获取对象的className的集合
classList
length : class的长度
add() : 添加class方法
remove() : 删除class方法
toggle() : 切换class方法
如:
< div class = "a b" > div > alert ( document . querySelector ( '#div' ). classList ) //输出a b
4、data自定义数据
-dataset :是data-的集合
data-name : dataset.name data-name-first : dataset.nameFirst 如:
< div id = "box" data - name = "zhangsan" data - user - sex = "nan" > div >
var obj = document . querySelector ( '#box' );
console . log ( obj . dataset . name )
console . log ( obj . dataset . userSex )
-Data数据在jquery mobile中有着重要作用
5、JSON的新方法
-p arse() : 把字符串转成json, 类似eval()方法
字符串中的属性要严格的加上引号
-stringify() : 把json转化成字符串
会自动的把双引号加上
-新方法与eval的区别 :eval都能转换,是JSON.parse()只能转换json
-新方法的应用
深度克隆新对象 如:
//以往的方法
var a ={ "name" : "zhangsan" };
var b = a ;
b . name = "lisi" ;
alert ( a . name ); //lisi
//html5 -json新方法
var a ={ "name" : "zhangsan" };
var str = JSON . stringify ( a ); //转换成字符串
var b = JSON . parse ( str ); //转换成对象
b . name = "lisi" ;
alert ( a . name ); //zhangsan
http://www.json.org/去下载json2.js
6、延迟加载JS
很多浏览器都采用了并行加载JS,但还是会影响其他内容
defer : 延迟加载,会按顺序执行,在onload执行前被触发(或者简单理解为是在页面加载完时执行,会按顺序) async : 异步加载,加载完就触发,有顺序问题(并行加载,而且不会按照顺序加载) 如:
< script src = "a.js" defer > script >
Labjs库:(第三方插件:最大化提高性能,即能异步,也能延迟)
如:labjs.com/documentation.php
labjs中wait()等待前面的加载完才执行
< script >
$LSB
. script ( 'a.js' )
. script ( 'b.js' )
. script ( 'c.js' ). wait ()
. script ( 'd.js' ). wait ();
script >
seaJs,requireJs框架集成了延迟和异步加载
7、历史管理
onhashchange
:改变hash值来管理 如:改变hash方法 window.location.hash=”cont”;
监听hash根据hash改变现实内容: html5事件 onhashchange 案例:
< ul class = "nav" >
< li data - hash = "index" >首页 li >
< li data - hash = "news" >新闻 li >
< li data - hash = "sports" >体育 li >
< /ul>
首页内容
div >
< div data - content = "news" >新闻内容 div >
< div data - content = "sports" >体育内容 div >
< /div>
/ /知识点 querySelector querySelectorAll 选择器
//substring截取字符串
//onhashchange html5的监听事件
window . onload = function (){
var oLi = document . querySelectorAll ( 'li' );
var oCont = document . querySelector ( '.cont' ). querySelectorAll ( 'div' );
for ( var i = 0 ; i < oLi . length ; i ++) {
oLi [ i ]. onclick = function (){
window . location . hash = this . dataset . hash ;
}
};
function changeCont (){ //根据hash改变内容
var hash = window . location . hash . substring ( 1 );
for ( var i = 0 ; i < oCont . length ; i ++){
if ( hash == oCont [ i ]. dataset . content ){
oCont [ i ]. style . display = "block" ;
} else {
oCont [ i ]. style . display = "none" ;
}
}
}
changeCont ();
window . onhashchange = function (){
changeCont ();
}
}
history :
服务器下运行
pushState : 三个参数 :数据 标题(都没实现) 地址(可选)
popstate事件 : 读取数据 event.state
注意:网址是虚假的,需在服务器指定对应页面,不然刷新找不到页面
案例:
< ul class = "nav" >
< li data - hash = "index" >首页 li >
< li data - hash = "news" >新闻 li >
< li data - hash = "sports" >体育 li >
< /ul>
首页内容
div >
< div data - content = "news" >新闻内容 div >
< div data - content = "sports" >体育内容 div >
< /div>
window.οnlοad=function(){
var oLi=document.querySelectorAll('li');
var oCont=document.querySelector('.cont').querySelectorAll('div');
var iNow=0;
for (var i = 0; i < oLi.length; i++) {
oLi[i].οnclick=function(){
var hash=this.dataset.hash;
history.pushState(hash,'',iNow++);/ /第二个参数是标题很多浏览器没实现便可不写,加上第三个参数便可以改变网址,但是是虚假的网址刷新就没有了,所以得配合后端使用
changeCont ( hash );
}
};
function changeCont ( hash ){ //根据hash改变内容
for ( var i = 0 ; i < oCont . length ; i ++){
if ( hash == oCont [ i ]. dataset . content ){
oCont [ i ]. style . display = "block" ;
} else {
oCont [ i ]. style . display = "none" ;
}
}
}
window . onpopstate = function ( ev ){
console . log ( 1 );
changeCont ( event . state );
}
}
script >
8、拖放事件
draggable :
设置为true,元素就可以拖拽了 (如单独设置draggable为true,前台拖拽的时候只是有拖拽的拖影,而不是整个元素都能拖动)
拖拽元素事件 :
事件对象为被拖拽元素(在给元素绑定拖拽事件时,必须得给元素设置draggable=”true”属性)
dragstart , 拖拽前触发
drag ,拖拽前、拖拽结束之间,连续触发
dragend , 拖拽结束触发
案例:
< style >
# box { height : 100px ; width : 100px ; border : 1px solid # 999 ;}
< /style>
div >
< script >
window . onload = function (){
var oDrag = document . querySelector ( '#box' );
oDrag . ondragstart = function (){
console . log ( "拖拽前" );
}
oDrag . ondrag = function (){
console . log ( "拖拽进行中" );
}
oDrag . ondragend = function (){
console . log ( "结束" );
}
}
script >
目标元素事件 :
事件对象为目标元素(目标元素通常是被拖拽元素,碰撞到最终的元素,如拖拽上传,上传框就是目标元素)
dragenter , 进入目标元素触发,相当于mouseover (元素进入不会触发,一定是鼠标进入才触发)
dragover ,进入目标、离开目标之间,连续触发
dragleave , 离开目标元素触发,相当于mouseout
drop , 在目标元素上释放鼠标触发 (需要在dragover事件中设置阻止默认事件,不然拖动的时候鼠标移至都是禁止的状态,就无法释放,也就不能触发drop事件)
案例:
< style >
# box ,# mubiao { height : 100px ; width : 100px ; border : 1px solid # 999 ;}
< /style>
div >
< div id = "mubiao" > div >
< script >
window . onload = function (){
var index = 0 ;
var oMubiao = document . querySelector ( '#mubiao' );
oMubiao . ondragenter = function (){
this . style . background = "#000" ;
}
oMubiao . ondragleave = function (){
this . style . background = "#999" ;
}
oMubiao . ondragover = function ( ev ){
ev . preventDefault ();
console . log ( index ++);
}
oMubiao . ondrop = function (){
alert ( "鼠标放开了" );
}
}
script >
事件的执行顺序 :drop不触发的时候 dragstart > drag > dragenter > dragover > dragleave > dragend 事件的执行顺序 :drop触发的时候(dragover的时候阻止默认事件) dragstart > drag > dragenter > dragover > drop > dragend 不能释放的光标和能释放的光标不一样,需要触发drop释放事件,在上例中
解决火狐下的问题
(火狐不设置的话只支持dragstart事件其他都不支持)
必须设置dataTransfer对象才可以拖拽除图片外的其他标签 案例:如在dragstart的event对象中设置dataTransfer.setData 设置一个参数 dataTransfer对象 (属于event事件对象)
setData() : 设置数据 key和value(必须是字符串)
getData() : 获取数据,根据key值,获取对应的value
effectAllowed
effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
三个参数:指定的元素,坐标X,坐标Y
获取外部拖拽的文件,返回一个filesList列表 filesList下有个type属性,返回文件的类型
关于:setDate,getDate,effectAllowed,setDragImage的案例
< style >
# box ,# mubiao { height : 100px ; width : 100px ; border : 1px solid # 999 ;}
< /style>
div >
< div id = "mubiao" > div >
< img id = "img" src = "http://www.baidu.com/img/bd_logo1.png" alt = "" >
< script >
window . onload = function (){
var index = 0 ;
var oDrag = document . querySelector ( '#box' );
var oMubiao = document . querySelector ( '#mubiao' );
oDrag . ondragstart = function ( ev ){
var oImg = document . querySelector ( '#img' );
console . log ( "拖拽前" );
ev . dataTransfer . setData ( 'name' , 'demo' );
ev . dataTransfer . effectAllowed = "link" ;
ev . dataTransfer . setDragImage ( this , 50 , 50 );
//此处this可以是其他对象,也可以试图片对象比如换
//ev.dataTransfer.setDragImage(oImg,50,50);
// 扩展拖拽排序,百度音乐播放器,拖拽排列歌曲列表
}
oDrag . ondrag = function (){
console . log ( "拖拽进行中" );
}
oDrag . ondragend = function (){
console . log ( "结束" );
}
oMubiao . ondragenter = function (){
this . style . background = "#000" ;
}
oMubiao . ondragleave = function (){
this . style . background = "#999" ;
}
oMubiao . ondragover = function ( ev ){
ev . preventDefault ();
console . log ( index ++);
}
oMubiao . ondrop = function ( ev ){
alert ( ev . dataTransfer . getData ( 'name' ));
}
}
script >
关于:files的案例
< style >
# mubiao { height : 200px ; width : 200px ; border : 1px solid # 999 ;}
< /style>
div >
< script >
window . onload = function (){
var oMubiao = document . querySelector ( '#mubiao' );
oMubiao . ondragenter = function (){
this . innerHTML = '可以释放啦' ;
}
oMubiao . ondragleave = function ( ev ){
this . innerHTML = '请在此区域释放鼠标' ;
}
oMubiao . ondragover = function ( ev ){
ev . preventDefault ();
}
oMubiao . ondrop = function ( ev ){
ev . preventDefault ();
console . log ( ev . dataTransfer . files [ 0 ]. type )
}
}
script >
9、FileReader(读取文件信息)
readAsDataURL
参数为要读取的文件对象,将文件读取为DataUrl
onload
当读取文件成功完成的时候触发此事件 this. result , 来获取读取的文件数据,如果是图片,将返回base64格式的图片数据
实例 拖拽删除列表 拖拽购物车 上传图片预览功能 简单案例:
< style >
# mubiao { height : 200px ; width : 200px ; border : 1px solid # 999 ;}
< /style>
div >
< img src = "" id = "img" alt = "" >
< script >
window . onload = function (){
var oImg = document . querySelector ( '#img' );
var oMubiao = document . querySelector ( '#mubiao' );
oMubiao . ondragenter = function (){
this . innerHTML = '可以释放啦' ;
}
oMubiao . ondragleave = function ( ev ){
this . innerHTML = '请在此区域释放鼠标' ;
}
oMubiao . ondragover = function ( ev ){
ev . preventDefault ();
}
oMubiao . ondrop = function ( ev ){
ev . preventDefault ();
var fs = ev . dataTransfer . files ; //获取文件对象
console . dir ( fs [ 0 ]);
var fr = new FileReader (); //实例化读取文件信息对象
fr . readAsDataURL ( fs [ 0 ]); //将文件读取为dataUrl格式
fr . onload = function (){ //读取文件成功后事件
//alert(this.result);
oImg . src = this . result ; //假如上传的是图片可以复制给一个图片对象
}
}
}
script >
10、可做练习:
理解新的选择器
获取class列表属性
Json的新方法
data自定义数据
延迟加载JS
历史管理
拖放事件
一些可能感兴趣的资源:
http://ued.baidu.com/?p=894
http://www.caniuse.com
你可能感兴趣的:(html5)
DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理
STU学生网页设计
网页设计 期末网页作业 html静态网页 html5期末大作业 网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
二挡起步
web前端期末大作业 javascript html css 旅游 风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动
二挡起步
web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线
h5小游戏定制开发
红匣子实力推荐
随着科技的不断发展,移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下,H5小游戏应运而生,为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式,正逐渐受到市场的关注和青睐。那么,什么是H5小游戏定制开发呢?它又具有哪些特点和优势呢?让我们一起来深入了解一下。首先,我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏,可以在移动端、PC端等多平台
HTML5概述
WFIT~SKY
Web前端 html5 前端 html
1.HTML概述1.1HTML定义HTML超文本标记语言,其中超文本是链接,标记也叫标签(即带尖括号的文本)。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html:整个网页head:网页头部,存放给浏览器看的代码,例如CSSbody:网页主体,存放给用户看的代码,例如文字、图片title:网页标题1.3HTML关系父子关系(嵌套)兄弟关系(并列)2.HTML开发环境2.1
HTML添加文字
若无心_.
HTML html5
一、创建HTML5文档基本标签//定义文档类型//定义HTML文档//定义关于文档的信息文档标题//定义文档的标题//定义文档的字符编码//定义文档的主体二、文字相关标签1.标题文字-标签可定义标题。定义最大的标题。定义最小的标题。Document这是标题1这是标题2这是标题3这是标题4这是标题5这是标题62.文本段落Document这次会晤的主题是“金砖国家在非洲:在第四次工业革命中共谋包容增长
【拖拽】自定义拖拽图标
风露_
一、知识点设置被拖拽的元素draggable为true(HTML5新特性)关键方法:voiddataTransfer.setDragImage(img,xOffset,yOffset);注意点:Note:Ifthe[Element]isanexisting[HTMLElement],itneedstobevisibleintheviewportinordertobeshownasadragfeed
Cocos2d、Cocos2dx、Cocos Creator、Cocos Studio的区别
Thomas游戏圈
一、Cocos2d和Cocos2dx的区别【开发语言】:Cocos2d是Object-C写的,Cocos2dx是C++写的,支持使用C++、Lua或Java进行开发。【运行平台】:Cocos2d只能在IOS下运行,Cocos2dx是跨平台的,适配iOS、Android、HTML5、Windows和Mac系统,功能侧重于原生移动平台。点击链接加入群聊【Unity/Cocos交流群】【国籍】:Coco
web前端达到什么水平,才能找到工作?
cj瑾瑜
前端 html javascript css css3
一、前端是什么?前端即网站前台部分,也叫前端开发,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。(核心技术:HTML、CSS、JavaScript)核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时,HTML将元素进行定义
HTML5(六)canvas 矩形、路径、画板功能
祝名
一.绘制矩形1.什么是canvascanvas标签相当于一个画板;canvas的宽高不要用css去定义,直接在标签中用属性写;2.obj=c.getContext('2d');获得2d绘画环境(相当于铺了一层画布)绘画图像的操作都会在obj这个绘画环境中存储;3.绘画方法及样式x,y为坐标样例:二.canvas路径1.方法2.样例cv.lineJoin='round';//边界类型为弧形三.画板功
HTML5中的数据存储sessionStorage、localStorage
阿立聊代码
HTML实战 html5 前端 html
第8章HTML5中的数据存储之前通常使用Cookie存储机制将数据保存在用户的客户端。H5增加了两种全新的数据存储方式:WebStroage和WebSQLDatabase.前者用于临时或永久保存客户端少量数据,后者是客户端本地化的一套数据库系统。8.1WebStorage存储简介WebStorageAPI分为会话数据和长期数据,相应的API分为两类:sessionStorage(保存会话数据)lo
html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法
RemusrickCat
本文实例为大家全面的解析了Bootstrap中Carousel的使用方法,供大家参考,具体内容如下源码文件:Carousel.scssCarousel.js实现原理:隐藏所有要显示的元素,然后指定当前要显示的为block,宽、高自适应源码分析:1、Html结构:主要分为以四个部分1.1、容器:最外层div,需要一个data-ride=”carousel”来指定为轮播放插件,并且提供一个Id,方便圆
【Web前端技术 02】深入探索HTML5:标签全解析与案例演示!
wcyd
Web前端技术 前端 html5 html
深入探索HTML5:标签全解析与案例演示!大家好!在上一篇文章中,我们对HTML5有了一个基本的了解。今天,我们将更深入地探索HTML5,全面介绍各种标签及其应用。从基础标签到新增标签,从文档结构到格式标签,我们将一一解析,并提供丰富的案例演示。准备好了吗?让我们开始吧!️HTML5基础结构首先,让我们回顾一下HTML5的基本结构。HTML5文档的结构就像一座房子的蓝图,指导我们如何构建网页。下面
HTML5中`<span>`标签深入解析
软考鸭
html5 html5 前端 html
引言在HTML5中,标签是一个行内元素,用于对文档中的一小部分文本或内容进行分组,以便于应用CSS样式或JavaScript脚本。与块级元素(如)不同,不会打断文本的流动,而是与其内容一起在同一行内显示。本文将深入解析标签的定义、用法、属性以及在实际开发中的应用。定义与用法标签是一个无语义的行内容器,用于包裹文档中的一部分内容,而不改变文档的结构。它通常与CSS和JavaScript结合使用,以实
HTML5 `<button>` 标签深入全面解析
软考鸭
html5 html5 前端 html
引言在HTML5中,标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一。与相比,标签提供了更多的灵活性和样式化的可能性。本文将深入解析HTML5中的标签,详细介绍其属性、样式以及实际应用。标签的基本用法标签内部可以放置内容,如文本、图像或其他HTML元素。这使得标签比更加灵活。点击我在这个简单的例子中,我们创建了一个普通的按钮,其上的文本是“点击我”。标签的属性标签支持多种属性,用于定
HTML5之基础、元信息标签
Programmer.杨
前端技术-HTML html meta head title 标签
标签声明位于文档中最前面的位置,处于标签之前。声明不是一个HTML标签,它是告知Web浏览器该页面使用了哪种HTML版本(规范),浏览器用此版本(规范)对该文档进行解析,渲染。可声明的DTD有三种:分别是严格版本(strict)、过渡版本(transitional)、以及基于框架的版本(frameset),若文档不遵循其DTD规范,则此文档中的代码不但不能通过代码校验,并且有可能无法正常显示。文档
HTML5中`<ul>`标签深入全面解析
软考鸭
html5 html5 前端 html
在HTML5的广阔天地里,标签作为无序列表的代言人,扮演着举足轻重的角色。它不仅能够整洁地罗列信息,还通过丰富的属性和样式选项,为网页设计师提供了无限的创意空间。本文将深入剖析标签的内核,详细解读其属性与样式,助力你打造更加精致、功能强大的网页。一、标签基础概览,即UnorderedList(无序列表)的缩写,用于在网页中展示一系列无特定顺序的项目。每个项目由(ListItem,列表项)标签包裹,
HTML5全面知识点
A_cot
html html5 前端框架 前端
HTML(HyperTextMarkupLanguage)是构建网页的基础语言。以下是全面的HTML知识点:一、HTML基础概念定义:HTML是一种用于描述网页结构的标记语言,通过各种标签来定义网页的内容和布局。版本历史:从HTML的早期版本发展到现在的HTML5,功能不断增强,支持更多的多媒体和交互特性。二、HTML文档结构声明:用于告诉浏览器文档类型是HTML5。标签:整个HTML文档的根元素
python提取数据库数据到前端html5显示_python html提取数据库数据
weixin_39878745
python开源工具列表【持续更新】以下是个人在工作中整理的一些pythonwheel,供参考。这个列表包含与网页抓取和数据处理的Python库网络通用urllib-网络库(stdlib)。requests-网络库。grab–网络库(基于pycurl)。pycurl–网络库(绑定libcurl)。urllib3–...文章武耀文2018-04-253128浏览量8个用于业余项目的优秀Python库
掌财社:在html5中使用video进行全屏播放与自动播放的代码方法总结!
weixin_45378258
HTML
今天由于在之前小编在项目中遇到的有关于:“在html5中使用video进行全屏播放与自动播放的代码方法总结!”这方面的内容,所以今天就来和大家分享有关于这方面的相关内容!近期开始开发公司新版官网,首页顶部(header)是一个全屏播放的小视频,现简单总结如下:页面代码:其中php简单判断了一下是否是移动设备,移动设备不展示视频(如果移动端展示的话,需要解决iOS上无法自动播放的问题):ps:如果H
Vue中使用pdfJs预览PDF、图片
viceen
vue3+ts-运维 vue项目-运维 vue.js html html5
Vue中使用pdfJs预览PDF、图片pdf.js是一个使用HTML5构建的可移植文档格式库。它可以帮助我们在浏览器中构建pdf文档,实现在线查看pdf文件的功能。实现步骤如下:1.下载pdfJs到本地(官网下载地址),放到项目根目录下的静态资源目录static文件夹内,将文件命名为pdfJs。如下图使用iframe打开或者需要注意的是:file参数中默认只允许传简单路径比如:http://www
【WebKit深度解析】HTML5支持全景与实践指南
2401_85812026
webkit html5 前端
标题:【WebKit深度解析】HTML5支持全景与实践指南WebKit作为许多现代浏览器的核心技术,对HTML5的支持程度直接关系到Web应用的性能和体验。HTML5是构建现代Web应用的基石,提供了丰富的特性和API。本文将深入探讨WebKit对HTML5的支持程度,并通过实际代码示例,展示如何在WebKit浏览器上充分利用HTML5的强大功能。1.WebKit与HTML5概述WebKit是一个
HTML5 <video>常用属性、时间、方法及基础使用说明
Wu Youlu
java 前端 javascript
简介HTML元素用于在文档中嵌入媒体播放器,用于支持文档内的视频播放。标签也可用于播放音频,但播放音频用更加适合。元素支持三种视频格式:MP4,WebM,和Ogg:MP4=带有H.264视频编码和AAC音频编码的MPEG4文件WebM=带有VP8视频编码和Vorbis音频编码的WebM文件Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件基础写法Yourbrowserdoesnot
WebAPI DOM文档对象模型
znhyXYG
javascript 前端 开发语言
DOM(文档对象模型)是一个可以改变网页内容、结构、样式的处理可扩展标记语言的接口一、获取元素方法:1、根据ID获取2、根据标签名获取3、根据类名获取(html5新增)4、querySelector获取(html5新增)5、querySelectorAll获取(html5新增)6、获取特殊元素(body、html)ID获取方法:document.getElementById(); 2019-9-9
使用fabric.js简简单单实现一个画板
小草先森tyro
前端
什么是fabricfabric是一个功能强大的JavaScript库,运行在HTML5canvas上。fabric为canvas提供了一个交互式对象模型,以及一个svg-to-canvas解析器。与canvas的区别来一个简单的例子来说明一下fabric与canvas的区别,假设我们想在一个画布上画一个红色的矩形://原生canvasapi//有一个id是c的canvas元素varcanvasEl
探索 Fabric.js:前端开发的轻量级图形编辑框架
滑辰煦Marc
探索Fabric.js:前端开发的轻量级图形编辑框架是一个强大的、基于WebGL和SVG的JavaScript图形库,专为构建交互式图形界面而设计。它提供了一种简单的方式来在网页上创建和操纵矢量对象,包括文本、形状、图像等,并且具有丰富的可定制性和性能优化。项目简介Fabric.js提供了一个统一的对象模型,使得处理HTML5canvas上的元素变得异常简单。无论是创建复杂的绘图应用,还是实现动态
用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码
天眼查
用html写出生日蛋糕
.birthday.container{width:600px;height:600px;margin:0pxauto;background:#fafafa;border-radius:5px;position:relative;}/****顶层的**/.birthday.top-one{position:absolute;width:280px;height:280px;bottom:200px
HTML5生日祝福蛋糕页面(生日蛋糕树) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心
@秋天的笔记
生日祝福网页html 520情人节告白网页制作 七夕情人节表白网页源代码 HTML5七夕情人节动画网页 HTML生日快乐代码 3D旋转电子相册
HTML5七夕情人节表白网页❤生日蛋糕(蛋糕树)❤HTML+CSS+JS求婚html生日快乐祝福代码网页520情人节告白代码程序员表白源码抖音3D旋转相册js烟花代码css爱心表白这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站,可以任意修改和使用,源码已上传,演示网址如下。文章末尾-已经附上源码下载地址作者主页-更多源码1
记录-小程序720°VR(跳转H5页面实现)
久违的小技巧
小程序 小程序 vr javascript
全景浏览提前准备1拍照支架/照片合成软件(KolorAutopanoGiga4.0)或者全景相机2pannellum(pannellum是一个轻量级、免费和开源的Web全景查看器。它使用HTML5、CSS3、JavaScript和WebGL构建,没有插件。)3H5页面引入pannellum.js/css文件,swiper/jquery文件(因为需要在全景图底部显示可切换图片,与dom操作/ajax
HTML5与CSS3
Mousse.-
html css 前端 html5 css3
HTML部分##什么是网页:1.网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。2.网页是网站中的一“页”,通常是HTML格式的文件,它要通过浏览器来阅读。##网页的组成:1.网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以.htm或.html后缀结尾的文件,因此将其俗称为HTML文件。##什么是HTML:1
log4j对象改变日志级别
3213213333332132
java log4j level log4j对象名称 日志级别
log4j对象改变日志级别可批量的改变所有级别,或是根据条件改变日志级别。
log4j配置文件:
log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION
#log4j.appender.FILE=org.apache.log4j.RollingFileAppender
log4j.appender.FILE=org.apache.l
elk+redis 搭建nginx日志分析平台
ronin47
elasticsearch kibana logstash
elk+redis 搭建nginx日志分析平台
logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢?首先,架构方面,nginx是有日志文件的,它的每个请求的状态等都有日志文件进行记录。其次,需要有个队 列,redis的l
Yii2设置时区
dcj3sjt126com
PHP timezone yii2
时区这东西,在开发的时候,你说重要吧,也还好,毕竟没它也能正常运行,你说不重要吧,那就纠结了。特别是linux系统,都TMD差上几小时,你能不痛苦吗?win还好一点。有一些常规方法,是大家目前都在采用的1、php.ini中的设置,这个就不谈了,2、程序中公用文件里设置,date_default_timezone_set一下时区3、或者。。。自己写时间处理函数,在遇到时间的时候,用这个函数处理(比较
js实现前台动态添加文本框,后台获取文本框内容
171815164
文本框
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
持续集成工具
g21121
持续集成
持续集成是什么?我们为什么需要持续集成?持续集成带来的好处是什么?什么样的项目需要持续集成?... 持续集成(Continuous integration ,简称CI),所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行
数据结构哈希表(hash)总结
永夜-极光
数据结构
1.什么是hash
来源于百度百科:
Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入,通过散列算法,变换成固定长度的输出,该输出就是散列值。这种转换是一种压缩映射,也就是,散列值的空间通常远小于输入的空间,不同的输入可能会散列成相同的输出,所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。
乱七八糟
程序员是怎么炼成的
eclipse中的jvm字节码查看插件地址:
http://andrei.gmxhome.de/eclipse/
安装该地址的outline 插件 后重启,打开window下的view下的bytecode视图
http://andrei.gmxhome.de/eclipse/
jvm博客:
http://yunshen0909.iteye.com/blog/2
职场人伤害了“上司” 怎样弥补
aijuans
职场
由于工作中的失误,或者平时不注意自己的言行“伤害”、“得罪”了自己的上司,怎么办呢?
在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议:
一、利用一些轻松的场合表示对他的尊重
即使是开明的上司也很注重自己的权威,都希望得到下属的尊重,所以当你与上司冲突后,最好让不愉快成为过去,你不妨在一些轻松的场合,比如会餐、联谊活动等,向上司问个好,敬下酒,表示你对对方的尊重,
深入浅出url编码
antonyup_2006
应用服务器 浏览器 servlet weblogic IE
出处:http://blog.csdn.net/yzhz 杨争
http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx
一、问题:
编码问题是JAVA初学者在web开发过程中经常会遇到问题,网上也有大量相关的
建表后创建表的约束关系和增加表的字段
百合不是茶
标的约束关系 增加表的字段
下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式
1,增加字段(student表中增加 姓名字段)
alter table 增加字段的表名 add 增加的字段名 增加字段的数据类型
alter table student add name varchar2(10);
&nb
Uploadify 3.2 参数属性、事件、方法函数详解
bijian1013
JavaScript uploadify
一.属性
属性名称
默认值
说明
auto
true
设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传。
buttonClass
”
按钮样式
buttonCursor
‘hand’
鼠标指针悬停在按钮上的样子
buttonImage
null
浏览按钮的图片的路
精通Oracle10编程SQL(16)使用LOB对象
bijian1013
oracle 数据库 plsql
/*
*使用LOB对象
*/
--LOB(Large Object)是专门用于处理大对象的一种数据类型,其所存放的数据长度可以达到4G字节
--CLOB/NCLOB用于存储大批量字符数据,BLOB用于存储大批量二进制数据,而BFILE则存储着指向OS文件的指针
/*
*综合实例
*/
--建立表空间
--#指定区尺寸为128k,如不指定,区尺寸默认为64k
CR
【Resin一】Resin服务器部署web应用
bit1129
resin
工作中,在Resin服务器上部署web应用,通常有如下三种方式:
配置多个web-app
配置多个http id
为每个应用配置一个propeties、xml以及sh脚本文件
配置多个web-app
在resin.xml中,可以为一个host配置多个web-app
<cluster id="app&q
red5简介及基础知识
白糖_
基础
简介
Red5的主要功能和Macromedia公司的FMS类似,提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写,使用RTMP作为流媒体传输协议,这与FMS完全兼容。它具有流化FLV、MP3文件,实时录制客户端流为FLV文件,共享对象,实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正
angular.fromJson
boyitech
AngularJS AngularJS 官方API AngularJS API
angular.fromJson 描述: 把Json字符串转为对象 使用方法: angular.fromJson(json); 参数详解: Param Type Details json
string
JSON 字符串 返回值: 对象, 数组, 字符串 或者是一个数字 示例:
<!DOCTYPE HTML>
<h
java-颠倒一个句子中的词的顺序。比如: I am a student颠倒后变成:student a am I
bylijinnan
java
public class ReverseWords {
/**
* 题目:颠倒一个句子中的词的顺序。比如: I am a student颠倒后变成:student a am I.词以空格分隔。
* 要求:
* 1.实现速度最快,移动最少
* 2.不能使用String的方法如split,indexOf等等。
* 解答:两次翻转。
*/
publ
web实时通讯
Chen.H
Web 浏览器 socket 脚本
关于web实时通讯,做一些监控软件。
由web服务器组件从消息服务器订阅实时数据,并建立消息服务器到所述web服务器之间的连接,web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接,建立web浏览器与web服务器之间的持久连接;利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新,建立一条从消息服务器到web浏览器页面之间的消息通路
[基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗?
comsci
生物
大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思
如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢?
oracle 外部表
daizj
oracle 外部表 external tables
oracle外部表是只允许只读访问,不能进行DML操作,不能创建索引,可以对外部表进行的查询,连接,排序,创建视图和创建同义词操作。
you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho
aop相关的概念及配置
daysinsun
AOP
切面(Aspect):
通常在目标方法执行前后需要执行的方法(如事务、日志、权限),这些方法我们封装到一个类里面,这个类就叫切面。
连接点(joinpoint)
spring里面的连接点指需要切入的方法,通常这个joinpoint可以作为一个参数传入到切面的方法里面(非常有用的一个东西)。
通知(Advice)
通知就是切面里面方法的具体实现,分为前置、后置、最终、异常环
初一上学期难记忆单词背诵第二课
dcj3sjt126com
english word
middle 中间的,中级的
well 喔,那么;好吧
phone 电话,电话机
policeman 警察
ask 问
take 拿到;带到
address 地址
glad 高兴的,乐意的
why 为什么
China 中国
family 家庭
grandmother (外)祖母
grandfather (外)祖父
wife 妻子
husband 丈夫
da
Linux日志分析常用命令
dcj3sjt126com
linux log
1.查看文件内容
cat
-n 显示行号 2.分页显示
more
Enter 显示下一行
空格 显示下一页
F 显示下一屏
B 显示上一屏
less
/get 查询"get"字符串并高亮显示 3.显示文件尾
tail
-f 不退出持续显示
-n 显示文件最后n行 4.显示头文件
head
-n 显示文件开始n行 5.内容排序
sort
-n 按照
JSONP 原理分析
fantasy2005
JavaScript jsonp jsonp 跨域
转自 http://www.nowamagic.net/librarys/veda/detail/224
JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的
使用connect by进行级联查询
234390216
oracle 查询 父子 Connect by 级联
使用connect by进行级联查询
connect by可以用于级联查询,常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。
来看一个示例,现假设我们拥有一个菜单表t_menu,其中只有三个字段:
一个不错的能将HTML表格导出为excel,pdf等的jquery插件
jackyrong
jquery插件
发现一个老外写的不错的jquery插件,可以实现将HTML
表格导出为excel,pdf等格式,
地址在:
https://github.com/kayalshri/
下面看个例子,实现导出表格到excel,pdf
<html>
<head>
<title>Export html table to excel an
UI设计中我们为什么需要设计动效
lampcy
UI UI设计
关于Unity3D中的Shader的知识
首先先解释下Unity3D的Shader,Unity里面的Shaders是使用一种叫ShaderLab的语言编写的,它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader,都是指用ShaderLab编写的代码,
如何禁止页面缓存
nannan408
html jsp cache
禁止页面使用缓存~
------------------------------------------------
jsp:页面no cache:
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cach
以代码的方式管理quartz定时任务的暂停、重启、删除、添加等
Everyday都不同
定时任务管理 spring-quartz
【前言】在项目的管理功能中,对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了,因为如果要控制定时任务的 “暂停” 呢?暂停之后又要在某个时间点 “重启” 该定时任务呢?或者说直接 “删除” 该定时任务呢?要改变某定时任务的触发时间呢? “添加” 一个定时任务对于系统的使用者而言,是不太现实的,因为一个定时任务的处理逻辑他是不
EXT实例
tntxia
ext
(1) 增加一个按钮
JSP:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
Stri
数学学习在计算机研究领域的作用和重要性
xjnine
Math
最近一直有师弟师妹和朋友问我数学和研究的关系,研一要去学什么数学课。毕竟在清华,衡量一个研究生最重要的指标之一就是paper,而没有数学,是肯定上不了世界顶级的期刊和会议的,这在计算机学界尤其重要!你会发现,不论哪个领域有价值的东西,都一定离不开数学!在这样一个信息时代,当google已经让世界没有秘密的时候,一种卓越的数学思维,绝对可以成为你的核心竞争力. 无奈本人实在见地