正文 

当前位置： 首页 > java > java框架

夺命雷公狗---微信开发60----在线点播电影网2之电影网整体完工

夺命雷公狗      2022-02-09     308

关键词：

我们上一节课介绍了电影网的核心部分ckplayer播放器，那么我们按照上一节课的基础上来完成这个电影网。

我们先来穿件一个index.html，代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>夺命雷公狗之电影在线点播网</title>
        <!--宽高禁缩放 -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
        <!--类webapp--> 
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!--状态条 --> 
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--电话号码不是链接 --> 
        <meta name="format-detection" content="telephone=no">
        <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
        <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div data-role="page" id="page1">
            <div>
                <img src="banner.png" width="100%" />
            </div>
            <div data-role="content">
                <ul data-role="listview">
                    <li><a href="#page2">第二页</a></li>
                    <li><a href="#page3">第三页</a></li>
                    <li><a href="#page4">第四页</a></li>
                    <li><a href="#page5">第五页</a></li>
                </ul>
            </div>
            <div data-role="footer">
                <h1>页面脚注</h1>
            </div>
        </div>
        
        <div data-role="page" id="page2">
            <div data-role="header">
                <h1>header2</h1>
            </div>
            <div data-role="content">
                <img width="200px" src="http://i.cnblogs.com/images/adminlogo.gif" />
            </div>
            <div data-role="footer">
                <h1>页面脚注</h1>
            </div>
        </div>
        
        <div data-role="page" id="page3">
            <div data-role="header">
                <h1>header3</h1>
            </div>
            <div data-role="content">
                内容3
            </div>
            <div data-role="footer">
                <h1>footer3</h1>
            </div>
        </div>
        
        <div data-role="page" id="page4">
            <div data-role="header">
                <h1>header4</h1>
            </div>
            <div data-role="content">
                <b>内容4</b>
            </div>
            <div data-role="footer">
                <h1>footer4    </h1>
            </div>
        </div>
        
        <div data-role="page" id="page5">
            <div data-role="header">
                <h1>header5</h1>
            </div>
            <div data-role="content">
                <h1>内容5</h1>
            </div>
            <div data-role="footer">
                <h1>footer5</h1>
            </div>
        </div>
    </body>
<html>

 

首页写好了，那么下一步就到他的电影详情页了，movie.html代码如下所示：

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>电影详情页</title>
        <!--宽高禁缩放 -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
        <!--类webapp--> 
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!--状态条 --> 
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--电话号码不是链接 --> 
        <meta name="format-detection" content="telephone=no">
        <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
        <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-role="header">
                <img src="mv1.png" width="100%" />
            </div>
            <div data-role="content">
            <font style="font-size:24px;color:red;"><b>剧情介绍</b></font><br /><br />
            <font style="font-size:20px;color:red;"><b>白发魔女传之明月天国</b></font><br /><br />
            明朝万历年间，刚刚被推举为武当派新任掌门的卓一航（黄晓明饰）奉命带红丸入京进贡，沿途偶遇魔教妖女练霓裳（范冰冰饰），二人从不打不相识到情难自禁坠入爱河，并在练霓裳所驻扎的明月寨中互许终身。不久，锦衣卫攻入明月寨，指出练霓裳就是杀死川陕总督卓仲廉的凶手，卓一航为查明真相只身前往京城。不久后却传来他归顺朝廷并另娶娇妻的消息，练霓裳悲愤交集，一夜间黑发尽数变白。<br /><br />
            <font style="font-size:24px;color:red;"><b>点击播放</b></font><br /><br />
            <!--如果我们是在实际的开发的时候这里面一定是动态的，如href=“/ckplayer/index.php?id=100”-->
            <a target="_self" href="/ckplayer/index.htm">
                <img src="movie1.png">
            </a>
            </div>
            <div data-role="footer">
                <h3>夺命雷公狗出品2015-2016</h3>
            </div>
        </div>
        
        <div data-role="page" id="page2">
            <div data-role="header">
                <h1>header2</h1>
            </div>
            <div data-role="content">
                <img width="200px" src="http://i.cnblogs.com/images/adminlogo.gif" />
            </div>
            <div data-role="footer">
                <h1>页面脚注</h1>
            </div>
        </div>
        
        <div data-role="page" id="page3">
            <div data-role="header">
                <h1>header3</h1>
            </div>
            <div data-role="content">
                内容3
            </div>
            <div data-role="footer">
                <h1>footer3</h1>
            </div>
        </div>
        
        <div data-role="page" id="page4">
            <div data-role="header">
                <h1>header4</h1>
            </div>
            <div data-role="content">
                <b>内容4</b>
            </div>
            <div data-role="footer">
                <h1>footer4    </h1>
            </div>
        </div>
        
        <div data-role="page" id="page5">
            <div data-role="header">
                <h1>header5</h1>
            </div>
            <div data-role="content">
                <h1>内容5</h1>
            </div>
            <div data-role="footer">
                <h1>footer5</h1>
            </div>
        </div>
    </body>
<html>

 

 

那么最后一步就是电影播放页了，我们直接将详情也的地址链接到/ckplayer/index.htm即可，代码如下所示：

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>夺命雷公狗电影点播系统</title>
<style type="text/css">
body,td,th {
    font-size: 14px;
    line-height: 26px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
p {
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-left: 10px;
}
#a1{
    /*播放器大小的设置*/
    position:relative;
    z-index: 100;
    width:900px;
    height:600px;
    float: left;
}
</style>
<script type="text/javascript" src="js/offlights.js"></script>
</head>

