index.html 38.8 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8" />
    <title>学点云课堂</title>


    <link rel="stylesheet" type="text/css" href="css/amazeui.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="src/xdyVideo.js"></script>
    <!--拖拽工具条-->
    <script type="text/javascript" src="js/xdyEvent.js"></script>
    <script type="text/javascript" src="js/drag.js"></script>

    <script type="text/javascript" src="js/McuClient.js?v=1.0.0314.15"></script>
    <!--<script type="text/javascript" src="http://192.168.1.140/McuClient/McuClient.js?78097236"></script>-->
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

    <script type="text/javascript" src="src/main.js"></script>
    <!--&lt;!&ndash;白板&ndash;&gt;-->
    <script type="text/javascript" src="js/index.js"></script>
    <script src="js/draw.js"></script>


    <script type="text/javascript" src="src/videoWithFlash.js"></script>


</head>
<body>

<!--弹出框-->
<button
        type="button"
        class="am-btn am-btn-primary  pop"
        data-am-modal="{target: '#my-alert'}">
    Alert
</button>
<div class="am-modal am-modal-alert am-modal-active popheight" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog ">
        <div class="am-modal-bd popTxt">

        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn  popBtn"  data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 398, height: 288}">确定</span>
        </div>
    </div>
</div>

<!--loading-->
<div class="loading-index">
    <div class="loadEffect">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

