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日

相关文章

  • JavaScript对JSON数组简单排序操作示例

    下面是针对“JavaScript对JSON数组简单排序操作”的完整攻略。 一、什么是JSON数组 JSON数组(JavaScript Object Notation Array)是一种数据格式,是JavaScript语言中的一种数据结构,它用于存储一组相关类型的数据,这些数据以键值对的形式存储,基本格式为:[key:value]。其中,键表示属性名称,值表示…

    JavaScript 2023年5月27日
    00
  • JavaScript自定义Promise实现流程

    下面是“JavaScript自定义Promise实现流程”的完整攻略。 Promise简介 Promise是ES6新增的异步编程解决方案,主要用于解决回调地狱问题。Promise对象代表一个异步操作,可以将异步操作的执行结果以回调函数的形式传递给程序员,从而实现异步编程。 自定义Promise实现流程 下面我们将介绍如何实现一个简单的Promise,包括Pr…

    JavaScript 2023年5月28日
    00
  • Javascript入门学习第二篇 js类型第1/2页

    以下是“Javascript入门学习第二篇 js类型第1/2页”的完整攻略: Javascript类型 Javascript是一种弱类型语言,因此不需要在声明变量时指定变量的类型。Javascript中的类型可以分为以下几类: 原始类型(primitive types):包括数字(number)、字符串(string)、布尔值(boolean)、空(null…

    JavaScript 2023年6月10日
    00
  • html页面展示json数据并格式化的方法

    展示 JSON 数据并格式化,通常有以下两种方法: 方法一:通过 JavaScript 进行格式化 通过 JavaScript 获取到 JSON 数据之后,可以使用 JSON 的 stringify 方法进行格式化,再将格式化后的结果插入到 HTML 页面中即可。 示例代码: <!DOCTYPE html> <html> <he…

    JavaScript 2023年5月27日
    00
  • 详解js静态检查工具eslint配置文件

    这里是详解js静态检查工具eslint配置文件的完整攻略: 一、什么是eslint? ESLint 是一种静态检查工具,可以用于检查 JavaScript 代码中的潜在问题。事实上,ESLint 是最流行的 JavaScript 静态检查工具之一。 二、eslint 配置文件 为了让 ESLint 对某些代码或规则进行特殊处理,我们需要在项目中添加一个配置文…

    JavaScript 2023年5月27日
    00
  • JS动态创建DOM元素的方法

    JS动态创建DOM元素的方法指的是通过JavaScript代码,通过createElement和appendChild等方法动态生成HTML标签,从而实现动态更新网页内容的效果。 下面是实现JS动态创建DOM元素的步骤: 获取需要操作的元素 通过document对象的各种方法获取需要操作的元素。例如:通过getElementById获取ID为”contain…

    JavaScript 2023年6月10日
    00
  • 简介JavaScript中search()方法的使用

    当我们需要在一个字符串中查找一个子字符串时,可以使用JavaScript中的search()方法。这个方法返回的是被查找子字符串的下标位置。接下来,我将详细讲解它的用法。 语法 string.search(searchvalue) searchvalue可以是一个字符串或一个正则表达式。 参数 searchvalue: 要查找的子字符串或正则表达式。如果是字…

    JavaScript 2023年6月10日
    00
  • Chart.js功能与使用方法小结

    Chart.js功能与使用方法小结 什么是Chart.js Chart.js是一款简单灵活的JavaScript图表库,可以用于绘制各种类型的图表,包括线图、柱状图、雷达图、饼图等等。Chart.js基于HTML5的Canvas元素实现,具有良好的兼容性和性能优势。 安装与引入 在使用Chart.js之前,需要先进行安装和引入。可以通过以下方式进行安装: n…

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