首页 / JAVASCRIPT / JavaScript使用DeviceOne开发实战（四）仿优酷视频应用

JavaScript使用DeviceOne开发实战（四）仿优酷视频应用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript使用DeviceOne开发实战（四）仿优酷视频应用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6316字，纯文字阅读大概需要10分钟。

内容图文

大家没有进行开发之前首先需要考虑系统的差异性，比如说IOS手机有没有回退键，所以在开发时一定要考虑二级解密需要有回退键，否则ios的手机就会陷入到这个页面回不去。

安卓系统有回退键，针对这个情况需要要求用户在3秒钟之内连续按回退键两次才退出系统，以此防止用户误按回退键，具体代码实现如下：

[mw_shl_code=javascript,true]page.on("back", function(){
 if (canBack) {
 global.exit();
 } else {
 nf.toast("再按一次退出优酷");
 canBack = true;
 delay3.start();
 }
});
var delay3 = mm("do_Timer");
delay3.delay = 3000;
delay3.interval = 1000;
delay3.on("tick", function(){
 this.stop();
 canBack = false;
});[/mw_shl_code]

仿优酷视频实现了四个主界面，页面之间可以通过左右滑动页面来切换页面，也可以通过点击底部按钮实现页面间的切换，并且底部按钮的颜色也会随着页面的切换而改变。此功能通过slideview组件实现，效果图片如下：

JavaScript使用DeviceOne开发实战（四）仿优酷视频应用 - 文章图片

底部变化：

代码实现如下：

[mw_shl_code=javascript,true]
function subChange(num,button,imgs,lbs)
{
    var strings = ["下载","频道","订阅","我的"];
    button.text = strings[num];
    var url = [
          "source://image/main/shouye",
          "source://image/main/pindao",
          "source://image/main/dingyue",
          "source://image/main/wode"
          ];
    for(var i = 0 ; i < 4 ; i++)
  {
      imgs.source = url;
      lbs.fontColor = "222222FF";
  }
  imgs[num].source += "b";
  lbs[num].fontColor = "0080FFFF";
  for(var i = 0 ; i < 4 ; i++)
  {
      imgs.source += ".png";
  }
    img.visible = false;
    bt.visible = false;
}
function indexChange(num,sv,button,imgs,lbs,img,bt)
{
    sv.set({index: num});
  sv.refreshItems();
  subChange(num,button,imgs,lbs);
}
do_button.on("touch",function(data, e){
    if(do_button.text == "下载")
    {
        app.openPage("source://view/download.ui","");
    }
});
//点击底部按钮实现主界面以及底部图片颜色的切换
var action_imgs = [ui("img_0"), ui("img_1"), ui("img_2"), ui("img_3")];
var action_lbs = [ui("lb_0"), ui("lb_1"), ui("lb_2"), ui("lb_3"),];
do_slideview_1.bindItems(listdata );
listdata.addData([
  {template : 0},
  {template : 1},
  {template : 2},
  {template : 3}
]);
do_slideview_1.refreshItems({});
var shouye = ui("shouye");
shouye.on("touch",function(data, e){
    indexChange(0,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3);
});
var pindao = ui("pindao");
pindao.on("touch",function(data, e){
    indexChange(1,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3);
});
var dingyue = ui("dingyue");
dingyue.on("touch",function(data, e){
    indexChange(2,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3);
});
var wode = ui("wode");
wode.on("touch",function(data, e){
    indexChange(3,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3);
});
//滑动主界面实现底部图片的切换
do_slideview_1.on("indexChanged",function(data, e){
    subChange(data,do_button,action_imgs,action_lbs);
});
[/mw_shl_code]

首页海报之间的切换和页面间切换类似，但海报间切换还实现了自动定时切换的功能，每三秒钟切换一次，时间控制由do_timer来实现，在使用这个组件时，时间段不能是100，否则ios系统将会有不兼容的问题，图片及代码如下所示：

图片：

JavaScript使用DeviceOne开发实战（四）仿优酷视频应用 - 文章图片

代码：

[mw_shl_code=javascript,true]
var ind = 0;
timer.delay = 0;
timer.interval = 1000;
timer.start({});
timer.on("tick", function(){
    DURATION++;
  if(DURATION == 3){
      ind =(ind+1)%4
      movieview.set({index: ind});
      movieview.refreshItems();
      DURATION = 0;
  }
});[/mw_shl_code]