<!--<div class="coverDiv"></div>-->
<!--<div class="coverDivBot"></div>-->
<!--1v1互动课堂-->
<div class="box">

    <!--头部-->
    <div class="header clear">
        <li class="classroom">课堂主题:<a id="classCurName" href="javascript: void(0)"></a></li>
        <li class="classCurId">用户ID:<a id="classCurId" href="javascript: void(0)"></a></li>

        <!--退出-->
        <div class="am-dropdown exitCurClass" data-am-dropdown>
            <button id="exitCurClass" class=" am-btn am-btn-primary am-dropdown-toggle exitCurClass "
                    data-am-modal="{target: '#exit-classes', closeViaDimmer: 0, width: 340, height: 172}"
                    data-am-dropdown-toggle><span class="span-setting iconfont">&#xe607;</span>退出
            </button>

        </div>
        <!--设置-->
        <div class="am-dropdown  setCurClass" data-am-dropdown>
            <button id="openCamera" class="setting am-btn am-btn-primary am-dropdown-toggle "
                    data-am-modal="{target: '#setting-modal-1', closeViaDimmer: 0, width: 405, height: 400}"
                    data-am-dropdown-toggle><span class="span-setting iconfont">&#xe631;</span>设置
            </button>

        </div>

        <!--设置弹出层-->
        <!--<div class="am-modal am-modal-no-btn" tabindex="-1" id="setting-modal-1">-->
            <!--<div class="am-modal-dialog">-->
                <!--<div class="setting-headline">设置-->
                    <!--<a href="javascript: void(0)" class="iconfont" data-am-modal-close><img id="close-cam" src="images/close.png"></a>-->
                <!--</div>-->
                <!--<ul class="am-modal-bd-setting">-->
                    <!--<li class="clear">-->
                        <!--<span>摄像头</span>-->

                            <!--<select id="selectListVideo" class="SelectList">-->
                                <!--<option></option>-->
                            <!--</select>-->
                    <!--</li>-->

                    <!--<li>-->
                        <!--<video id="webcam" autoplay></video>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<span>麦克风</span>-->

                        <!--<select id="selectListAudio" class="SelectList">-->
                            <!--<option></option>-->

                        <!--</select>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<span >0</span>-->
                        <!--<span>%</span>-->

                                    <!--<div class="scrollBar">-->
                                        <!--<div class="scroll_Track"></div>-->
                                        <!--<div class="scroll_Thumb"></div>-->
                                    <!--</div>-->

                        <!--<span class="setScrollBar-min"></span>-->
                        <!--<span>%</span>-->


                    <!--</li>-->
                    <!--<li>-->
                        <!--<p></p>-->
                        <!--<div id="set-voice-progress" class="set-voice-progress">-->
                            <!--<span id="set-loader1" class="set-voice-progress-span-1"></span>-->
                            <!--<span id="set-loader2" class="set-voice-progress-span-2"></span>-->
                            <!--<span id="set-loader3" class="set-voice-progress-span-3"></span>-->
                            <!--<span id="set-loader4" class="set-voice-progress-span-4"></span>-->
                            <!--<span id="set-loader5" class="set-voice-progress-span-5"></span>-->
                            <!--<span id="set-loader6" class="set-voice-progress-span-6"></span>-->
                            <!--<span id="set-loader7" class="set-voice-progress-span-7"></span>-->
                            <!--<span id="set-loader8" class="set-voice-progress-span-8"></span>-->
                            <!--<span id="set-loader9" class="set-voice-progress-span-9"></span>-->
                            <!--<span id="set-loader10" class="set-voice-progress-span-10"></span>-->
                            <!--<span id="set-loader11" class="set-voice-progress-span-11"></span>-->
                            <!--<span id="set-loader12" class="set-voice-progress-span-12"></span>-->
                        <!--</div>-->
                    <!--</li>-->
                <!--</ul>-->
            <!--</div>-->
        <!--</div>-->


        <!--帮助-->
        <div class="am-dropdown helpCurClass" data-am-dropdown>
            <a href="javascript: void(0)"><button  class="am-btn am-btn-primary am-dropdown-toggle " data-am-dropdown-toggle><span
                    class="span-help iconfont">&#xe608;</span>帮助
            </button></a>
        </div>

        <!--右侧未开始-->
        <div id="classStatus" class="classStatus am-dropdown " data-am-dropdown>
            <button id="classNowBtn" type="button" class="am-btn am-btn-primary am-dropdown-toggle classNowBtn" data-am-dropdown-toggle><span
                    id="span-iconfont" class="span-classes iconfont">&#xe62b;</span><span id="class-now" class="classNow">未开始</span>
            </button>
            <ul id="amDropdownContent" class="am-dropdown-content">

                <li class="am-dropdown-content-li-begin"><span id="am-dropdown-content-span-1" class="am-dropdown-content-span iconfont">&#xe61d;</span>
                    <button id="classes-status-begin" type="button"
                            class="am-btn am-btn-primary am-dropdown-content-button"
                            href="#">开始上课
                    </button>
                </li>
                <li class="am-dropdown-content-li-pause"><span id="am-dropdown-content-span-pause" class="am-dropdown-content-span iconfont">&#xe60a;</span>
                    <button id="classes-status-pause" type="button"
                            class="am-btn am-btn-primary am-dropdown-content-button"
                            href="#">暂停课堂
                    </button>
                </li>
                <li class="am-dropdown-content-li-rest"><span id="am-dropdown-content-span-rest" class="am-dropdown-content-span iconfont">&#xe61d;</span>
                    <button id="classes-status-rest" type="button"
                            class="am-btn am-btn-primary am-dropdown-content-button"
                            href="#">继续上课
                    </button>
                </li>
                <li id="am-dropdown-content-li-stop-gray" class="am-dropdown-content-li-stop-gray  stopGray"><span class="am-dropdown-content-span iconfont">&#xe607;</span>
                    <button id="classes-status-gray" type="button"
                            class="am-btn am-btn-primary am-dropdown-content-button"

                            href="#">结束课堂
                    </button>
                </li>

                <li class="am-dropdown-content-li-stop"><span class="am-dropdown-content-span iconfont">&#xe607;</span>
                    <button id="classes-status-2" type="button"
                            class="am-btn am-btn-primary am-dropdown-content-button"
                            data-am-modal="{target: '#end-classes-1', closeViaDimmer: 0, width: 340, height: 172}"
                            href="#">结束课堂
                    </button>
                </li>


            </ul>
        </div>


        <!--弹出层退出课堂-->
        <div class="am-modal am-modal-no-btn" tabindex="-1" id="end-classes-1">
            <div class="am-modal-dialog">
                <a href="javascript: void(0)" class="am-close am-close-spin exitClose" data-am-modal-close>&times;</a>
                <p class="p-text">确定要结束当前课堂吗?</p>

                <div class="am-modal-confirm-cancel">
                    <!--<button id="end" class="confirm" data-am-modal-close>结束课堂</button>-->
                    <!--<button id="end-no-exit" class="cancel-1" data-am-modal-close>取消</button>-->
                    <button id="end" class="exitEnsure" data-am-modal-close>确定</button>
                    <button  class="exitCancel" data-am-modal-close>取消</button>
                </div>

            </div>
        </div>

        <!--弹出退出-->
        <!--弹出层退出课堂-->
        <div class="am-modal am-modal-no-btn" tabindex="-1" id="exit-classes">
            <div class="am-modal-dialog">
                <a href="javascript: void(0)" class="am-close am-close-spin exitClose" data-am-modal-close>&times;</a>
                <p class="p-text">确定要退出当前课堂吗?</p>

                <div class="am-modal-confirm-cancel">
                    <button id="exitClass" class="exitEnsure" data-am-modal-close>确定</button>
                    <button  class="exitCancel" data-am-modal-close>取消</button>
                </div>

            </div>
        </div>

    </div>
    <!--内容-->
    <div class="content clear">
        <!--左侧-->
        <div id="left" class="left">

            <div class="spinner1">
                <div class="bounce1"></div>
                <div class="bounce2"></div>
                <div class="bounce3"></div>
            </div>
                        <!--引入canvas画板-->
                        <div id="draw" class="clear">
                            <div class="canvas_container">

                                <canvas id="canvas">
                                    浏览器不支持
                                </canvas>
                                 <img class="showImg" id="showImg"/>
                                <!--文档层-->
                                <img id="docImage" class="docImage">
                                </img>
                                <canvas id="canvas_bak"></canvas>


                            </div>
                            <!--画板的工具栏-->
                            <div id="tool" class="tool">
                                <ul class="draw_controller cf">
                                    <li class=" showColor" id="chooseColor" title="选择颜色">

                                        <!--颜色板-->
                                        <div id="tool-color" class="tool-color">
                                            <ul class="draw_controller cf">
                                                <!--红色-->
                                                <li id="li-Color1" class="Color1" title="#b8242a" value="#b8242a"
                                                    onclick="choose(1)"></li>
                                                <!--蓝色-->
                                                <li id="li-Color2" class="Color2" title="#0071bc"  value="#0071bc"
                                                    onclick="choose(2)"></li>
                                                <!--紫色-->
                                                <li id="li-Color3" class="Color3" title="#6a0db2" value="#6a0db2"
                                                    onclick="choose(3)"></li>
                                                <!--黄色-->
                                                <li id="li-Color4" class="Color4"   title="fae81b" value="#fae81b"
                                                    onclick="choose(4)"></li>


                                            </ul>
                                        </div>

                                    </li>
                                    <li class=" pencil" title="铅笔"></li>
                                    <li class="rescind" title="撤销上一步操作"></li>
                                    <!--<li class="square" title="方形"></li>-->
                                    <!--<li class="drawLine" title="画直线"></li>-->
                                    <!--<li class="circle" title="圆"></li>-->
                                    <!--<li class="laserPen" title="激光笔"></li>-->
                                    <!--<li class="canvasText" title="文字"></li>-->
                                    <!--<li class=" rubber" title="橡皮擦"></li>-->
                                    <li class="clearContext" title="清屏"></li>
                                </ul>

                            </div>


                        </div>


            <!--文档上传的列表-->
            <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
                <div class="spinner">
                    <div class="bounce1"></div>
                    <div class="bounce2"></div>
                    <div class="bounce3"></div>
                </div>
                <div class="am-modal-dialog">
                    <div class="doc-headline">文档列表
                        <a href="javascript: void(0)" class="iconfont doc-headline-a" data-am-modal-close>&#xe638;</a>
                    </div>
                    <div class="am-modal-bd-file">

                        <div  id="pushFile" class="push-file clear">
                            <span class="iconfont">&#xe636;</span>
                            <a>上传文件</a>
                        </div>
                        <a><input type="file" id="file" onchange="importFile();"></a>

                        <ul id="fileUl" class="file-ul">


                        </ul>
                    </div>
                </div>
            </div>


            <!--文档和视频切换,视频控制区域-->
            <div class="control">
                <ul class="clear">
                    <li class="fileUpload iconfont" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 398, height: 288}">&#xe620;</li>
                    <li class="showBoardBtn iconfont">&#xe61f;</li>


                    <li class="next-page "><a id="nextPage" class="nextPage" href="javascript:void(0)"></a></li>
                    <li class="total-page"><span id="totalPageNum">0</span></li>
                    <li class="bias">/</li>
                    <li class="cur-page"><span id="curPageNum">0</span></li>
                    <li class="prev"><a id="prevPage" class="prevPage" href="javascript:void(0)"></a></li>


                </ul>

            </div>

        </div>
        <!--右侧-->
        <div id="right" class="right">
            <div class="studentVideo">
                <div class="stuPublish" style="position:absolute;top: 0; width:240px;height:180px;">
                    <div id="stuPublish"></div>
                </div>
                <div class="stuPlay" style="position:absolute;top: 0; width:240px;height:180px">
                    <div id="stuPlay"></div>
                </div>
                <img class="stuVideoBg"/>
                <div class="curStuUserTip">学生未进入课堂</div>
                <div class="curStuUserName"></div>
                <div id="stuVideo-video" class="stuVideo-video iconfont" title="发起学生视频">&#xe62e;</div>
                <div id="stuVideo-videoBg" class="stuVideo-videoBg iconfont"></div>
                <div id="stuVideo-videoNotClick" class="stuVideo-videoNotClick iconfont" title="当前不能点击">&#xe62e;</div>


                <div id="stuVideo-voice" class="stuVideo-voice iconfont" title="发起学生音频">&#xe62d;</div>
                <div id="stuVideo-voiceBg" class="stuVideo-voiceBg iconfont"></div>
                <div id="stuVideo-voiceNotClick" class="stuVideo-voiceNotClick iconfont" title="当前不能点击">&#xe62d;</div>

            </div>
            <div class="teacherVideo">

                <div class="publish" style="position:absolute;top: 0; width:240px;height:180px; ">
                    <div id="publish"></div>
                </div>
                <div class="play" style="position:absolute;top: 0; width:240px;height:180px">
                    <div id="play"></div>
                </div>
                <img class="teacherVideoBg"/>
                <img class="teacherVoicing"/>
                <div class="curTeaUserTip">老师未进入课堂</div>
                <div class="curUserName"></div>
                <div id="teacherVideo-video" class="teacherVideo-video iconfont" title="发起视频">&#xe62e;</div>
                <div id="teacherVideo-videoBg" class="teacherVideo-videoBg iconfont"></div>
                <div id="teacherVideo-videoNotClick" class="teacherVideo-videoNotClick iconfont" title="当前不能点击">&#xe62e;</div>

                <div id="teacherVideo-voice" class="teacherVideo-voice iconfont" title="发起音频">&#xe62d;</div>
                <div id="teacherVideo-voiceBg" class="teacherVideo-voiceBg iconfont"></div>
                <div id="teacherVideo-voiceNotClick" class="teacherVideo-voiceNotClick iconfont" title="当前不能点击">&#xe62d;</div>

            </div>

            <!--聊天区域-->
            <div class="chat">
                <div class="msg-border">
                    <div id="panel_message" class="msg clear">
                             <!--<div class="message_client">-->
                                 <!--<div style="float: left">-->
                                         <!--<span class="TeaName">老师:</span>-->
                                 <!--</div>-->
                                <!--<div style="margin-left: 44px">-->
                                    <!--<div class="message triangle-isosceles leftmsg">打开</div>-->
                                <!--</div>-->
                             <!--</div>-->

                             <!--<div class="message_client">-->
                                    <!--<div style="float: right">-->
                                         <!--<span class="stuName">学生</span>-->
                                    <!--</div>-->
                                    <!--<div style="float:right;margin-right: 14px">-->
                                         <!--<div class="message stutriangle-isosceles rightmsg">打开</div>-->
                                    <!--</div>-->
                             <!--</div>-->
                    </div>
                </div>


                        <!--<div class="teacher-msg "><img src="images/teacher-photo.png" alt="老师头像">-->
                            <!--<p class="left">哇哦。。。。。。</p></div>-->
                        <!--<div class="student-msg"><img src="images/student-photo.png" alt="学生头像">-->
                            <!--<p class="right">哇哦。。。。。。</p></div>-->


                <div class="input-send clear">
                    <button id="btn_send" class="send" type="submit">发送</button>
                    <div class="input-face">
                        <input id="txt_message" maxlength="20" onkeyup="this.value=this.value.replace(/^ +| +$/g,&#34;&#34;)" type="text"/>
                        <span id="face" class="face iconfont">&#xe632;</span>
                    </div>

                </div>
            </div>
            <!--表情列表-->
            <div id="facelist" class="swiper-container">

                <div class="inner-slide" id="inner-slide">
                    <div id="slide1" class="swiper-slide">
                        <ul>
                            <li><img src="images/face/aimu.gif" data-type="aimu">
                            </li>
                            <li><img src="images/face/daxiao.gif" data-type="daxiao">
                            </li>
                            <li><img src="images/face/huaixiao.gif" data-type="huaixiao">
                            </li>
                            <li><img src="images/face/liuhan.gif" data-type="liuhan">
                            </li>
                            <li><img src="images/face/shuijiao.gif" data-type="shuijiao">
                            </li>
                            <li><img src="images/face/yiwen.gif" data-type="yiwen">
                            </li>
                            <li><img src="images/face/aoman.gif" data-type="aoman">
                            </li>
                            <li><img src="images/face/jiew.gif" data-type="jiew">
                            </li>
                            <li><img src="images/face/liulei.gif" data-type="liulei">
                            </li>
                            <li><img src="images/face/sun.gif" data-type="sun">
                            </li>
                            <li><img src="images/face/youhh.gif" data-type="youhh">
                            </li>
                            <li><img src="images/face/baiyan.gif" data-type="baiyan">
                            </li>
                            <li><img src="images/face/fadai.gif" data-type="fadai">
                            </li>
                            <li><img src="images/face/jingkong.gif" data-type="jingkong">
                            </li>
                            <li><img src="images/face/meiyan.gif" data-type="meiyan">
                            </li>
                            <li><img src="images/face/tiaoxie.gif" data-type="tiaoxie">
                            </li>
                            <li><img src="images/face/yue.gif" data-type="yue">
                            </li>
                            <li><img src="images/face/baoquan.gif" data-type="baoquan">
                            </li>
                            <li><img src="images/face/fanu.gif" data-type="fanu">
                            </li>
                            <li><img src="images/face/jingya.gif" data-type="jingya">
                            </li>
                            <li><img src="images/face/mojing.gif" data-type="mojing">
                            </li>
                            <li><img src="images/face/touxiao.gif" data-type="touxiao">
                            </li>
                            <li><img src="images/face/yumen.gif" data-type="yumen">
                            </li>
                            <li><img src="images/face/bishi.gif" data-type="bishi">
                            </li>
                            <li><img src="images/face/fendou.gif" data-type="fendou">
                            </li>
                            <li><img src="images/face/kafei.gif" data-type="kafei">
                            </li>
                            <li><img src="images/face/piezui.gif" data-type="piezui">
                            </li>
                            <li><img src="images/face/tu.gif" data-type="tu">
                            </li>
                            <li><img src="images/face/yun.gif" data-type="yun">
                            </li>
                            <li><img src="images/face/bizui.gif" data-type="bizui">
                            </li>
                            <li><img src="images/face/ganga.gif" data-type="ganga">
                            </li>
                            <li><img src="images/face/kelian.gif" data-type="kelian">
                            </li>
                        </ul>
                    </div>
                    <div id="slide2" class="swiper-slide">
                        <ul>
                            <li><img src="images/face/pijiu.gif" data-type="pijiu">
                            </li>
                            <li><img src="images/face/weiqu.gif" data-type="weiqu">
                            </li>
                            <li><img src="images/face/zaijian.gif" data-type="zaijian">
                            </li>
                            <li><img src="images/face/cahan.gif" data-type="cahan">
                            </li>
                            <li><img src="images/face/guai.gif" data-type="guai">
                            </li>
                            <li><img src="images/face/koubi.gif" data-type="koubi">
                            </li>
                            <li><img src="images/face/qiang.gif" data-type="qiang">
                            </li>
                            <li><img src="images/face/weixiao.gif" data-type="weixiao">
                            </li>
                            <li><img src="images/face/zancheng.gif" data-type="zancheng">
                            </li>
                            <li><img src="images/face/cool.gif" data-type="cool">
                            </li>
                            <li><img src="images/face/guzhang.gif" data-type="guzhang">
                            </li>
                            <li><img src="images/face/kuaikl.gif" data-type="kuaikl">
                            </li>
                            <li><img src="images/face/qinqin.gif" data-type="qinqin">
                            </li>
                            <li><img src="images/face/woshou.gif" data-type="woshou">
                            </li>
                            <li><img src="images/face/zhemo.gif" data-type="zhemo">
                            </li>
                            <li><img src="images/face/dabing.gif" data-type="dabing">
                            </li>
                            <li><img src="images/face/hanxiao.gif" data-type="hanxiao">
                            </li>
                            <li><img src="images/face/kulou.gif" data-type="kulou">
                            </li>
                            <li><img src="images/face/qiu.gif" data-type="qiu">
                            </li>
                            <li><img src="images/face/xigua.gif" data-type="xigua">
                            </li>
                            <li><img src="images/face/zhouma.gif" data-type="zhouma">
                            </li>
                            <li><img src="images/face/daku.gif" data-type="daku">
                            </li>
                            <li><img src="images/face/haqi.gif" data-type="haqi">
                            </li>
                            <li><img src="images/face/kun.gif" data-type="kun">
                            </li>
                            <li><img src="images/face/ruo.gif" data-type="ruo">
                            </li>
                            <li><img src="images/face/xin.gif" data-type="xin">
                            </li>
                            <li><img src="images/face/zuohh.gif" data-type="zuohh">
                            </li>
                            <li><img src="images/face/dangao.gif" data-type="dangao">
                            </li>
                            <li><img src="images/face/hua.gif" data-type="hua">
                            </li>
                            <li><img src="images/face/lianhong.gif" data-type="lianhong">
                            </li>
                            <li><img src="images/face/shuai.gif" data-type="shuai">
                            </li>
                            <li><img src="images/face/yinxian.gif" data-type="yinxian">
                            </li>
                        </ul>
                    </div>

                </div>
                <ul class="tiplist" id="tiplist">
                    <li class="bg"></li>
                    <li></li>
                </ul>

            </div>
        </div>
    </div>
