JS统计Flash被网友点击过的代码

要统计Flash被网友点击过的次数,需要使用JavaScript监听Flash的点击事件并发送统计数据。以下是完整攻略:

步骤一:检测Flash是否存在

在HTML页面中,使用 objectembed 标签嵌入Flash对象,需要先判断Flash是否存在。

<div id="flashContainer">
  <object type="application/x-shockwave-flash" data="flash.swf" id="flashObject">
  </object>
</div>
var flashObject = document.getElementById('flashObject');
if (flashObject && flashObject.PercentLoaded() === 100) {
  // Flash已加载完成
  // 监听Flash的点击事件
  flashObject.addEventListener('click', function() {
    // 统计点击次数
    // 发送AJAX请求
  });
} else {
  // Flash未加载完成,等待加载完成后再处理
  flashObject.addEventListener('load', function() {
    flashObject.addEventListener('click', function() {
      // 统计点击次数
      // 发送AJAX请求
    });
  });
}

步骤二:监听Flash的点击事件

Flash的点击事件是在 Flash 对象上触发的,而非在 HTML 页面上触发的。因此,需要在 JavaScript 中用 addEventListener() 监听 Flash 对象上触发的点击事件。

flashObject.addEventListener('click', function() {
  // 统计点击次数
  // 发送AJAX请求
});

步骤三:发送AJAX请求

在监听到Flash的点击事件时,需要向服务器发送统计数据。可以使用XMLHttpRequest()发送一个AJAX请求。

var xhr = new XMLHttpRequest();
xhr.open('POST', '/path/to/statistics', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('OK');
  }
};
xhr.send(JSON.stringify({
  'flashId': 'flashObject',
  'clicks': 1
}));

上述代码会向 /path/to/statistics 发送一个POST请求,并带上一个JSON对象。JSON对象包含了Flash对象的id和点击次数。服务端可以根据接收到的数据进行统计。

示例一:统计Flash被点击的次数

var flashObject = document.getElementById('flashObject');
if (flashObject && flashObject.PercentLoaded() === 100) {
  // Flash已加载完成
  // 监听Flash的点击事件
  flashObject.addEventListener('click', function() {
    // 统计点击次数
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/path/to/statistics', true);
    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log('OK');
      }
    };
    xhr.send(JSON.stringify({
      'flashId': 'flashObject',
      'clicks': 1
    }));
  });
} else {
  // Flash未加载完成,等待加载完成后再处理
  flashObject.addEventListener('load', function() {
    flashObject.addEventListener('click', function() {
      // 统计点击次数
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/path/to/statistics', true);
      xhr.setRequestHeader('Content-type', 'application/json');
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log('OK');
        }
      };
      xhr.send(JSON.stringify({
        'flashId': 'flashObject',
        'clicks': 1
      }));
    });
  });
}

示例二:将统计结果展示在网页上

<div id="flashStatistics">
  <p>Flash被点击了<span id="flashClicks">0</span>次。</p>