点击主界面的左上角的下载按键后，进入下载界面，点击下载后应用将从网上下载另个图片的海报来取代原海报，下载的进度通过进度条来显示，下载功能通过http组件的download方法实现，进度条通过do_progressbar组件实现，其效果图及代码实现如下：

效果：

JavaScript使用DeviceOne开发实战（四）仿优酷视频应用 - 文章图片

代码：

[mw_shl_code=javascript,true]
var http = mm("do_Http");
http.timeout = 30000;
http.contentType = "application/json";
http.url = "http://h.hiphotos.baidu.com/baike/c0%3Dbaike60%2C5%2C5%2C60%2C20%3Bt%3Dgif/sign=88e9903f8735e5dd8421ad8d17afcc8a/f9198618367adab48dc66b2e89d4b31c8701e44d.jpg";
http.on("success", function(data) {
    do_imageview_1.source="data://xiazai.png";
    do_button_2.text = "下载成功";
});
http.on("progress", function(data) {
  do_ProgressBar_0.progress = data.currentSize * 100 / data.totalSize;
  lb_progress.text = data.currentSize * 100 / data.totalSize + "%";
});
do_button_2.on("touch",function(data, e){
    http.download("data://xiazai.png");
});[/mw_shl_code]

右上角有三个按钮点击左数第一个按钮之后将弹出一个查找界面，查找界面的搜索框由textfield组件实现。

点击第二个按钮之后将弹出扫描二维码的界面，该界面实现了扫描二维码的功能，成功之后提示用户扫描成功，二维码由do_BarcodeView组件实现，实现图片和实现代码如下所示：

JavaScript使用DeviceOne开发实战（四）仿优酷视频应用 - 文章图片

代码：

[mw_shl_code=javascript,true]var nf = sm("do_Notification");
//根据ID获取BarcodeView实例对象；
var barcode = ui("do_BarcodeView_1");
start();
function start(){
    //开始启动扫描
    barcode.start(function(data, e) {
        //扫描成功，执行回调函数
        var result = JSON.stringify(data); 
        nf.alert("扫描二维码成功！", "完成")
    });
}
var btn = ui("btn_restart");
btn.on("touch", function(data, e) {
    start();
})
[/mw_shl_code]

点击第三个按钮之后，界面将弹出一个图片，再按一次该按钮后，图片消失，效果如下：

JavaScript使用DeviceOne开发实战（四）仿优酷视频应用 - 文章图片

视频播放功能

点击首页的任意一张海报就进入到视频播放界面，点击播放按键后将播放视频，此功能由do_VideoView组件实现，效果和代码实现如下：

JavaScript使用DeviceOne开发实战（四）仿优酷视频应用 - 文章图片

代码：

[mw_shl_code=javascript,true]var page = sm("do_Page");
var app = sm("do_App");
var do_VideoView_1 = ui("do_VideoView_1");
var do_Button_1 = ui("do_Button_1");
var do_Button_2 = ui("do_Button_2");
var do_Button_3 = ui("do_Button_3");
page.on("back", function(){ app.closePage() });
ui("action_back").on("touch", function(){ app.closePage() });
do_Button_1.on("touch", function(data, e) {
    if(do_Button_1.text == "播放")
    {
        do_VideoView_1.play(0);
        do_Button_1.text = "暂停";
    }
    else if(do_Button_1.text == "暂停")
    {
        do_VideoView_1.pause();
        do_Button_1.text = "继续";
    }
    else if(do_Button_1.text == "继续")
    {
        do_VideoView_1.resume();
        do_Button_1.text = "暂停";
    }
});
do_Button_2.on("touch", function(data, e) {
    do_Button_1.text = "播放";
    do_VideoView_1.stop();
});[/mw_shl_code]

点击“戳一下，你喜欢看的都在这里了”按钮，主页面会直接跳到订阅页面。此功能的实现依赖于页面之间的数据交换，利用page组件在index页面的逻辑代码中定义一个event1事件，在shouye页面的逻辑代码中调用page组件的fire函数来触发event1事件。

效果图如下：

JavaScript使用DeviceOne开发实战（四）仿优酷视频应用 - 文章图片

逻辑代码如下：

index页面：

