JavaScript 高级实例集合

news2024/11/25 5:53:28

文章目录

  • JavaScript 高级实例集合
    • 创建一个欢迎 cookie
    • 简单的计时
    • 另一个简单的计时
    • 在一个无穷循环中的计时事件
    • 带有停止按钮的无穷循环中的计时事件
    • 使用计时事件制作的钟表
    • 创建对象的实例
    • 创建用于对象的模板

JavaScript 高级实例集合

在这里插入图片描述

创建一个欢迎 cookie

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<head>
<script>
function setCookie(cname,cvalue,exdays){
	var d = new Date();
	d.setTime(d.getTime()+(exdays*24*60*60*1000));
	var expires = "expires="+d.toGMTString();
	document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i=0; i<ca.length; i++) {
		var c = ca[i].trim();
		if (c.indexOf(name)==0) return c.substring(name.length,c.length);
	}
	return "";
}
function checkCookie(){
	var user=getCookie("username");
	if (user!=""){
		alert("Welcome again " + user);
	}
	else {
		user = prompt("Please enter your name:","");
  		if (user!="" && user!=null){
    		setCookie("username",user,30);
    	}
	}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
  • 运行效果
    在这里插入图片描述

简单的计时

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

另一个简单的计时

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<head>
<script>
function timedText(){
	var x=document.getElementById('txt');
	var t1=setTimeout(function(){x.value="2 seconds"},2000);
	var t2=setTimeout(function(){x.value="4 seconds"},4000);
	var t3=setTimeout(function(){x.value="6 seconds"},6000);
}
</script>
</head>
<body>
<form>
<input type="button" value="显示文本时间!" onclick="timedText()" />
<input type="text" id="txt" />
</form>
<p>点击上面的按钮，输出的文本将告诉你2秒，4秒，6秒已经过去了。</p>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

在一个无穷循环中的计时事件

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
var c=0;
var t;
var timer_is_on=0;
function timedCount(){
	document.getElementById('txt').value=c;
	c=c+1;
	t=setTimeout("timedCount()",1000);
}
function doTimer(){
	if (!timer_is_on)
	{
		timer_is_on=1;
		timedCount();
	}
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计数!" onClick="doTimer()">
<input type="text" id="txt">
</form>
<p>单击按钮，输入框将从0开始一直计数。</p>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

带有停止按钮的无穷循环中的计时事件

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
var c=0;
var t;
var timer_is_on=0;
function timedCount(){
	document.getElementById('txt').value=c;
	c=c+1;
	t=setTimeout(function(){timedCount()},1000);
}
function doTimer(){
	if (!timer_is_on){
		timer_is_on=1;
		timedCount();
	}
}
function stopCount(){
	clearTimeout(t);
	timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计数!" onclick="doTimer()" />
<input type="text" id="txt" />
<input type="button" value="停止计数!" onclick="stopCount()" />
</form>
<p>
单击开始计数按钮，按下时开始计数，输入框将从0开始一直计数。单击停止计数按钮，按下时停止计数，再次点击开始计数按钮，又再次开始计数。
</p>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

使用计时事件制作的钟表

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
function startTime(){
	var today=new Date();
	var h=today.getHours();
	var m=today.getMinutes();
	var s=today.getSeconds();// 在小于10的数字钱前加一个‘0’
	m=checkTime(m);
	s=checkTime(s);
	document.getElementById('txt').innerHTML=h+":"+m+":"+s;
	t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
	if (i<10){
		i="0" + i;
	}
	return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
  • 运行效果
    在这里插入图片描述

创建对象的实例

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<script>
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
document.write(person.firstname + " is " + person.age + " years old.");
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述

创建用于对象的模板

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<script>
function person(firstname,lastname,age,eyecolor){
	this.firstname=firstname;
	this.lastname=lastname;
	this.age=age;
    this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/401763.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Spring源码阅读（基础）

Spring源码阅读（基础）

第一章&#xff1a;bean的元数据 1.bean的注入方式&#xff1a; 1.1 xml文件 1.2 注解 Component&#xff08;自己写的类才能在上面加这些注解&#xff09; 1.3配置类&#xff1a; Configuration 注入第三方数据源之类 1.4 import注解 &#xff08;引用了Myselector类下…
阅读更多...
1/4车、1/2车、整车悬架模糊PID控制仿真合集

1/4车、1/2车、整车悬架模糊PID控制仿真合集

目录 前言 1. 1/4悬架系统 1.1数学模型 1.2仿真分析 2. 1/2悬架系统 2.1数学模型 2.2仿真模型 2.3仿真分析 3. 整车悬架系统 3.1数学模型 3.2仿真分析 4.总结 前言 前面几篇文章介绍了LQR、SkyHook、H2/H∞、PID控制&#xff0c;接下来会继续介绍滑模、反步法、M…
阅读更多...
个性化营销：您需要知道的信息

个性化营销：您需要知道的信息

个性化营销在现代企业中风靡一时。我们将剖析您需要了解的有关个性化营销的信息&#xff0c;一起来了解一下吧。 什么是个性化营销&#xff1f; 个性化营销是一种一对一营销形式&#xff0c;它使用实时用户数据和分析来传递品牌信息并针对特定潜在客户。 它与传统营销不同&…
阅读更多...
【教学典型案例】23.部分服务总是频繁出现掉线情况

【教学典型案例】23.部分服务总是频繁出现掉线情况

目录一&#xff1a;背景介绍问题描述解决二&#xff1a;问题分析过程解决过程设计到的知识1、nacos的data目录作用。2、nacos data目下的protocol目录3、nacos ip混乱问题三&#xff1a;总结一&#xff1a;背景介绍 问题描述 因为某些特殊原因需要把nacos迁移到另一个版本的n…
阅读更多...
Day913.反向代理和网关是什么关系 -SpringBoot与K8s云原生微服务实践

Day913.反向代理和网关是什么关系 -SpringBoot与K8s云原生微服务实践

反向代理和网关是什么关系 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于反向代理和网关是什么关系的内容。 一、反向代理 反向代理 是一种网络技术&#xff0c;用于将客户端的请求转发到一个或多个服务器上&#xff0c;并将响应返回给客户端。与正向代理不同&am…
阅读更多...
自动驾驶控制概况

自动驾驶控制概况

文章目录1. 第一章行为决策在自动驾驶系统架构中的位置2. 路径跟踪控制的种类2.1 基于自行车模型的路径跟踪控制算法2.1.1 纯跟踪控制&#xff08;Pure Pursuit&#xff09;算法2.1.2 后轮反馈控制算法&#xff08;Rear wheel feedback&#xff09;2.1.3前轮反馈控制算法&#…
阅读更多...
java面试-java基础

java面试-java基础

char 变量能不能存贮一个中文汉字&#xff1f;为什么&#xff1f; char 变量可以存贮一个汉字&#xff0c;因为 Java 中使用的默认编码是 Unicode &#xff0c;一个 char 类型占 2 个字节&#xff08;16 bit&#xff09;&#xff0c;一个汉字是2个字节&#xff0c;所以放一个中…
阅读更多...
＜ JavaScript小技巧：Array构造函数妙用 ＞

＜ JavaScript小技巧：Array构造函数妙用 ＞

文章目录&#x1f449; Array构造函数 - 基本概念&#x1f449; Array函数技巧用法1. Array.of()2. Array.from()3. Array.reduce()4. (Array | String).includes()5. Array.at()6. Array.flat()7. Array.findIndex()&#x1f4c3; 参考文献往期内容 &#x1f4a8;今天这篇文章…
阅读更多...
K8s:通过 Kubeshark 体验 大白鲨(Wireshark)/TCPDump 监控 Kubernetes 集群

K8s:通过 Kubeshark 体验 大白鲨(Wireshark)/TCPDump 监控 Kubernetes 集群

写在前面 分享一个 k8s 集群流量查看器很轻量的一个工具&#xff0c;监控方便博文内容涉及&#xff1a; Kubeshark 简单介绍Windows、Linux 下载运行监控DemoKubeshark 特性功能介绍 理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。…
阅读更多...
【强化学习】强化学习数学基础：值函数近似

【强化学习】强化学习数学基础：值函数近似

值函数近似Value Function ApproximationMotivating examples: curve fittingAlgorithm for state value estimationObjective functionOptimization algorithmsSelection of function approximatorsIllustrative examplesSummary of the storyTheoretical analysisSarsa with …
阅读更多...
【springboot】springboot介绍

【springboot】springboot介绍

学习资料 SpringBoot 语雀 (yuque.com)【尚硅谷】SpringBoot2零基础入门教程&#xff08;spring boot2干货满满&#xff09;_哔哩哔哩_bilibiliSpringBoot2核心技术与响应式编程: SpringBoot2核心技术与响应式编程 (gitee.com) Spring 和Springboot 1、Spring能做什么 1.1…
阅读更多...
STM32F1开发实例-振动传感器(机械)

STM32F1开发实例-振动传感器(机械)

振动(敲击)传感器 振动无处不在&#xff0c;有声音就有振动&#xff0c;哒哒的脚步是匆匆的过客&#xff0c;沙沙的夜雨是暗夜的忧伤。那你知道理科工程男是如何理解振动的吗&#xff1f;今天我们就来讲一讲本节的主角&#xff1a;最简单的机械式振动传感器。 下图即为振动传…
阅读更多...
第18天-商城业务（商品检索服务，基于Elastic Search完成商品检索）

第18天-商城业务（商品检索服务，基于Elastic Search完成商品检索）

1.构建商品检索页面 1.1.引入依赖 <!-- thymeleaf模板引擎 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!-- 热更新 --><…
阅读更多...
Revit开洞问题：结构专业开洞口剖面显示及一键开洞

Revit开洞问题：结构专业开洞口剖面显示及一键开洞

一、Revit中关于结构专业开洞口剖面显示问题 Revit作业的时候&#xff0c;我们不仅只为了一个最后的三维立体模型,我们需要的是一个符合国家以及本院制图标准的一个出图样式,这时候就会出现各种各样的显示问题&#xff0c;本期就一个结构专业开洞显示问题&#xff0c;跟大家一起…
阅读更多...
【CSS】CSS 背景设置 ③ ( 背景位置-长度值设置 | 背景位置-长度值方位值同时设置 )

【CSS】CSS 背景设置 ③ ( 背景位置-长度值设置 | 背景位置-长度值方位值同时设置 )

文章目录一、背景位置-长度值设置二、背景位置-长度值方位值同时设置三、完整代码示例一、背景位置-长度值设置 长度值设置 效果展示 : 设置背景位置为具体值 10px 50px : 粉色区域是盒子的区域 , 图片背景位于盒子位置 x 轴方向 10 像素 , y 轴方向 50 像素 ; 在水平方向上 ,…
阅读更多...
数组和指针面试题的补充(细的抠jio)

数组和指针面试题的补充(细的抠jio)

生命是一条艰险的峡谷&#xff0c;只有勇敢的人才能通过。 ——米歇潘 说明&#xff1a;用的vs都是x86的环境&#xff0c;也就是32位平台。 建议&#xff1a;对于难题来说&#xff0c;一定要配合画图来解决问题。 第一题&#xff1a; #include<stdio.h> int…
阅读更多...
脉脉疯传！2023年程序员生存指南；多款prompt效率加倍工具；提示工程师最全秘籍；AI裁员正在发生 | ShowMeAI日报

脉脉疯传！2023年程序员生存指南；多款prompt效率加倍工具；提示工程师最全秘籍；AI裁员正在发生 | ShowMeAI日报

&#x1f440;日报合辑 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f916; 2023年程序员生存指南 不要在互联网公司做低代码项目 保证一定强度的刷题&#xff0c;不要用go刷题&#xff0c;用cpp或者java&#xff0c;性价…
阅读更多...
DPDK系列之八虚拟化virtio

DPDK系列之八虚拟化virtio

一、virtio的介绍 在一篇文章中对virtio进行了简单的说明。在早期的虚拟化的过程中&#xff0c;无论是KVM还是Vmware亦或是Xen&#xff0c;每个平台想当然的是自己搞自己的IO接口。这就和现在国内的互联各个平台都是大而全一样&#xff0c;怎么可能我用你的支付接口呢&#xf…
阅读更多...
Python高频面试题——装饰器（带大家理解装饰器的本质）

Python高频面试题——装饰器（带大家理解装饰器的本质）

装饰器概念装饰器本质上是一个python函数&#xff0c;它可以让其他函数在不需要做任何代码变动的前提下增加额外功能&#xff0c;装饰器的返回值也是一个函数对象。它经常用于有切面需求的场景&#xff0c;比如&#xff1a;插入日志、性能测试、事务处理、缓存、权限验证等场景…
阅读更多...
【C++】通过stack、queue、deque理解适配器模式

【C++】通过stack、queue、deque理解适配器模式

破镜不能重圆&#xff0c;枯木可以逢春。 文章目录一、stack1.stack的介绍2.stack相关OJ题&#xff08;巧妙利用stack数据结构的特征&#xff09;3.stack的模拟实现二、queue1.queue的介绍2.queue的相关OJ题&#xff08;巧妙利用queue数据结构的特征&#xff09;3.queue的模拟实…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023