</div>


<!--输入4个参数的页面-->

<div class="fourParamsOut">
    <ul class="fourParams clear">
        <li><span>classId:</span><input class="classId" type="text" value="1357644520"></li>
        <!--<li><span>userRole:</span><input class="userRole" type="text" value=""></li>-->
        <!--<li><span>portal:</span><input class="portal" type="text" value=""></li>-->
        <li><span>userId:</span><input class="userId" type="text" value=""></li>
        <li>
            <button id="btnFourParam">确定</button>
        </li>
    </ul>
    <div class="permission">
        <div class="permissionIn">
        <input id="host" type="radio" name="userRole" value="host"  onclick="getValue(this.value)"><label for="host">老师</label>
        <input id="normal" type="radio" name="userRole" value="normal" onclick="getValue(this.value)"><label
            for="normal">学生</label>
        <button id="btn-per">确定</button>
        </div>
    </div>
</div>


<!--&lt;!&ndash;登录页面终极版&ndash;&gt;-->
<div class="loginBg">
    <ul class="loginContent">
        <li></li>
        <li class="userNameLi">
            <div class="userNameBg"></div>
            <input  class="userNameInput" type="text" placeholder="请输入用户名" maxlength="20" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
        </li>
        <li>
            <p class="userTip"></p>
        </li>
        <li class="passWordLi">
            <div class="passWordBg"></div>
            <input value="111111" class="passWordInput" type="text" placeholder="请输入课堂密码">
        </li>
        <li>
            <input id="hostH" type="radio" name="userRole" value="host" onclick="getValue(this.value)"><label for="host">老师</label>
            <input id="normalN" type="radio" name="userRole" value="normal" onclick="getValue(this.value)"><label for="normal">学生</label>
        </li>
        <li>
            <p class="passWordTip"></p>
        </li>


        <li class="btnLoginLi">
            <button id="btnLogin">登录</button>
        </li>
    </ul>

