JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css">
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<div data-role="page" id="mainpage">
    <!-- Start of first page -->
    <div data-role="header" data-position="inline">
            <a href="#mainpage" data-icon="home">主页</a>
            <h1>欢迎来到中国移动自助终端</h1>
    </div><!-- /header -->
    <div data-role="content">
        <div class="right-part">
            
        </div>
        <div class="left-part">
                        <ul data-role="listview" data-theme="d">
                            <li data-role="list-divider" role="heading">功能选择</li>
                            <li class="nav-li"><a href="#recharge">缴费充值</a></li>
                            <li class="nav-li"><a href="bill.html">话费查询</a></li>
                            <li class="nav-li"><a href="bmw.html">选号入网</a></li>
                            <li class="nav-li"><a href="bmw.html">热点促销</a></li>
                            <li class="nav-li"><a href="bmw.html">增值业务</a></li>
                            <li class="nav-li"><a href="bmw.html">3G业务</a></li>
                            <li class="nav-li"><a href="bmw.html">周边指南</a></li>
                            <li class="nav-li"><a href="bmw.html">优惠券</a></li>
                        </ul>
        </div>
    </div>
    <div data-role="footer">
        <h4>liuyanghejerry</h4>
    </div><!-- /footer -->
</div><!-- /first page -->
    
<div data-role="page" id="recharge">
    <div data-role="header" data-position="inline">
    
            <a href="#mainpage" data-icon="home">主页</a>
            <h1>缴费充值</h1>
            <a href="#mainpage" data-icon="alert" id="timer">60秒后自动退出</a>
    </div><!-- /header -->
    <div data-role="content">
        <div class="right-part">
            <form action="form.php" method="post">
            <div data-role="fieldcontain">
                <label...

JavaScript

$("#recharge").live('pageshow', function() {
    var past = 0;

    $('#recharge').everyTime('1s', function(i) {
        past++;
        $('#timer span > .ui-btn-text').html(60 - past + '秒后自动退出');
        if (past == 60) {
            $("a[data-icon='home']").trigger("click");
        }
    });  
});

$("#recharge").live('pagebeforehide', function() {
    var past = 0;
    $('#recharge').stopTime();
    $('#timer span > .ui-btn-text').html('60秒后自动退出');
    alert('Stop the counter and reset to 60 before we transition');
});







/**
 * jQuery.timers - Timer abstractions for jQuery
 * Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
 * Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
 * Date: 2009/10/16
 *
 * @author Blair Mitchelmore
 * @version 1.2
 *
 **/

jQuery.fn.extend({
    everyTime: function(interval, label, fn, times) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, times);
        });
    },
    oneTime: function(interval, label, fn) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, 1);
        });
    },
    stopTime: function(label, fn) {
        return this.each(function() {
            jQuery.timer.remove(this, label, fn);
        });
    }
});

jQuery.extend({
    timer: {
        global: [],
        guid: 1,
        dataKey: "jQuery.timer",
        regex: /^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?$/,
        powers: {
            // Yeah this is major overkill...
            'ms': 1,
            'cs': 10,
            'ds': 100,
            's': 1000,
            'das': 10000,
            'hs': 100000,
            'ks': 1000000
        },
        timeParse: function(value) {
            if (value == undefined || value == null)
                return null;
            var result = this.regex.exec(jQuery.trim(value.toString()));
            if (result[2]) {
                var num = parseFloat(result[1]);
                var mult =...