zoukankan      html  css  js  c++  java
  • 每日技术总结:jquery datetimepicker,微博QQ好友QQ空间微信等分享接口

    前言:

    1.jquery datetimepicker

    今天遇到一个日期控件格式的问题,默认选中显示的并不是设定的值,而是当天的日期。于是去查了一遍文档。

    参考文章:jquery datetimepicker 配置参数

    官方文档:DateTimePicker jQuery plugin select date and time (找了很久)

    耗时2小时,翻了无数遍网页,最后亲自去看插件源码,突然灵光一现,发现只是input value的格式传错了,冤啊!!

    Html代码如下:

    <head>
      <{css src="jquery.datetimepicker.css" app="sysstat" }>
      <{script src="jquery.js" app="sysstat" }>
      <{script src="jquery.datetimepicker.js" app="sysstat" }>
    </head>
    
    <body>
        <input class="x-input cal datetimepicker" readonly="readonly" type="text" value="<{$time_start}>" id="time_from" name="time_from"><input class="x-input cal datetimepicker" type="text" value="<{$time_end}>" id="time_end" name="time_end">
    </body>

    js代码如下:

      $('.datetimepicker').datetimepicker({
        lang: "ch",
        format: "Y-m-d"
      });

    效果如下:

    问题:就是选中的那个值并不是input框里的值。

    两个input value 是php渲染的数据,

    <{$time_start}> 打印出来值是 2019/01/20
    <{$time_end}> 打印出来值是 2019/01/20

    这俩值格式跟format格式不匹配,format格式是

    format: "Y-m-d"

    解决:修改如下:

    $('.datetimepicker').datetimepicker({
          lang: "ch",
          format: "Y/m/d"
        });

    这样就解决了这个问题。

    2.微博分享,QQ好友,QQ空间,微信分享

    Html代码如下:

    <div class="share-wrapper">
          <div onclick="shareTo('qzone')">
            <img src="http://zixuephp.net/static/images/qqzoneshare.png" width="24">
          </div>
          <div onclick="shareTo('qq')">
            <img src="http://zixuephp.net/static/images/qqshare.png" width="26">
          </div>
          <div onclick="shareTo('sina')">
            <img src="http://zixuephp.net/static/images/sinaweiboshare.png" width="28">
          </div>
          <div onclick="weixinShare()">
            <img src="http://zixuephp.net/static/images/wechatshare.png" width="26">
          </div>
    </div>

    微博分享、QQ好友分享、QQ空间分享js代码如下:

    function shareTo(stype) {
      var ftit = '';
      var flink = '';
      //获取网页标题title
      ftit = window.document.title;
      //获取网页中内容的第一张图片
      flink = $('#thumblist img').eq(0).attr('src');
    
      if (typeof flink == 'undefined') {
          flink='';
      }
    
      //qq空间接口的传参
      if (stype == 'qzone') {
        window.open('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + document.location.href + '?sharesource=qzone&title=' + ftit + '&pics=' + flink + '&summary=' + '');
      }
      //新浪微博接口的传参
      if (stype == 'sina') {
        window.open('http://service.weibo.com/share/share.php?url=' + document.location.href + '?sharesource=weibo&title=' + ftit + '&pic=' + flink + '&appkey=2706825840');
      }
      //qq好友接口的传参
      if (stype == 'qq') {
        window.open('http://connect.qq.com/widget/shareqq/index.html?url=' + document.location.href + '?sharesource=qzone&title=' + ftit + '&pics=' + flink + '&summary=' + '');
      }
    }

    微信分享另外做的:

    (1)首先引入了jquery qrcode库,生成链接二维码

    微信二维码弹出层Html代码如下:

    <!-- 生成的微信二维码容器,默认隐藏 -->
    <div class="wx-qrcode-wrapper">
      <!-- 遮罩层 -->
      <div class="mask"></div>
      <!-- 弹出内容 -->
      <div class="wx-qrcode">
        <h4>微信分享 <a href="javascript:;" class="icon-close2" onclick="closeMask()"><img src="images/static_img/icon-close2.png"
              alt=""></a></h4>
        <!-- 二维码生成位置 -->
        <div id="qrcode"></div>
      </div>
    </div>
    <!-- 引入jquery.qrcode库 生成二维码 -->
    <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    /* 二维码生成代码 */
    $("#qrcode").qrcode({
      text: "<{url action=topwap_ctl_item_detail@index item_id=$item.item_id}>", //设置二维码内容 
      render: "table", //设置渲染方式 
       200, //设置宽度,默认生成的二维码大小是 256×256
      height: 200, //设置高度 
      typeNumber: -1, //计算模式 
      background: "#ffffff", //背景颜色 
      foreground: "#000000" //前景颜色 
    });
    
    /* 微信图标上的点击事件,触发二维码弹出 */
    function weixinShare() {
      $('.wx-qrcode-wrapper').show()
    }
    
    /* 关闭二维码弹层 */
    function closeMask() {
      $('.wx-qrcode-wrapper').hide()
    }

    问题:商品详情页pc端和移动端的链接不一样,无法分享到微信怎么办?

    答案:这里有一个问题,就是在pc端进行微信分享的链接并不是当前链接,pc端的链接在移动端是打不开的,会自动跳到首页,所以这里的链接后端处理过了,已处理成对应的移动端商品详情链接。

    参考文章:QQ空间、新浪微博、腾讯微博等一键分享API链接代码

  • 相关阅读:
    高并发网络编程之epoll详解
    位操作实现加减乘除四则运算
    堆和栈的区别
    IT思想类智力题
    C/C++基础总结
    数据库总结
    面试网络总结
    Windows内存管理和linux内存管理
    面试操作系统总结
    数据结构与算法
  • 原文地址:https://www.cnblogs.com/cathy1024/p/10299890.html
Copyright © 2011-2022 走看看