</div>

<script type="text/javascript" src="js/amazeui.min.js"></script>

<!--&lt;!&ndash;白板&ndash;&gt;-->
<!--<script type="text/javascript" src="js/index.js"></script>-->


<!--拖动-->
<script type="text/javascript">
    var tabBox = document.getElementById("draw");
    var tool = document.getElementById("tool");
    xdyEvent.on(tool, "mousedown", down);
</script>

<!--进度条-->
<script type="text/javascript">
    $(document).ready(function (e) {
        //设置最大值
        ScrollBar.maxValue = 100;
        //初始化
        ScrollBar.Initialize();
    });
    var ScrollBar = {
        value: 20,
        maxValue: 100,
        step: 1,
        currentX: 0,
        Initialize: function () {
            if (this.value > this.maxValue) {
                alert("给定当前值大于了最大值");
                return;
            }
            this.GetValue();
            $("#scroll_Track").css("width", this.currentX + 2 + "px");
            $("#scroll_Thumb").css("margin-left", this.currentX + "px");
            this.Value();
            $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);
        },
        Value: function () {
            var valite = false;
            var currentValue;
            $("#scroll_Thumb").mousedown(function () {
                valite = true;
                $(document.body).mousemove(function (event) {
                    if (valite == false) return;
                    var changeX = event.clientX - ScrollBar.currentX;
                    currentValue = changeX - ScrollBar.currentX - $("#Demo").offset().left;
                    $("#scroll_Thumb").css("margin-left", currentValue + "px");
                    $("#scroll_Track").css("width", currentValue + 2 + "px");
                    if ((currentValue + 25) >= $("#scrollBar").width()) {
                        $("#scroll_Thumb").css("margin-left", $("#scrollBar").width() - 5 + "px");
                        $("#scroll_Track").css("width", $("#scrollBar").width() + 2 + "px");
                        ScrollBar.value = ScrollBar.maxValue;
                    } else if (currentValue <= 0) {
                        $("#scroll_Thumb").css("margin-left", "0px");
                        $("#scroll_Track").css("width", "0px");
                    } else {
                        ScrollBar.value = Math.round(100 * (currentValue / $("#scrollBar").width()));
                    }
                    $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);
                });
            });
            $(document.body).mouseup(function () {
                ScrollBar.value = Math.round(100 * (currentValue / $("#scrollBar").width()));
                valite = false;
                if (ScrollBar.value >= ScrollBar.maxValue) ScrollBar.value = ScrollBar.maxValue;
                if (ScrollBar.value <= 0) ScrollBar.value = 0;
                $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);
            });
        },
        GetValue: function () {
            this.currentX = $("#scrollBar").width() * (this.value / this.maxValue);
        }
    }

