Win10系列:JavaScript多媒体】的更多相关文章

一.前言 之前写了一篇文章:JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳 https://www.mwcxs.top/page/746.html 介绍了sleep函数和获取时间戳的方法.接下来我们来介绍数字格式化1234567890 --> 1,234,567,890 二.数字格式化 1234567890 --> 1,234,567,890 1.普通版 // 数字格式化 1234567890 --> 1,234,567,8…
在应用程序的日常使用中,经常会使用多媒体播放器来播放多媒体文件,包括视频.音频等,因此对于开发者来说,学习多媒体播放技术对开发应用是很有帮助的.本小节主要介绍如何使用HTML5和JavaScrip实现播放本地视频. 想要在应用程序中实现多媒体播放功能,需要使用video控件,下面简单介绍下video控件的几个常用属性: height 属性,用于设置播放器的高度. wide 属性,用于设置播放器的宽度. controls 属性,用于设置播放器的控制栏是否显示.当该属性的值为true时,表示显示控制…
在实际开发中经常会遇到访问文件的情况,因此学习与文件有关的操作对程序开发很有帮助,关于文件操作的一些基本技术,在前面章节中有专门基于C#语言的详细讲解,本节主要介绍如何使用HTML5和JavaScript开发具有文件操作功能的Windows应用商店应用,首先来了解一下用于对文件或文件夹进行操作的文件选取器. 19.4.1 文件选取器 正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存…
在项目中添加一个名为pages的文件夹,并在pages文件夹里面再添加一个名为mainPage的文件夹,接着在mainPage文件夹里添加一个"页面控制"项,命名为mainPage,添加完成之后会同时生成mainPage.html.mainPage.css和mainPage.js这三个文件. 这里将mainPage.html作为应用程序的主页面,打开mainPage.html文件,在body元素中添加一个div元素,并在元素内部添加一个h1元素和一个ListView控件,其中h1元素用…
上面几个小节讲解了使用HTML5和JavaScript语言开发Windows 应用商店应用时会用到的一些技术,本小节将前面介绍的知识融合在一起创建一个菜谱应用程序,帮助读者更进一步地理解和掌握这些知识. 此菜谱应用程序主要的功能是介绍一些菜肴和主食的做法,其中包含三个页面:第一个页面为主页面,用于按类别显示一些菜肴和主食:第二个页面为分类页面,显示某个类别的信息和属于该类别的菜肴或主食:第三个页面为菜肴页面,显示某项菜肴或主食的详细信息,如名称.图片和具体做法.这三个页面可以相互跳转,例如,在主…
在页面中添加canvas元素会在页面上生成一个矩形的位图画布,可以使用JavaScript在画布上实时绘制图形图像.在绘制图形时,需要先调用画布的getContext函数获取与该画布相关的用于绘制图形(如2D图形.3D图形)的对象,然后使用这个对象调用不同的图形函数来绘制相应的图形.下面分别介绍2D图形中几种常见图形的绘制方法. (1)直线 在绘制直线时,先使用moveTo(x,y)函数设置直线的起始点,参数x和y表示起始点的横坐标和纵坐标,以像素为单位,接着通过lineTo(x, y) 函数设…
上面介绍的动画效果是通过Windows动画库创建的,这里的旋转动画是通过设置页面元素的style对象的相关属性来创建,此动画的效果是将界面元素沿着指定的方向进行旋转.下面介绍style对象的几个常用属性. transitionProperty:获取或者设置相关元素的动画变换效果. transitionDuration:获取或者设置相关元素动画变换的时间. transformOrigin:获取或者设置相关元素动画变换的起始位置. transform:获取或者设置一个或者多个旋转函数,指定相关元素如…
"交叉进出"动画也是Windows动画库中的动画效果."交叉进出"动画的动画效果是在应用程序界面上隐藏一个元素并同时在相同位置显示另一个元素的时候,被隐藏的元素渐消失在应用程序界面上,而将要显示的元素渐显示在应用程序界面上. 创建"交叉进出"动画可以使用WinJS.UI.Animation.crossFade函数,该函数有两个Object类型的参数,第一个参数是将要显示的元素对象或元素对象数组,第二个参数是将要消失元素的元素对象或元素对象数组,下…
"重新定位"动画也是Windows动画库中的动画效果."重新定位"动画的动画效果是指一个或一组元素移动到新的位置时,这些元素不是突然出现在新的位置,而是从一个位置移动到另一个位置. 创建"重新定位"动画可以使用WinJS.UI.Animation.createRepositionAnimation函数,该函数有一个Object类型的参数,表示将要移动的元素对象或元素对象数组.下面以一个应用程序为例,来演示如何使用HTML5和JavaScript实…
在应用程序中使用动画会使应用显得更加生动,进而给用户带来良好的视觉效果.例如,当用户将某个项添加到列表时,新项不会立即出现在列表中,而是采用动画形式到达相应位置,并且列表中的其他项也采用动画形式移动到新位置,以便为添加的项腾出空间.这样的动画效果能够让用户更清晰地看到变化过程,而不是只能看到变化之后的结果. 应用程序的动画效果可以使用Windows动画库来创建,开发人员无需自己编写动画效果代码即可获得Metro风格的动画外观和效果.另外还可以通过设置页面元素的style对象的相关属性来创建.下面…
正如上面的内容中所提到的,文件保存选取器用于保存文件,通过Windows.Storage.Pickers命名空间中的FileSavePicker类的pickSaveFileAsync函数可以向指定的文件系统位置中保存一个文件.文件保存之后,还可以对其进行读写操作,如果是向文件中写入内容,可以使用Windows.Storage.FileIO类中的writeTextAsync(file, contents)函数或appendTextAsync(file,contents)函数来实现,参数file表示…
在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolders类的相应属性来实现,可用属性包括documentsLibrary(文档库).musicLibrary(音乐库)和videosLibrary(视频库)等.获取到用户库之后,就可以使用KnownFolders类中的getItemsAsync.getFilesAsync或getFoldersAsync函…
WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控件的方法相似:在页面中添加一个div元素,将div元素的data-win-control属性设置为WinJS.Binding.Template.定义WinJS库模板以后,需要在WinJS库模板内部添加控件以显示绑定的数据,WinJS库模板内部只能有一个根元素,当绑定多条数据时,需要在WinJS库模板…
使用数据绑定可以使页面中元素的属性值与数据源中的数据同步,其中数据源可以来自数据库.文件以及自定义的数据等.在常用的数据绑定方法中,简单对象绑定是将HTML元素与一个仅包含数据的简单对象相绑定,模板绑定是使用WinJS库模板来绑定数据.下面首先介绍简单对象绑定. 19.3.1 简单对象绑定 简单对象绑定是一种基本的绑定类型,可以实现将一个对象中的数据绑定到HTML元素的属性.下面通过一个示例来演示如何使用HTML5和JavaScript开发一个实现简单对象绑定的Windows应用商店应用程序.在…
页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用PageControlNavigator控件加载其他页面的内容.WinJS.Navigation.navigate函数以一个包含页面地址的对象为参数,在该函数执行时将触发WinJS.Navigation.onnavigated事件并把页面地址传递给该事件.PageControlNavigator控件…
页面导航是在开发应用的过程中使用频率较高的技术,其中比较常用的导航方式有多页导航和页内导航,采用多页导航方式的应用程序包含一系列的页面,在一个页面中加入另一个页面的链接地址后,单击链接将跳转到指定页面,从而实现页面之间的导航.而页内导航方式是在一个页面内根据需要加载其他页面,使用页内导航方式的应用程序仍然包含一系列的页面,不同的是,这些页面是顺序被加载到一个选定的页面区域中,而不是从一个页面跳转到另一个页面.在传统的网站开发中,通常使用多页导航的方式,在开发基于JavaScript的Window…
通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目,以及怎样向项目中添加功能实现代码. 首先启动Visual Studio 集成开发工具,打开"文件"菜单,选择其中的"新建项目"菜单项后会弹出"新建项目"窗口.在"新建项目"窗口左侧的JavaScript模板分类中选择"…
向页面中添加的控件可分为两种类型:标准的HTML控件和WinJS库控件.其中标准的HTML控件是指HTML标准中定义的基本控件,如按钮和复选框:WinJS库控件是为开发基于JavaScript 的Windows应用商店应用提供的新控件,如ListView.HtmlControl和PageControl等.下面首先介绍如何添加这两种类型的控件,然后介绍如何为控件注册事件处理函数和设计控件的样式. (1)添加标准的HTML控件 向页面中添加标准的HTML控件可以通过定义相应的HTML元素来实现.例如…
通过上面内容的学习,相信读者已经对各种项目模板和项模板有了大致的了解,本节将进一步介绍项目模板中默认包含的项目文件以及项模板文件,首先讲解这些文件中的初始内容以及作用,然后介绍在一个页面中如何添加控件,以及如何为控件注册事件处理函数并设计CSS样式. 1.项目模板中的默认文件 在每一个使用项目模板新建的JavaScript的Windows应用商店项目中,都会包含default.html.default.js和default.css三个文件.与其他几种项目模板相比,空白项目模板中的这三个文件仅包含…
使用Visual Studio 开发Windows应用商店应用时,通过其提供的模板可以帮助我们快速地创建一个应用.其中,在新建一个Windows应用商店应用程序项目时可以在项目模板中选择所需要的模板类型,然后在此基础上开发功能完善的应用:在项目中新建一个项目文件的时候,可以在项模板中选择所需要的文件类型,然后在这个文件内容的基础上编写新的内容.下面就来分别介绍Visual Studio 中提供的项目模板和项模板. 1. 适用于开发Windows应用商店应用的JavaScript项目模板 使用Ja…
WinJS 库是由 CSS 和 JavaScript 文件组成的.使用Visual Studio 2012新建一个JavaScript 的Windows应用商店的空白应用程序项目,在项目的引用管理器中会默认添加这个库,如图19-1所示: 图19-1 JavaScript 的 WinJS库 上图可以看出,WinJS库主要包含ui-dark.css.ui-light.css.base.js和ui.js四个文件.其中ui-dark.css和ui-light.css是JavaScript主题风格库,ui…
实现主页面和分类页面的之后,最后来看一下菜肴页面的实现,这个页面用于详细介绍某项菜肴或主食,如名称.图片和具体做法等.在pages文件夹里面添加一个名为foodDetail的文件夹,并在foodDetail文件夹里添加一个"页面控制"项,将其命名为foodDetail. 打开默认生成的foodDetail.html文件,向文件的body元素中添加一个div元素,在div元素内部添加一个button元素和一个h1元素,其中button元素是回退按钮,h1元素用于显示类别名称,接着再在此d…
实现主页面的功能之后,接下来实现分类页面.分类页面中显示一种菜肴类别的详细信息,包括类别名称.图片.描述信息以及属于该类别的一些菜肴.在pages文件夹中添加一个名为classDetail的文件夹,并在classDetail文件夹中添加一个"页面控制"项,将其命名为classDetail,与主页面一样,添加完成之后会默认生成classDetail.html.classDetail.js和classDetail.css这三个文件. 打开classDetail.html文件,在body元素…
我发现有个别字符被这个编辑器给刷掉了,但是灰色区域显示正常,以灰色区域代码为准 什么玩意? 在我刚开始学习编程的时候,就听过正则了,也听说正则很牛逼,懂正则的更牛逼.但是苦于没有人指点,也没有使用正则的场景,自己看教程又懵逼,直到现在,才发现了入门的诀窍. 在不同的编程语言中,正则表达式的写法会有所不同,这里我们讨论的是JavaScript正则写法. 学习正则,不要凭空想象,要使用开发工具去测试,推荐你使用在线正则测试网站:https://regex101.com,或者使用浏览器控制台. 最简单…
通过20.9.1小节中的代码和步骤编写了一个名为"FilePickerComponent"的WinRT组件,接下来将在上一小节所新建的项目基础上,继续介绍如何在不同的语言所编写的应用中调用这个WinRT组件. (1)JavaScript调用WinRT组件 在解决方案资源管理器中右键点击解决方案图标,选择添加一个JavaScript的Windows应用商店的空白应用程序项目,并命名为FileJS.接着右键点击FileJS项目的项目名,选择"添加引用",弹出"…
在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListView控件以网格或列表的方式显示多条数据.ListView控件的常用属性有: groupDataSource属性,用来设置分组的数据源. groupHeaderTemplate属性,用来为分组的头部设置模板. itemDataSource属性,用来为组中的数据项设置数据源. itemTemplate属性…
一.前言 有些东西很好用,但是你未必知道:有些东西你可能用过,但是你未必知道原理.实现一个目的有多种途径,俗话说,条条大路通罗马.发散一下大家的思维以及拓展一下知识面. 二.实现一个简短的sleep函数 sleep函数主要用来做延迟执行的,很多编程语言都有sleep函数,但是javascript没有这个函数,我们实现一下: 1.简单版本 function sleep(sleepTime){ for(var start = +new Date;+new Date - start<sleepTime…
Windows系列电脑安装office傻瓜式教程 一.    下载与安装 下载 (1).所需工具:迅雷 下载链接:http://xl9.xunlei.com/ 显示界面如下,点击“立即下载”即可,然后安装 迅雷安装只需一直点击下一步即可 (2).office安装包下载链接: (关于32位和64位版本,科普一下,查看方法:右键单击“我的电脑”,选择“属性”,方可查看你计算机的基本信息,系统类型/版本也在里面)贴图: 右键单击“我的电脑”,选择“属性” 进入计算机基本信息查看 自行查看系统类型,选择…
顺序执行? 如果要问到 JavaScript 代码执行顺序的话,想必写过 JavaScript 的开发者都会有个直观的印象,那就是顺序执行,毕竟: var foo = function () { console.log('foo1'); } foo(); // foo1 var foo = function () { console.log('foo2'); } foo(); // foo2 然而去看这段代码: function foo() { console.log('foo1'); } fo…
EllipseGeometry EllipseGeometry控件可以用于绘制椭圆,通过定义EllipseGeometry控件的Center属性确定椭圆的圆心坐标,使用此控件的RadiusX 和RadiusY属性分别定义椭圆X轴.Y轴的半径长度.下面将演示如何使用EllipseGeometry控件绘制一个椭圆. 在一个打开的Windows应用商店项目中新建一个空白页,并命名为EllipseGeometryPage,双击打开此页面的EllipseGeometryPage.xaml文件,在Grid元…