首页 > 其他分享 >定时器效果(实现打开一个网页一段时间后自动跳转到另一个网页)(感应灯效果)

定时器效果(实现打开一个网页一段时间后自动跳转到另一个网页)(感应灯效果)

时间:2024-09-20 21:50:17浏览次数:3  
标签:function 网页 效果 window background 跳转 setTimeout

实现目标;打开一个网页一段时间后(自定义)自动跳转到另一个网页。

相关要点:定时器window.setTimeout(调用函数,延时时间)(window在调用时可省略)

eg:

window.setTimeout( "window.location='https://id5.163.com/index.html'", 1000 );

注:此语句要写在js文件或<script></script>中。

即打开一个网页一秒后自动跳转到指定的另一个网页。

因此,我们可以利用它实现一个感应灯的效果,即当点击按钮时,灯自动亮起,三秒后自动熄灭。(也可点击按钮熄灭)

效果:

2f191cf1912e4350b55ac5dcb939a69e.gif

完整代码:

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title></title>
		<style>
			#blod {
				width: 100px;
				height: 100px;
				background-color: black;
			}
		</style>
		<script>
			function on ()
			{
				document.getElementById( 'blod' ).style.background = 'red'
				window.setTimeout( function ()
				{
					off()
				}, 3000 )
			}
			function off ()
			{
				document.getElementById( 'blod' ).style.background = 'black'
			}
		</script>
	</head>

	<body>
		<div id="blod"></div>
		<button onclick="on()">开</button>
		<button onclick="off()">关</button>
	</body>

</html>

 

 

标签:function,网页,效果,window,background,跳转,setTimeout
From: https://blog.csdn.net/2201_75321887/article/details/142370191

相关文章

  • 使用HTML+JS实现国庆节倒计时网页实例代码
    马上就是每年10月1日的国庆节了,为了增加节日氛围,许多网站会设置倒计时,以提醒人们国庆节的临近。本文站长工具网将介绍如何使用HTML和JavaScript创建一个简单的国庆节倒计时网页,并附上完整的实例代码供大家参考。1.网页设计基础在开始编写代码之前,我们需要了解一些基本的网......
  • 【第二代GPT-SoVITS教程】效果确实又好又快,小白也能轻松克隆任何声音!
    AI正编织出一个日益奇幻的世界!马斯克的跨界舞蹈、在线空间的科幻风潮,无不展现出AI技术的魔力。特别是《黑神话:悟空》恶搞视频,通过AI克隆声音,不仅听起来与原声几乎一致,而且趣味十足,赢得了百万播放量和数万点赞。.......在过去,实现高质量的声音克隆往往需要大量的语音样本和复杂的操......
  • js实现网页端录音功能
    1、代码首先安装依赖包:recorderxnpminstallrecorderx-S<template><divclass="container"><divclass="mt-30"><el-button@click="onStartRecord">开始录音</el-button><el-button@click......
  • 抖音怎么录屏保存?网页录屏和直播内容录制屏幕工具软件推荐
    在数字化时代,直播已成为我们获取信息和娱乐的重要方式。无论是抖音上的热门直播,还是其他平台的精彩内容,我们都希望能够随时回顾这些瞬间。然而,直播的即时性意味着一旦错过,就可能再也看不到了。幸运的是,有多种录屏软件可以帮助我们捕捉并保存这些珍贵的时刻。以下是几款适合录制......
  • three.js shader 入门 红旗飘动效果
    预览效果1、懒人直接上代码,全部代码效果import*asTHREEfrom"https://esm.sh/three";import{OrbitControls}from"https://esm.sh/three/examples/jsm/controls/OrbitControls";consttextureLoader=newTHREE.TextureLoader()letcontrols;letscene:TH......
  • 数据清洗与预处理:从网页中提取的数据处理技术
    引言在当今数据驱动的时代,数据的质量和准确性对于数据分析、机器学习和数据挖掘至关重要。然而,从网页中提取的数据往往存在诸多问题,如格式不统一、重复数据、缺失值、异常值等。因此,数据清洗与预处理成为数据处理流程中不可或缺的一环。本文将从数据清洗的定义、重要性、具体步骤、......
  • 第2章 网页制作的排版方法
    2.1文字与段落排版2.1.1段落标签段落标签<p>是HTML格式中特有的段落元素,其其语法为:<palign="left|center|right">文字</p>属性align:设置段落文字在网页上的对齐方式,包括left(左对齐)、center(居中)和right(右对齐),默认为left。格式中的“|”表示或者,级多项选一项。2.1.2......
  • 图标切换效果
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>IconToggle</title>......
  • Vue 目录树正常跳转,浏览器新增页面地址栏输入后created函数请求不走完
    在vue树中开发当created()涉及到多个接口请求的时候,一般我们都是用来渲染页面或者给变量初始化,在实际开发中我遇到了浏览器新增页面用地址直接访问页面数据以默认值展示导致报错,当发现created()涉及多个请求赋初值的情况,将请求用{}包起来保证顺序执行,当每个请求是独立的就会有异步......
  • 第二章 网页制作的排版方法
    2.1文字与段落排版2.1.1段落标签在HTML中,段落标签用于定义一个段落。常见的段落标签是<p>标签。段落标签可以在网页中创建一个独立的段落,浏览器会自动在段落前后添加一些空白间距。<p>这是一个段落。</p><p>这是另一个段落。</p>2.1.2标题标签HTML提供了六个级别的......