[mw_shl_code=javascript,true]page.on("event1", function(data, e) {
    indexChange(2,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3);
});[/mw_shl_code]
shouye页面：
[mw_shl_code=javascript,true]do_Button_0.on("touch",function(data, e)
{
    page.fire("event1","");
});[/mw_shl_code]

以上所述就是小编给大家介绍的JavaScript使用DeviceOne开发实战（四）仿优酷视频应用，希望大家喜欢。

内容总结

以上是互联网集市为您收集整理的JavaScript使用DeviceOne开发实战（四）仿优酷视频应用全部内容，希望文章能够帮你解决JavaScript使用DeviceOne开发实战（四）仿优酷视频应用所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/355111.html

来源：【匿名】

【上一篇】纯js代码实现简单计算器【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript使用DeviceOne开发实战（四）仿优酷视频应用】教程文章相关的互联网学习教程文章

Javascript 字典应用实例【代码】

字典时一个很有用的工具，在之前C#项目中有经常使用，这篇博文主要讲解在Javascript中，字典的实际应用场景首先在JS中，是没有Dictionary‘类的，我们需要实现键值（KEY） -- 数值（VALUE）的对应关系，最好的办法就是用数组首先交代下背景，我需要根据数组里的站点编号，获取到对应的站点名称首先通过Thrift接口，获取到数据库里面的设备信息，通过Ajax传输到js页面，遍历数组PS : 数据结构如下：# 设备信息 struct Device{int i...

