简单的模拟股票

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .increase{color: red;}
        .decrease{color: green;}
        .zero{color: black;}
    </style>
</head>
<body>
    <table>
        <thead>
            <tr><th>名称</th><th>价格</th><th>涨跌幅度</th></tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
<script src="js/jquery.min-1.12.4.js"></script>
<script>
    (function(){
        // 1. 发出ajax请求
        // 2. 把获取到数据进行拼接
        // 3. 把拼接好的字符串添加到tbody中,形式新的DOM节点
        // 4. 设置定时器,每隔一段时间就向服务器请求获取新的数据


        var tbody = $('tbody');
        //var tbody = document.querySelector('tbody'); // 原生js
        getData();
        setInterval(getData, 5000);


        function getData(){

                  //复杂的 方法

            $.ajax({
                url: 'http://localhost:8080/webserver/stock',   //IP地址可以改
                type: 'get',
                success: function(data){
                    var arr = data.data;    // 服务器响的数据
                    var html = '';
                    var tmp;
                    for (var i=0;i<arr.length;i++){
                        tmp = arr[i];
                        var className = tmp.unit > 0 ? 'increase' : tmp.unit < 0 ? 'decrease' : 'zero';
                        html += '<tr><td>' +
                            tmp.name +
                            '</td><td class="' + className + '">' +
                            tmp.now +
                            '</td><td class="' + className + '">' +
                            Math.round(tmp.unit * 10000) / 100 +
                            '%</td></tr>';
                    }
                    tbody.html(html);
                    //tbody.innerHTML = html;   // 原生js
                },
                dataType: 'json',   //这里的json  改成 jsonp    因为是跨域   同理 用get ,post 的也是
                error: function(error){
                    console.log(error)
                }
            });

            //简单的方法

            /*$.get('http://localhost:8080/webserver/stock', function(){  //IP地址可以改

                var arr = data.data;    // 服务器响的数据
                var html = '';
                var tmp;
                for (var i=0;i<arr.length;i++){
                    tmp = arr[i];
                    html += '<tr><td>' +
                        tmp.name +
                        '</td><td>' +
                        tmp.now +
                        '</td><td>' +
                        Math.round(tmp.unit * 10000) / 100 +
                        '%</td></tr>';
                }
                tbody.html(html);
            });*/


            /*$.post('http://localhost:8080/webserver/stock', function(){
                var arr = data.data;    // 服务器响的数据
                var html = '';
                var tmp;
                for (var i=0;i<arr.length;i++){
                    tmp = arr[i];
                    html += '<tr><td>' +
                        tmp.name +
                        '</td><td>' +
                        tmp.now +
                        '</td><td>' +
                        Math.round(tmp.unit * 10000) / 100 +
                        '%</td></tr>';
                }
                tbody.html(html);
            });*/
        }
    })();


</script>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
========================================= 一、Ucenter的安装 ========================================= 1、将 Center 文件夹上传 2、如果您的主机为 *nix 操作系统,请设置如下文件夹权限为 777 ./data ./data/avatar ./data/backup ./data/cache ./data/logs ./data/tmp ./data/view 3、通过浏览器访问 http://您的域名/Ucenter/install/, 根据提示填写 mysql 配置信息、管理员账号信息 4、通过 FTP 删除 install 目录 5、完成安装 ========================================= 二、Uchome的安装 ========================================= 1、将 Home 文件夹上传 2、将程序根目录下面的 config.new.php 重命名为 config.php 3、以"创始人"身份,登录已经安装的 UCenter 用户中心后台,并进行如下操作: "应用管理" --> "添加新应用" 选择安装方式: URL 安装 应用程序安装地址: http://本程序访问URL/install/index.php 4、点击"安装",请根据向导,填入必要的信息,开始 UCenter Home 安装 特别注意的是,要根据安装向导的提示,正确设置各个目录的读写属性 5、安装完毕后,请务必将 install 目录删除 6、将guyou文件夹复制至template文件夹下,使用管理员登陆后台,在基本设置—站点设置中将站点模板设置为guyou ========================================= 三、股票插件的安装 ========================================= 1、将gu下的所有文件复制至Home文件夹 2、在MySQL内选中Uchome安装的数据库,执行gu.sql文件 3、进入Uchome后台更新缓存即可 4、我们提供的压缩包中的Home文件夹已经包含股票插件,用此安装可以忽略步骤1
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值