实现携程X分钟前有人预定功能

原理:利用cookie与计时器两部分;

    首先,进入页面,x会被随机数赋值,赋值后x会一分钟加1,直到加到60,再从1开始累加。

    页面是否相同是根据页面的url后的id值判断;

    

<span id='myspan'></span>   x分钟前有人预定该景点

<script>
$(document).ready(function() {
if (window.location.href.includes('?')) {      
if (window.location.href.split('?')[1].split('=')[0] === 'id') {
var ids = window.location.href.split('?')[1].split('=')[1];
var date = new Date();
date.setTime(date.getTime() + ( 600*1000));
//console.log(decodeURI(ids));
//console.log($.cookie('cookie_urlId'));
urlId = decodeURI(ids); //url的id值
if ($.cookie('cookie_urlId') === urlId) {
console.log(true);

//随机数代码
if ($.cookie('redomnum' + urlId) === undefined) {
//console.log($.cookie('redomnum'));
var num = parseInt(60*Math.random());
if (num === 0) {
num = 1;
}
$('#myspan').text(num);
$.cookie('redomnum' + urlId, num, { express: date });
} else {
$('#myspan').text($.cookie('redomnum' + urlId));
};
} else {
$.cookie('cookie_urlId', urlId, { express: date });

//随机数代码
if ($.cookie('redomnum' + urlId) === undefined) {
//console.log($.cookie('redomnum'));
var num = parseInt(60*Math.random());
if (num === 0) {
num = 1;
}
$('#myspan').text(num);
$.cookie('redomnum' + urlId, num, { express: date });
} else {

$('#myspan').text($.cookie('redomnum' + urlId));
}
}

sendMessage();

function sendMessage(){
window.setInterval(SetReminTime,1000 * 60);
}
function SetReminTime(){
var num = $.cookie('redomnum' + urlId);
if(num === '60'){
num = 0;
}
$.cookie('redomnum' + urlId, ++num, { express: date });
$('#myspan').text($.cookie('redomnum' + urlId));
}
}
}
});

</script>

实现携程X分钟前有人预定功能的更多相关文章

  1. 携程酒店DevOps测试实践

    作者简介 王幸福,携程酒店研发部高级测试经理,负责无线自动化测试相关工作.在测试框架和平台研发.移动测试.DevOps等领域有着丰富的经验. 如今很多大型互联网公司.创新型企业都在积极地进行DevOp ...

  2. 景点API支持查询携程旅游门票景点详情

    门票景点详情,景点api支持查询携程旅游门票景点详情. 接口名称:景点api 接口平台:开放api 接口地址:http://api2.juheapi.com/xiecheng/senicspot/ti ...

  3. OpenStack虚拟云桌面在携程呼叫中心的应用

    编者:本文为刘科在第六期[携程技术微分享]中的分享内容.在携程技术中心(微信号ctriptech)微信后台回复[云桌面],可加入微信交流群,和关注云桌面的小伙伴一起玩耍~ 刘科,携程系统研发云平台桌面 ...

  4. 解密国内BAT等大厂前端技术体系-携程篇(长文建议收藏)

    1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第四篇,前三篇已经讲述了阿里.腾讯.百度在前端技术这几年的技术发展. 这一 ...

  5. 携程Apollo统一配置中心的搭建和使用

    原文链接:https://blog.csdn.net/luhong327/article/details/81453001 一.Apollo配置中心介绍 1.What is Apollo 1.1 Ap ...

  6. 携程的 Dubbo 之路,值得学习!

    注:本篇文章整理自董艺荃在 Dubbo 社区开发者日上海站的演讲. 1.缘起 携程当初为什么要引入 Dubbo 呢?实际上从 2013 年底起,携程内主要使用的就是基于 HTTP 协议的 SOA 微服 ...

  7. 携程的 Dubbo 之路

    本篇文章整理自董艺荃在 Dubbo 社区开发者日上海站的演讲. 缘起 携程当初为什么要引入 Dubbo 呢?实际上从 2013 年底起,携程内主要使用的就是基于 HTTP 协议的 SOA 微服务框架. ...

  8. 携程二面:讲讲 MySQL 中的 WAL 策略和 CheckPoint 技术

    前段时间我在准备暑期实习嘛,这是当时面携程的时候二面的一道问题,我一脸懵逼,赶紧道歉,不好意思不知道没了解过,面试官又解释说 redo log,我寻思着 redo log 我知道啊,WAL 是啥?给面 ...

  9. 携程App的网络性能优化实践

    首先介绍一下携程App的网络服务架构.由于携程业务众多,开发资源导致无法全部使用Native来实现业务逻辑,因此有相当一部分频道基于Hybrid实现.网络通讯属于基础&业务框架层中基础设施的一 ...

随机推荐

  1. R语言:用简单的文本处理方法优化我们的读书体验

    博客总目录:http://www.cnblogs.com/weibaar/p/4507801.html 前言 延续之前的用R语言读琅琊榜小说,继续讲一下利用R语言做一些简单的文本处理.分词的事情.其实 ...

  2. C#高级编程笔记 2016年10月8日运算符和类型强制转换

    1.checked和unchecked 运算符 C#提供了checked 和uncheckde 运算符.如果把一个代码块标记为checked, CLR就会执行溢出检查,如果发生溢出,就抛出overfl ...

  3. Newton's method 分析

    大家都知道对于合理的函数和合理的值域牛顿迭代法是二次收敛(quadratic covergence)的(收敛速度定义见 https://en.wikipedia.org/wiki/Rate_of_co ...

  4. Linux高并发机制——epoll模型

    epoll是一个特别重要的概念,常常用于处理服务端的并发问题.当服务端的在线人数越来越多,会导致系统资源吃紧,I/O效率越来越慢,这时候就应该考虑epoll了.epoll是Linux内核为处理大批句柄 ...

  5. virtualbox

    下载安装:http://wiki.centos.org/zh/HowTos/Virtualization/VirtualBox

  6. jquery ashx交互 返回list 循环json输入信息

    html代码:触发按钮 <input type="button" id="search" value="查询" /> ashx代 ...

  7. Android eclipse环境搭建

    1安装JDK  Java环境 首先,我们必须要安装Java环境,提供语言环境支持,Android一般用Java嘛 下载一个JDK 推荐1.6版本以上 安装好后 记得配置一下环境变量 计算机—>属 ...

  8. Linux-终端-快捷键

    Linux-终端-快捷键 Shift+Ctrl+T:新建标签页 Shift+Ctrl+W:关闭标签页 Ctrl+PageUp:前一标签页 Ctrl+PageDown:后一标签页 Shift+Ctrl+ ...

  9. bootscript/javascript组件

    javascript组件   (1)每一个插件(带有js功能的组件),想使用bootstrap插件,一个是要去写他的html,第二个是使用CSS去修饰它,再引入相应的js文件. bootstrap框架 ...

  10. jmap之使用说明与JVM配置

    详情可参见:http://blog.csdn.net/fenglibing/article/details/6411953. 1 2. 3.vi 打开查看,具体介绍请看上述链接. 4.查看tomcat ...