请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
216
帖子
5
勋章
5939
Y币

floatNowTimer模块demo示例

[复制链接]
发表于 2021-7-31 13:28:11
floatNowTimer 用原生代码实现了iOS悬浮时钟显示功能。

  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.         <title>Module Develop</title>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport"
  7.                 content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  8.         <style type="text/css">
  9.                 html,
  10.                 body {
  11.                         height: 100%
  12.                 }

  13.                 body {
  14.                         background-color: #fff;
  15.                         margin: 0;
  16.                 }

  17.                 #wrap {
  18.                         height: 100%;
  19.                         position: relative;
  20.                 }

  21.                 #header {
  22.                         padding-top: 20px;
  23.                         background-color: #5082c2;
  24.                         height: 44px;
  25.                         position: relative;
  26.                 }

  27.                 #header h1 {
  28.                         font-size: 20px;
  29.                         height: 44px;
  30.                         line-height: 44px;
  31.                         margin: 0em;
  32.                         color: #fff;
  33.                         margin-left: 100px;
  34.                         margin-right: 100px;
  35.                         text-align: center;
  36.                 }

  37.                 #main {
  38.                         display: -webkit-box;
  39.                         -webkit-box-orient: vertical;
  40.                         -webkit-box-pack: center;
  41.                 }

  42.                 a.button {
  43.                         display: -webkit-box;
  44.                         -webkit-box-orient: vertical;
  45.                         -webkit-box-pack: center;
  46.                         -webkit-box-align: center;
  47.                         height: 32px;
  48.                         margin: 8px;
  49.                         background-color: rgba(240, 240, 240, 1.0);
  50.                         border-color: rgba(220, 220, 220, 1.0);
  51.                         border-width: 2px;
  52.                         border-style: solid;
  53.                 }

  54.                 a.active {
  55.                         background-color: rgba(240, 240, 240, 0.7);
  56.                 }
  57.         </style>
  58. </head>

  59. <body>
  60.         <div id="wrap">
  61.                 <div id="main">
  62.                         <br />
  63.                         <a class="button" tapmode="active" onclick="openTimeView()">显示时间</a>
  64.                         <a class="button" tapmode="active" onclick="hideTimeView()">隐藏时间</a>
  65.                         <a class="button" tapmode="active" onclick="showTimeView()">隐藏后显示时间</a>
  66.                         <a class="button" tapmode="active" onclick="closeTimeView()">关闭时间</a>
  67.                         <a class="button" tapmode="active" onclick="startPIP()">开启画中画</a>
  68.                         <a class="button" tapmode="active" onclick="stopPIP()">停止画中画</a>
  69.                         <a class="button" tapmode="active" onclick="updateStyle1()">更新样式1</a>
  70.                         <a class="button" tapmode="active" onclick="updateStyle2()">更新样式2</a>
  71.                         <br />
  72.                 </div>
  73.         </div>
  74. </body>
  75. <script type="text/javascript">
  76.         var demo = null;
  77.         apiready = function () {
  78.                 demo = api.require('floatNowTimer');
  79.                 if (!demo) {
  80.                         alert("请添加模块后编译");
  81.                         return;
  82.                 }
  83.         }

  84.         function openTimeView() {
  85.                 demo.openTimeView({
  86.                         rect: {
  87.                                 x: 50,
  88.                                 y: 200,
  89.                                 w: 200,
  90.                                 h: 100
  91.                         },
  92.                         fixedOn: api.frameName,
  93.                         fixed: true,
  94.                         backgroundColor: '#000000',
  95.                 }, function (ret, err) {
  96.                         alert(JSON.stringify(ret)+"  "+JSON.stringify(err));
  97.                 });
  98.         }

  99.         function hideTimeView() {
  100.                 demo.hideTimeView(function (ret, err) {
  101.                         alert(JSON.stringify(ret));
  102.                 });
  103.         }

  104.         function showTimeView() {
  105.                 demo.showTimeView(function (ret, err) {
  106.                         alert(JSON.stringify(ret));
  107.                 });
  108.         }

  109.         function closeTimeView() {
  110.                 demo.closeTimeView(function (ret, err) {
  111.                         alert(JSON.stringify(ret));
  112.                 });
  113.         }


  114.         function startPIP() {
  115.                 var ret = demo.startPIP();
  116.                 alert(JSON.stringify(ret));
  117.         }

  118.         function stopPIP() {
  119.                 var ret = demo.stopPIP();
  120.                 alert(JSON.stringify(ret));
  121.         }

  122.         function updateStyle1() {
  123.                 var ret = demo.updateStyle({
  124.                         backgroundColor: '#FFFFFF',
  125.                         textFontColor: '#000000',
  126.                         textFontSize: 200,
  127.                 });
  128.                 alert(JSON.stringify(ret));
  129.         }


  130.         function updateStyle2() {
  131.                 var ret = demo.updateStyle({
  132.                         backgroundColor: '#FFB6C1',
  133.                         textFontColor: '#DA70D6',
  134.                         textFontSize: 120,
  135.                 });
  136.                 alert(JSON.stringify(ret));
  137.         }
  138. </script>

  139. </html>
复制代码


216
帖子
5
勋章
5939
Y币

本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X
11
帖子
0
勋章
292
Y币
您需要登录后才可以回帖 登录

本版积分规则