</div>
var flashObject = document.getElementById('flashObject');
if (flashObject && flashObject.PercentLoaded() === 100) {
  // Flash已加载完成
  // 监听Flash的点击事件
  flashObject.addEventListener('click', function() {
    // 统计点击次数
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/path/to/statistics', true);
    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 将统计结果展示在网页上
        var flashClicks = document.getElementById('flashClicks');
        flashClicks.textContent = parseInt(flashClicks.textContent) + 1;
      }
    };
    xhr.send(JSON.stringify({
      'flashId': 'flashObject',
      'clicks': 1
    }));
  });
} else {
  // Flash未加载完成,等待加载完成后再处理
  flashObject.addEventListener('load', function() {
    flashObject.addEventListener('click', function() {
      // 统计点击次数
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/path/to/statistics', true);
      xhr.setRequestHeader('Content-type', 'application/json');
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 将统计结果展示在网页上
          var flashClicks = document.getElementById('flashClicks');
          flashClicks.textContent = parseInt(flashClicks.textContent) + 1;
        }
      };
      xhr.send(JSON.stringify({
        'flashId': 'flashObject',
        'clicks': 1
      }));
    });
  });
}

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS统计Flash被网友点击过的代码 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 17个JavaScript 单行程序

    JavaScript 是一门非常重要的编程语言,具有广泛的应用。在网上,有很多有趣的JavaScript 单行程序,它们虽然只有一行代码,但是实现的功能很有趣。接下来,我来为大家详细讲解 “17个JavaScript 单行程序”的完整攻略,希望对大家学习JavaScript编程有所帮助。 先列出这 17 个单行程序: 在控制台输出一个笑脸 ? 反转字符串 统…

    JavaScript 2023年5月18日
    00
  • JS猜数字游戏实例讲解

    JS猜数字游戏实例讲解 猜数字游戏是一种基于逻辑和推理的有趣互动游戏。下面将通过一个JS猜数字游戏实例来讲解如何实现这个游戏。 游戏规则 猜数字游戏的规则非常简单:系统会自动随机生成一个数,在限定的次数内,玩家需要通过猜测数字来确定该数,如果玩家猜中了,游戏结束,玩家胜利;反之,如果玩家未在限定的次数内猜出该数,则游戏失败。 实现步骤 随机生成目标数字:使用…

    JavaScript 2023年6月10日
    00
  • Javascript笔记一 js以及json基础使用说明

    Javascript笔记一 js以及json基础使用说明 一、Javascript基础 1.1 基本语法 Javascript是一种动态解释性语言,用于为Web应用程序提供交互性和动态性。 以下是Javascript的基本语法: // 在Javascript中, // 之后的所有内容都是注释 /* 多行注释 可以使用这种形式 */ // 定义变量 var x…

    JavaScript 2023年5月18日
    00
  • 详解ECMAScript6入门–Class对象

    以下是详解ECMAScript6入门–Class对象的完整攻略: ECMAScript6入门–Class对象 Class对象的概念 Class语法是ES6中一个新的语法,它提供了更加简洁、清晰的面向对象编程方式。Class本质上是一个语法糖,它的出现让原型继承的写法更加清晰易懂。 在ES6之前,继承只能通过原型链来进行实现,而这样的实现方式并不是很直观,…

    JavaScript 2023年5月27日
    00
  • JS闭包经典实例详解

    JS闭包经典实例详解 什么是闭包? 在了解闭包经典实例之前,我们需要先明确什么是闭包。闭包是指由函数及其相关引用的数据组成的一个整体。在 JavaScript 中,闭包既是函数,也是引用了该函数中自由变量的对象。闭包通过保存引用外部变量的方式可以访问外部的变量。 具体而言,这里的自由变量是指在函数内部定义,但是在函数外部访问它们所定义的词法环境。词法环境是在…

    JavaScript 2023年6月10日
    00
  • JavaScript 如何在线解压 ZIP 文件

    若要在JavaScript中在线解压一个ZIP文件,可以使用一个名为jszip的JavaScript库。jszip可以通过NPM或通过CDN链接进行安装。 步骤 1:引入jszip库 安装jszip后,需要将其引入到你的项目中,可以通过如下方式: <script src="https://cdn.jsdelivr.net/npm/jszip/…

    JavaScript 2023年5月27日
    00
  • JavaScript进阶教程(第二课续)第2/2页

    JavaScript进阶教程(第二课续)第2/2页攻略 一、概述 本教程将对JavaScript进阶知识进行详细讲解,其中包括以下三个部分: 进阶语法特性介绍 函数式编程介绍与应用 异步编程与Promise 二、进阶语法特性介绍 1. Rest参数 Rest参数允许在定义函数时使用不限数量的参数,这些参数将被自动转换为数组,方便对参数进行遍历: functi…

    JavaScript 2023年5月18日
    00
  • vue跳转页面的几种方法(推荐)

    下面是详细讲解“Vue跳转页面的几种方法(推荐)”的完整攻略。 简介 在Vue开发中,页面跳转是非常常见的操作。本文主要介绍Vue跳转页面的几种方法,旨在为Vue初学者提供一些参考。 方法一:Vue-router路由跳转 Vue-router是Vue官方提供的路由管理插件,可以很方便地实现页面的跳转。 步骤如下: 安装Vue-router:在命令行中执行以下…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部