<body>
<div id="a1"></div>
<!--
上面一行是播放器所在的容器名称，如果只调用flash播放器，可以只用<div id="a1"></div>
-->
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    //如果你不需要某项设置，可以直接删除，注意var flashvars的最后一个值后面不能有逗号
//    function loadedHandler(){
//        if(CKobject.getObjectById('ckplayer_a1').getType()){//说明使用html5播放器
//            alert('播放器已加载，调用的是HTML5播放模块');
//        }
//        else{
//            alert('播放器已加载，调用的是Flash播放模块');
//        }
//    }
    var _nn=0;
    function ckplayer_status(str){
        _nn+=1;
        if(_nn>100){
            _nn=0;
            document.getElementById('statusvalue').value='';
        }
        document.getElementById('statusvalue').value=str+'\n'+document.getElementById('statusvalue').value;
    }
    
    var flashvars={
        f:'http://weixin.showtp.com/ckplayer/test.flv查看详情  

                

夺命雷公狗---微信开发47----获取用户地理位置接口


我们现在要做的是查找距离最近的“肯德基”，我们需要通过百度提供的LBS云服务定位距离您最近的肯德基，该程序需要到LBS后台进行相关设置，然后在完成程序用户在客户端输入“肯德基”公众号就会自动回复距...  查看详情  

                

夺命雷公狗---微信开发54----微信js-sdk接口开发之快速入门


js-sdk基本介绍除去服务号的九大接口外，微信提供了JS-SDK接口，所谓JS-SDK接口也就是在网页中使用javascript来更改网页设置，（比如隐藏右上角的菜单）获取用户状态（比如地理位置）甚至调用微信的录音功能上传下载和扫描等...  查看详情  

                

夺命雷公狗—java---002---java开发环境搭建


夺命雷公狗—JAVA---002---java开发环境搭建JDK：JavaDeveloper'sKit，java开发工具包JDK是提供给Java开发人员使用的，其中包含了java的开发工具，也包括了JRE。所以安装了JDK，就不用在单独安装JRE了。其中的开发工具：编译工具(javac.exe)...  查看详情  

                

夺命雷公狗—java---003---java注释


夺命雷公狗—JAVA---003---java注释JAVA注释//我是单行注释/*我是多行注释~~！*//***这个类绘制一个条形图*我是文档注释*@authorrunoob*@version1.2*/   查看详情  

                

夺命雷公狗—java---008---println和print的区别


夺命雷公狗—JAVA---008---println和print的区别代码如下所示：classTest{publicstaticvoidmain(String[]args){System.out.println("夺命雷公狗");System.out.println(18);System.out.println('男');System.out.println("-------------");  查看详情  

                

夺命雷公狗—java---005---编码问题


夺命雷公狗—JAVA---005---编码问题在编写程序的时候我们是需要注意一下编码问题的，比如我们创建一个Hello.java 的文件，代码如下所示：classHello{publicstaticvoidmain(String[]args){System.out.println("你好");}}  然后我们来到文件...  查看详情  

                

夺命雷公狗—java---010---变量


夺命雷公狗—JAVA---010---变量变量是用来存储数值（数据）在java中，变量其实就是一块存储区域，变量中存储的数据时存储在JVM内存中的。  变量三要素1，数据类型是用来存储：字符串，小数，整数，单个字符，布尔值，...  查看详情  

                

夺命雷公狗—java---004---诞生自己的第一个java程序


夺命雷公狗—JAVA---004---诞生自己的第一个java程序首先我们来到D盘下创建一个自专门用于存放自己java的目录，如下所示：  然后我们开始创建自己的第一个java文件，第一个程序建议文件名和自己的类名一样：  java...  查看详情  

                

夺命雷公狗----git---6---github基本使用


github不是git。git是一个版本控制系统，是一个版本控制软件，从而完善共同开发。。。github是一个网站，基于git的，主要作用是代码托管的。。。。托管的几层含义如下：1：将自己平常时候写的项目保存到github上2：可以作为git...  查看详情  

                

夺命雷公狗---node下的一聊天室-首发


今晚感觉挺蛋疼，就用了点时间，在node下开发了个聊天室来玩玩，不过之是简单的开发了套而已，并没多做什么考虑，，但是发现了一个好处就是用node来写聊天室代码居然少得可怜，这个不佩服node都不行，效果图如下所示：&nb...  查看详情  

                

夺命雷公狗-----react---2--组建


  <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="./js/react.js"></script><scriptsrc="./js/react  查看详情  

                

夺命雷公狗—java---006---大小写问题


夺命雷公狗—JAVA---006---大小写问题1，源码文件名.java大小写的问题源码文件名不区分大小写，但是极力推荐区分大小写 2，字节码文件名（类名）严格区分大小写 3，代码中大小写严格区分大小写 温馨提示，玩JAVA基...  查看详情  

                

夺命雷公狗----git---7---github当仓库本地使用（完）


首先我们将github上的东西克隆到本地： 然后在本地创建一个文件夹，然后进入git命令行： 成功后如下所示：将仓库里面的内容给克隆到本地了。。。然后创建一个index.html然后添加进去：  在这里push的时候要用到g...  查看详情  

                

夺命雷公狗-----react---10--添加css样式的方法


  <!DOCTYPE><html><head><metacharset="utf-8"><title></title><scriptsrc="./js/react.js"></script><scriptsrc="./js/react-dom.js"></scri  查看详情  

                

夺命雷公狗-----react---1--页面的渲染


  <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="./js/react.js"></script><scriptsrc="./js/react  查看详情  

                

夺命雷公狗----git---5---分支


git分支的概念相当于是添加一个属于自己的分支，别人是看不到的，等你写完自己的程序到时候在合并到团队的分支上即可。。。。我们可以查看自己git里面有什么分支，如下所示：gitbranch  在这里我们可以很明显的看到...  查看详情  

                

夺命雷公狗-----react---3--标签的规则


 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="./js/react.js"></script><scriptsrc="./js/react-dom.j  查看详情