Javascript 尝试在页面上使用swipe.js函数_Javascript_Html_Swipe

Javascript 尝试在页面上使用swipe.js函数

javascript html

Javascript 尝试在页面上使用swipe.js函数,javascript,html,swipe,Javascript,Html,Swipe,我使用swipe.js函数编写了一个webapp，在两个页面之间进行交换。问题是我不会在第一个页面上滑动，如果我将html代码移到第一个页面，它会在两个页面之间来回滑动而不会出现问题。第一页打开时，我无法加载第二页。有人知道问题出在哪里吗代码：共享QR 第1条 * { 框大小：边框框；背景色：#062F43； } 身体{ 保证金：自动； } /*标题样式*/ .标题{ 背景色：#062F43；填充：20px；文本对齐：居中； } /*设置顶部导航栏的样式*/ 托普纳夫先生{ 溢出：隐

我使用swipe.js函数编写了一个webapp，在两个页面之间进行交换。问题是我不会在第一个页面上滑动，如果我将html代码移到第一个页面，它会在两个页面之间来回滑动而不会出现问题。第一页打开时，我无法加载第二页。有人知道问题出在哪里吗

代码：


共享QR
第1条
* {
框大小：边框框；
背景色：#062F43；
}
身体{
保证金：自动；
}
/*标题样式*/
.标题{
背景色：#062F43；
填充：20px；
文本对齐：居中；
}
/*设置顶部导航栏的样式*/
托普纳夫先生{
溢出：隐藏；
背景色：#062F43；
}
/*设置topnav链接的样式*/
.topnav a{
浮动：左；
显示：块；
颜色：#062F43；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
/*悬停时更改颜色*/
.topnav a:悬停{
背景色：#062F43；
颜色：白色；
}
/*创建三个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：50%；
填充：15px；
背景色：#062F43；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
*响应式布局-使三列堆叠在彼此的顶部，而不是相邻*/
@介质（最大宽度：1080px）{
.栏目{
宽度：100%；
}
}
#文本{
颜色：白色；
}


.馅饼{
保证金：自动；
位置：相对位置；
宽度：200px；
高度：100px；
边界半径：200px 200px 0；
溢出：隐藏；
}
.pie：：之后{
变换：旋转（{temp_x}}}度）；/*设置旋转度*/
背景：线性梯度（向右，rgba（51102255,1）50%，rgba（255,0,0,1）100%）；
变换原点：中心-底部；
}
.派：以前{
边框：2件纯黑；
}
.馅饼{
顶部：8px；/*匹配边框宽度*/
左：8px；/*匹配边框宽度*/
宽度：计算（100%-16px）；/*匹配边框宽度乘以2*/
高度：计算（200%-10px）；/*匹配边框宽度乘以2*/
边界半径：100%；
背景#062F43；
z-index:1；/*将其移动到伪元素的顶部*/
}
.pie*，
.派：以前，
.pie：：之后{
内容：''；
位置：绝对位置；
左：0；
排名：0；
身高：100%；
宽度：100%；
边界半径：继承；
框大小：边框框；
}   
剩下的热水
0%
期间
14:42

温度
0摄氏度

剩下的热水
0
钟
函数startTime（）{
var today=新日期（）；
var h=today.getHours（）；
var m=today.getMinutes（）；
var s=today.getSeconds（）；
m=检查时间（m）；
s=检查时间（s）；
document.getElementById（'txt'）.innerHTML=
h+“：“+m+”：“+s；
var t=设置超时（开始时间，500）；
}
功能检查时间（i）{
如果（i<10）{i=“0”+i}；//在<10的数字前面加零
返回i；
}
文章
* {
框大小：边框框；
背景色：#062F43；
}
身体{
保证金：自动；
}
/*标题样式*/
.标题{
背景色：#062F43；
填充：20px；
文本对齐：居中；
}
/*设置顶部导航栏的样式*/
托普纳夫先生{
溢出：隐藏；
背景色：#062F43；
}
/*设置topnav链接的样式*/
.topnav a{
浮动：左；
显示：块；
颜色：#062F43；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
/*悬停时更改颜色*/
.topnav a:悬停{
背景色：#062F43；
颜色：白色；
}
/*创建三个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：50%；
填充：15px；
背景色：#062F43；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
*响应式布局-使三列堆叠在彼此的顶部，而不是相邻*/
@介质（最大宽度：1080px）{
.栏目{
宽度：100%；
}
}
#文本{
颜色：白色；
}
.按钮{
背景色：#07969E；
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
光标：指针；
}
.按钮：悬停{背景色：#008a93}
.按钮：激活{
背景色：#008a93；
盒影：#666；
变换：translateY（4px）；
剩下的热水
按钮
期间
按钮
温度
按钮
剩下的热水
按钮
钟
按钮
活图
文章
第三条
$（文档）.on（'swipleft'，'.ui页'，函数（事件）{
if（event.handled！==true）//这将防止事件触发多次
{    
var nextpage=$.mobile.activePage.next（'[data role=“page”]'）；
//如果存在，请使用下一页的id刷卡
如果（下一页长度>0）{
$.mobile.changePage（下一页，{transition:“slide”，reverse:false}，true，true）；
}
event.handled=true；
}
返回false；
});
$（文档）.on（'swiperight'，'.ui页'，函数（事件）{
if（event.handled！==true）//这将防止事件触发多次
{      
var prevpage=$（this.prev（'[data role=“page”]'）；
如果（prevpage.length>0）{
$.mobile.changePage（prevpage，{transition:“slide”，reverse:true}，true，true）；
}
event.handled=true；
}
返回false；
});