</script>

<!--设置中的进度条-->

<script type="text/javascript">
    $(document).ready(function(e) {
        //设置最大值
        setScrollBar.maxValue=100;
        //初始化
        setScrollBar.Initialize();
        //设置最大值
        setProgressBar.maxValue=100;

        //设置当前刻度
        var index=0;
        var mProgressTimer=setInterval(function(){
            index+=2;
            setProgressBar.SetValue(index);
        },100);

    });
    var setScrollBar = {
        value: 1,
        maxValue: 100,
        step: 1,
        currentX: 0,
        Initialize: function() {
            if (this.value > this.maxValue) {
                alert("给定当前值大于了最大值");
                return;
            }
            this.GetValue();
            $(".scroll_Track").css("width", this.currentX + 2 + "px");
            $(".scroll_Thumb").css("margin-left", this.currentX + "px");
            this.Value();

            $(".setScrollBar-min").html(setScrollBar.value);
            $(".setScrollBar-max").html(setScrollBar.maxValue);

        },
        Value: function() {
            var valite = false;
            var currentValue;
            $(".scroll_Thumb").mousedown(function() {
                valite = true;
                $(document.body).mousemove(function(event) {
                    if (valite == false) return;
                    var changeX = event.clientX - setScrollBar.currentX;
                    currentValue = changeX - setScrollBar.currentX-$(".scrollBar").offset().left;
                    $(".scroll_Thumb").css("margin-left", currentValue + "px");
                    $(".scroll_Track").css("width", currentValue + 2 + "px");
                    if ((currentValue + 9) >= $(".scrollBar").width()) {
                        $(".scroll_Thumb").css("margin-left", $(".scrollBar").width() - 9 + "px");
                        $(".scroll_Track").css("width", $(".scrollBar").width() + 2 + "px");
                        setScrollBar.value = setScrollBar.maxValue;
                    } else if (currentValue <= 0) {
                        $(".scroll_Thumb").css("margin-left", "0px");
                        $(".scroll_Track").css("width", "0px");
                    } else {
                        setScrollBar.value = Math.round(100 * (currentValue / $(".scrollBar").width()));
                    }
                    $(".setScrollBar-min").html(setScrollBar.value);
                    $(".setScrollBar-max").html(setScrollBar.maxValue);
                });
            });
            $(document.body).mouseup(function() {
                setScrollBar.value = Math.round(100 * (currentValue / $(".scrollBar").width()));
                valite = false;
                if (setScrollBar.value >= setScrollBar.maxValue) setScrollBar.value = setScrollBar.maxValue;
                if (setScrollBar.value <= 0) setScrollBar.value = 0;
                $(".setScrollBar-min").html(setScrollBar.value);
                $(".setScrollBar-max").html(setScrollBar.maxValue);
            });
        },
        GetValue: function() {
            this.currentX = $(".scrollBar").width() * (this.value / this.maxValue);
        }
    }
    var setProgressBar = {
        maxValue: 100,
        value: 20,
        SetValue: function(aValue) {
            this.value=aValue;
            if (this.value >= this.maxValue) this.value = this.maxValue;
            if (this.value <= 0) this.value = 0;
            var mWidth=this.value/this.maxValue*$(".progressBar").width()+"px";
            $(".progressBar_Track").css("width",mWidth);
            $(".setScrollBar-min").html(setScrollBar.value);
            $(".setScrollBar-max").html(setScrollBar.maxValue);
        }
    }
</script>


<!--色板-->
<script type="text/javascript">
    var tool = document.getElementById('tool');
    var toolColor = document.getElementById('tool-color');
    var chooseColor = document.getElementById('chooseColor');

    chooseColor.onmouseenter = function () {
        toolColor.style.display = "block";
    };

    chooseColor.onmouseleave = function () {
        toolColor.style.display = "none";
    };
    function choose(agrs) {
        switch (agrs) {
            case 1:
                chooseColor.style.background = 'url("images/color6-n.png") no-repeat';
                chooseColor.title = "#b8242a";
                break;
            case 2:
                chooseColor.style.background = 'url("images/color2-n.png") no-repeat';
                chooseColor.title = "#0071bc";
                break;
            case 3:

                chooseColor.style.background = 'url("images/color3-n.png") no-repeat';
                chooseColor.title = "#6a0db2";
                break;
            case 4:
                chooseColor.style.background = 'url("images/color4-n.png") no-repeat';
                chooseColor.title = "#fae81b";
                break;
            default:break;
        }
    }


</script>

</body>
</html>