当前位置: 首页 > news >正文

JavaScript实现广告倒计时和跳过广告

倒计时和跳过广告

最近打开手机上的app,映入眼帘的都是一个几秒的广告,带有倒计时,当然如果不喜欢的话可以点击跳过,跳过广告其实质应该就是关闭广告。以前用JavaScript做过一个定时关闭的广告,于是把代码完善了一下,加上倒计时效果和实现跳过部分的代码。
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>定时关闭的广告</title><style type="text/css">.main img {width: 100%;}.adv {position: absolute;z-index: 9;width: 616px;height: 395px;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}.adv .right {position: absolute;right:0;top:10px;font-size: 14px;color:#fff;cursor: pointer;background-color: #333;border-radius: 10px;width: 80px;height: 30px;line-height: 30px;text-align: center;}</style></head><body><div class="main"><img src="images/gugong.png"></div><div class="adv"><div class="right"><span id="counting">5</span>秒跳过</div><div><img src="images/adv.png" alt=""></div></div><script>//关闭广告窗口function closeAdv() {document.querySelector('.adv').style.display = "none";}//秒数var seconds = document.querySelector("#counting").innerText;//定义倒计时函数function countDown() {seconds--;document.querySelector("#counting").innerText = seconds;}var count = setInterval(countDown, 1000)//每隔一秒检查一次秒数是否为0,若为0,关闭广告窗口,清除定时器setInterval(function() {if (seconds == 0) {closeAdv();clearInterval(count);}}, 1000)//点击跳过,关闭广告窗口var skip = document.querySelector('.right');skip.addEventListener('click',closeAdv)</script></body>
</html>

相关文章:

JavaScript实现广告倒计时和跳过广告

倒计时和跳过广告 最近打开手机上的app&#xff0c;映入眼帘的都是一个几秒的广告&#xff0c;带有倒计时&#xff0c;当然如果不喜欢的话可以点击跳过&#xff0c;跳过广告其实质应该就是关闭广告。以前用JavaScript做过一个定时关闭的广告&#xff0c;于是把代码完善了一下&…...

蚂蚁发布金融大模型:两大应用产品支小宝2.0、支小助将在完成备案后

9月8日&#xff0c;在上海举办的外滩大会上&#xff0c;蚂蚁集团正式发布金融大模型。据了解&#xff0c;蚂蚁金融大 模型基于蚂蚁自研基础大模型&#xff0c;针对金融产业深度定制&#xff0c;底层算力集群达到万卡规模。该大 模型聚焦真实的金融场景需求&#xff0c;在“认知…...

Jenkins 持续集成:Linux 系统 两台机器互相免密登录

背景知识 我们把public key放在远程系统合适的位置&#xff0c;然后从本地开始进行ssh连接。 此时&#xff0c;远程的sshd会产生一个随机数并用我们产生的public key进行加密后发给本地&#xff0c;本地会用private key进行解密并把这个随机数发回给远程系统。 最后&#xf…...

Golang-GJSON 快速而简单的方法来从 json 文档获取值

GJSON 是一个 Go 包&#xff0c;它提供了一种快速而简单的方法来从 json 文档获取值。它具有单行搜索、点符号路径、迭代和解析 json 行等功能。 GJSON 也可用于Python和Rust 入门 安装中 要开始使用GJSON 请安装 Go 并运行 go get &#xff1a; $ go get -u github.com/ti…...

echarts根据x轴数据长度判断是否倾斜展示/柱状图上方显示数字

showChart1() { // 通过id初始化let chart1 echarts.init(document.getElementById(this.idName))var option {// 到容器的距离grid: {top: 18,left: 0,right: 4,bottom: 0,},xAxis: [{type: category,data: this.xData,axisLine: {lineStyle: {color: rgba(255, 255, 255, .…...

Eviews用向量自回归模型VAR实证分析公路交通通车里程与经济发展GDP协整关系时间序列数据和脉冲响应可视化...

全文下载链接&#xff1a;http://tecdat.cn/?p27784 河源市是国务院1988年1月7日批准设立的地级市&#xff0c;为了深入研究河源市公路交通与经济发展的关系&#xff0c;本文选取了1988&#xff0d;2014年河源市建市以来24年的地区生产总值&#xff08;GDP&#xff09;和公路通…...

群晖NAS:通过Docker 部署宝塔面板【注册表:cyberbolt/baota】

群晖NAS&#xff1a;通过 Docker 部署宝塔面板【注册表&#xff1a;pch18/baota】 由于 docker 源地址被墙&#xff0c;在面板里面查询不到注册表&#xff0c;使用 ssh 命令行拉取 1、打开 SSH&#xff0c;链接后打开命令行 这里不赘述&#xff0c;具体自行百度 2、下载 镜像…...

pdfjs在线预览组件的使用

前言 pdfjs在线预览组件。 原生浏览器预览pdf文件&#xff0c;存在pdf xss跨站攻击风险。推荐使用pdfjs第三方组件在线预览pdf文件。 如何使用 下载 官方插件下载地址&#xff1a;https://mozilla.github.io/pdf.js/getting_started/ 安装 把下载的文件复制到项目中 使用pd…...

python线程、协程

线程 创建线程对象 from threading import Threadt Thread() # 功能&#xff1a;创建线程对象 # 参数&#xff1a;target 绑定线程函数 # args 元组 给线程函数位置传参 # kwargs 字典 给线程函数键值传参启动线程 t.start() # 启动线程回收线程 t.join([timeout]) # …...

AttributeError: module ‘OpenSSL.SSL’ has no attribute ‘SSLv3_METHOD

这个错误是由于在OpenSSL.SSL模块中找不到SSLv3_METHOD属性导致的。解决这个问题的方法如下&#xff1a; 首先&#xff0c;确保你已经安装了最新版本的cryptography和pyOpenSSL。你可以使用以下命令卸载并重新安装它们&#xff1a; 卸载cryptography&#xff1a;pip uninstall …...

DTCC 2023丨云原生环境下,需要什么样的 ETL 方案?

​2023年8月16日~18日&#xff0c;第14届中国数据库技术大会&#xff08;DTCC 2023&#xff09;于北京隆重召开&#xff0c;拓数派受邀参与本次大会&#xff0c;PieCloudDB 技术专家邱培峰在大会做了《云原生虚拟数仓 PieCloudDB ETL 方案设计与实现》的主题演讲&#xff0c;详…...

在UE4虚幻引擎中加入导航网格体边界体积后丧尸不能移动和发现玩家

UE4系列文章目录 文章目录 UE4系列文章目录前言一、用到的知识点二、问题原因 前言 最近使用ue4做第一人称视角射击游戏发现问题&#xff0c;加入导航网格体边界体积后丧尸不能移动和发现玩家。下图是出现的问题图片 一、用到的知识点 1.行为树&#xff1a;控制并显示AI的决…...

华为数通方向HCIP-DataCom H12-821题库(单选题:221-240)

第201题 BGP 协议用​​ beer default-route-advertise​​ 命令来给邻居发布缺省路由,那么以下关于本地 BGP 路由表变化的描述,正确的是哪一项? A、在本地 BGP 路由表中生成一条活跃的缺省路由并下发给路由表 B、在本地 BGP 路由表中生成一条不活跃的缺省路由,但不下发给…...

aarch64 arm64 部署 stable diffusion webui 笔记 【1】准备 venv 安装pytorch 验证cuda

aarch64 pytorch(没有aarch64对应版本&#xff0c;自行编译) pytorch-v2.0.1 cuda arm64 aarch64 torch 2.0.1cu118 源码编译笔记【2】验证cuda安装 成功_hkNaruto的博客-CSDN博客 创建venv [rootceph3 stable-diffusion-webui]# /usr/local/Python-3.10.12/bin/python3 -m v…...

从方法到目标了解什么是机器学习?

一、什么是机器学习 1、简述 机器学习是 人工智能(AI) 和计算机科学的一个分支,专注于利用数据和算法来模仿人类的学习方式,逐步提高其准确性。过去几十年来,存储和处理能力方面的技术进步催生了一些基于机器学习的创新产品,例如 Netflix 的推荐引擎和自动驾驶汽车。 机…...

Devos勒索病毒:网络安全的新威胁,勒索病毒解密,数据恢复

随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显。近年来&#xff0c;一种名为Devos的勒索病毒在全球范围内肆虐&#xff0c;给企业和个人带来了极大的损失。本文将详细介绍Devos勒索病毒的特点、传播途径以及预防和应对措施&#xff0c;帮助大家更好地认识和防范这一…...

go语言的高级特性

go语言调用C语言 go tool cgo main.go...

华为VRP系统基本操作

1.实验目的 掌握一些常见的路由命令。 2.实验步骤 查看设备版本信息 display version 修改设备的名字 进入系统视图 system-view修改设备名称 sysname Datacom-Router进入接口视图 int g0/0/1进入到接口GigabitEthernet0/0/1的视图 interface GigabitEthernet 0/0/1dis…...

Milvus Cloud扩展变更:为向量数据库注入前沿增强功能

在向量数据库的不断变化中,Milvus Cloud已成为一个改变游戏规则的先锋,革新了我们存储、搜索和分析复杂向量数据的方式。通过最新版本的Milvus Cloud2.3.0,引入了一系列重要的增强和修改,为更强大、更高效的向量数据库解决方案铺平了道路。在本文中,我们将深入探讨Milvus …...

外观模式简介

概念&#xff1a; 外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它提供了一个统一的接口&#xff0c;用于访问子系统中的一组接口。外观模式隐藏了子系统的复杂性&#xff0c;并将其封装在一个简单易用的接口中&#xff0c;使得客户端可以…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...