您得到了您的标记

<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
    <meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>

<body>
  <div data-role="page" id="article1">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <h1>Articles1</h1>
    </div>
    <div data-role="content">

<style>
* {
    box-sizing: border-box;
    background-color: #062F43;
}

body {
  margin: auto;
}
/* Style the header */
.header {
    background-color: #062F43;
    padding: 20px;
    text-align: center;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #062F43;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #062F43;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
    background-color: #062F43;
    color: white;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 15px;
    background-color: #062F43;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width:1080px) {
    .column {
        width: 100%;
    }
}

#txt {
   color: white; 
}

</style>
</head>
<body>
<div class="colunm">
  <h>
    <p>
       <p>

<div class="pie">
    <span class="overlay"></span>
</div>
<style>
.pie {
    margin:  auto;
    position: relative;
    width: 200px;
    height: 100px;
    border-radius: 200px 200px 0 0;
    overflow: hidden;
}
.pie::after {
    transform: rotate({{temp_x}}deg);      /*  set rotation degree  */
    background: linear-gradient(to right, rgba(51,102,255,1) 50%, rgba(255,0,0,1) 100%);
    transform-origin: center bottom;
}
.pie::before {
    border: 2px solid black;
}
.pie .overlay{
    top: 8px;                      /*  match border width  */
    left: 8px;                     /*  match border width  */
    width: calc(100% - 16px);       /*  match border width times 2  */
    height: calc(200% - 10px);      /*  match border width times 2  */
    border-radius: 100%;
    background: #062F43;
    z-index: 1;                     /*  move it on top of the pseudo elements  */
}
.pie *,
.pie::before,
.pie::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    box-sizing: border-box;
}   
</style>
</body>
<body>
 <div class="header">
  <h1 style="color: #07969E;"> Hot water left</h1>
  <p id="temp_f" style="color: white;"> 0%</p>
</div>
<div class="row">
  <div class="column">
    <h2> <center style="color: #07969E;"> Duration </h2> </center>
    <p> <center style="color: white;">14:42</p> </center>
</p>
  </div>
  <div class="column">
    <h2> <center style="color: #07969E;"> Temperature</h2> </center>
    <p id="temp_c"> <center style="color: white;">0 C°</p> </center>
</p>
  </div>
  <div class="column">
    <h2> <center style="color: #07969E;"> Hot water left</h2> </center>
    <p id="temp_x"> <center style="color: white;">0</p> </center>
</div>
  <div class="column">
    <h2> <center style="color: #07969E;"> Clock</h2> </center>
    <head>
<style="color=white">
<script>

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}


</script>
</head><body onload="startTime()">

<div> <center id="txt"></div> </center>

 </div>

    </div>
</div>


  <div data-role="page" id="article2">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Articles</h1>
    </div>
    <div data-role="content">
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <link rel="stylesheet" type="text/css" title="default" href="css/main.css">

  <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
  <script type="text/javascript" src="js/custom.js"></script>

<style>
* {
    box-sizing: border-box;
    background-color: #062F43;
}

body {
  margin: auto;
}
/* Style the header */
.header {
    background-color: #062F43;
    padding: 20px;
    text-align: center;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #062F43;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #062F43;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
    background-color: #062F43;
    color: white;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 15px;
    background-color: #062F43;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width:1080px) {
    .column {
        width: 100%;
    }
}

#txt {
   color: white; 
}

</style>
<style>
.button {
    background-color: #07969E;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button:hover {background-color: #008a93}

.button:active {
  background-color: #008a93;
  box-shadow:  #666;
  transform: translateY(4px);
</style>
</head>
<body>

 <div class="header">
  <h1 style="color: #07969E;"> Hot water left</h1>
  <button class="button">Button</button>

</div>
<div class="row">
  <div class="column">
    <h2> <center style="color: #07969E;"> Duration </h2> 
    <center> <button class="button">Button</button> </center>
  </div>
  <div class="column">
    <h2> <center style="color: #07969E;"> Temperature</h2> 
    <center> <button class="button">Button</button> </center>
  </div>
  <div class="column">
    <h2> <center style="color: #07969E;"> Hot water left</h2> 
    <center> <button class="button">Button</button> </center>
</div>
  <div class="column">
    <h2> <center style="color: #07969E;"> Clock</h2> 
   <center> <button class="button">Button</button> </center>
<style="color=white">

<div> <center id="txt"></div> 
    </div>
</div>

<div>
<div class="row">
    </div>
    <center div class="column1" align="cente">
            <h2> <center style="color: #07969E;">Live graph</h2>
            <h3> <center style="color: white;"> <a href="index.html" class="transition">Click Me</a> </h3>
            </div>
        <div id="sidebar">
    </div>
  </div>

  <div data-role="page" id="article3">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Articles</h1>
    </div>
    <div data-role="content">
      <p>Article 3</p>
    </div>
    </div>

</body>
<script>
$(document).on('swipeleft', '.ui-page', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $.mobile.activePage.next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '.ui-page', function(event){     
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});
</script>
</html>