每天一个JavaScript实例-使用缓存计算（memoization）来提高应用程序性能

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-使用缓存计算（memoization）来提高应用程序性能</title> <script> window.onload = function(){var fibonacci = function(){var memo = [0,1];var fib = function(n){var result = memo[n];if(typeof result != "number"){result = fib(n-1) + fib(n-2);memo[n] = result;}console.log("mem...

JavaScript的应用【图】

原文：http://www.cnblogs.com/a849788087/p/5020779.html

javascript之闭包理解以及应用场景【代码】

之前读了js权威指南，也写了篇博文，但是实话实说当初看闭包确实还是一头雾水。现在时隔一个多月（当然这一段时间还是一直有在看闭包的相关知识）理解就更深入了一点，下面说说我的理解。1function fn(){ 2var a = 0; 3returnfunction (){ 4return ++a; 5 } 6 }如上所示，上面第一个return返回的就是一个闭包，那么本质上说闭包就是一个函数。那么返回这个函数有什么用呢？那是因为这个函数可以调用到它外部的a这个变量。其实...

（转）JS报表控件highcharts应用

1. 官网地址 http://www.highcharts.com/ 2. 版权信息源码修改方法在 highcharts.js 中打到 credits 将其中的 enabled 属性由 true 改为 false。如果是经过压缩后的代码，则是由 !0 改为 0。 3. 官方学习示例地址 http://www.highcharts.com/studies/ 4. 官方API http://api.highcharts.com/highcharts 5. 常用参数配置说明 chart.events.addSeries：添加数列到图表中。 chart.events.click：整...

js应用例子—下拉列表

先布局把第一行和子菜单做出来。然后把子菜单display：none;给第一行在js里做点击事件。var a=documentgetElementByid("diyihang"); a.onclick = function(){ var s= document.getElementByid(itmes) ; s.style.display="block"}然后给子菜单做点击事件。function selected(a){ var d= document.GetelementById(itmes); d.style.display="none"; var text=a.innerText; document.getElementById("diyihang").innertext=text; ...

手工创建tomcat应用，以及实现js读取本地文件内容

手工创建tomcat应用：1、在webapps下面新建应用目录文件夹2、在文件夹下创建或是从其他应用中复制：META-INF，WEB-INF这两个文件夹，其中META-INF清空里面，WEB-INF里面只保留web.xml，并清空webapp标签内全部内容因为tomcat应用必须要有这步的东西，而且格式还要一致3、现在可任意加网页文件或js,css文件，只要查对地址正确即可访问。 js读取本地文件内容：只有在服务端才可以读取本地内容，client方式无法获取。$.get("文件名.扩...

JS对Cookie的应用--JavaScript实例集锦（初学）【代码】【图】

一个网站上的cookie信息可以实现下次自动登录，记录你的历史等等可以在火狐浏览器查看本地代码的cookie信息：打开火狐浏览器--点击右键--查看页面信息--安全--查看cookie <!DOCTYPE html><html><head><title>Cookie</title></head><script type="text/javascript">/* var oDate=new Date();oDate.setDate(oDate.getDate()+30);document.cookie="user=blue;expires=";// document.cookie="pass=123";*///alert(document.cookie);...

几种JavaScript富应用MVC MVVM框架

Ember.js、Backbone.js、Knockout.js、Spine.js、Batman.js ， Angular.js前端中的MVVM设计模式让UI与数据模型可以很轻松的相互更新,这意味着开发人员只需要关注数据模型即可轻松的完成复杂的交互需求。可参考：http://www.cnblogs.com/aaronjs/p/3141553.html　　　　http://www.angularjs.cn/tag/AngularJS原文：http://www.cnblogs.com/renzaijianghu/p/4104751.html

理解《JavaScript设计模式与开发应用》发布-订阅模式的最终版代码【代码】【图】

最近拜读了曾探所著的《JavaScript设计模式与开发应用》一书，在读到发布-订阅模式一章时，作者不仅给出了基本模式的通用版本的发布-订阅模式的代码，最后还做出了扩展，给该模式增加了离线空间功能和命名空间功能，以达到先发布再订阅的功能和防止名称冲突的效果。但是令人感到遗憾的是最终代码并没有给出足够的注释。这让像我一样的小白就感到非常的困惑，于是我将这份最终代码仔细研究了一下，并给出了自己的一些理解，鉴于能力...

javaScript应用之点击图片后放大【代码】

javaScript应用之点击图片后放大在我们浏览图片的时候，会碰到这样一个问题，由于我们在浏览很多图片的时候突然想有个很喜欢的图片，很想仔细看看，但是图片却非常的小，无法看清楚，而我们一点击，图片就放大了，很清除的展现在了我们的面前。这是网络前端中，我们应用javaScript来写出来的，先来看看我做好的效果是什么样子的比如这就是我们的浏览的众多的图片中其中一个，而我们在看到这个阿童木图片的时候，...

JavaScript数据结构——队列的实现与应用【代码】

队列与栈不同，它遵从先进先出（FIFO——First In First Out）原则，新添加的元素排在队列的尾部，元素只能从队列头部移除。　　我们在前一篇文章中描述了如何用JavaScript来实现栈这种数据结构，这里我们对应地来实现队列。function Queue() {let items = [];// 向队列添加元素（一个或多个）this.enqueue = function (element) {if (element instanceof Array) items = items.concat(element);else items.push(element);};// 从队...

javascript函数应用和DOM【代码】

一、调用函数例:<html> <head> <title></title> <script language="javascript" type="text/script"> function text() { alert("该函数被调用了")； } </script> </head> <body> <input type="button" value="点击此按钮" onclick="text()"> </body> </html>confirm消息对话框自定义函数例子：function text2(){ var sex=confirm("点击“确定”是男，点击“取消”是女")； if(sex==true){ alert(你是男)； ...

javascript对象的应用

javascript脚本语言是一门基于面向对象的编程语言。关于面向对象，通过前边C#、C++的学习我们都了解过，它一般有三个特点：封装、继承、多态。而javascript不是严格意义上的面向对象，它支持一些预定义对象支持的简单对象模型。javascript的对象由属性和方法两个基本元素组成，接下来就了解一下javascript的几个主要的对象。一、浏览器内部对象1.Navigator对象2.Location对象3.Window对象4.Document对象5.History对象二、内置对象和...

如何在JavaScript中正确引用某个方法(bind方法的应用)【代码】

在JavaScript中，方法往往涉及到上下文，也就是this，因此往往不能直接引用，就拿最常见的console.log("info…")来说，避免书写冗长的console，直接用log("info…")代替，不假思索的会想到如下语法：1var log = console.log; 2 log("info…"); 很遗憾，运行报错：TypeError: Illegal invocation。为啥呢？对于console.log("info…")而言，log方法在console对象上调用，因此log方法中的this指向console对象；而我们用log变...

首页 / JAVASCRIPT / JavaScript使用DeviceOne开发实战（四）仿优酷视频应用

JavaScript使用DeviceOne开发实战（四）仿优酷视频应用

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript使用DeviceOne开发实战（四）仿优酷视频应用】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

开发 - 相关标签

视频 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程