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

JavaScript 高级实例集合

news 文章来源：https://blog.csdn.net/m0_62617719/article/details/129376395 2024/12/17 6:31:20

文章目录

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>

运行效果

JavaScript 高级实例集合

文章目录JavaScript 高级实例集合创建一个欢迎 cookie简单的计时另一个简单的计时在一个无穷循环中的计时事件带有停止按钮的无穷循环中的计时事件使用计时事件制作的钟表创建对象的实例创建用于对象的模板JavaScript 高级实例集合创建一个欢迎 cookie 源码 <!DOCTYPE ht…...

编程日记 2023/3/11 3:00:38

Flutter（五）容器类组件

布局类组件包含多个子组件，而容器类组件只包含一个子组件目录填充（Padding）装饰容器（DecoratedBox）变换（Transform）Transform.translate 平移Transform.rotate 旋转Transform.scale 缩放Rotate…...

编程日记 2023/3/11 2:59:36

html, body {width: 100%;height: 100%;}.first {width: 50%;height: 50%;margin: auto;background-color: pink;}.second {width: 50%;height: 50%;float: left;background-color: greenyellow;}.third {width: 50%;height: 50%;float: left;background-color: yellow;}...

编程日记 2023/3/11 2:58:33

软件测试-性能测试-基础知识

文章目录 1.性能测试理论1.1 相关概念1.2 性能测试指标2.性能测试策略2.1 基准测试2.2 负载测试2.3 稳定性测试2.4 其他测试策略3.性能测试的流程3.1 需求分析3.2 编写性能测试计划和方案3.3 编写性能测试用例3.4 性能测试执行3.5 性能测试报告4.性能测试工具4.1 Loadrunner4.2…...

编程日记 2023/3/11 2:57:30

java多线程与线程池-02线程池与锁

线程池与锁第4章　线程池入门 4.1　ThreadPoolExecutor ThreadPoolExecutor是应用最广的底层线程池类，它实现了Executor和ExecutorService接口。 4.1.1　创建线程池下面创建一个线程池，通过调整线程池构造函数的参数来了解线程池的运行特性。把核心线程数设置为3，最大…...

编程日记 2023/3/11 2:56:27

AB测试——流程介绍（设计实验）

前言： 作为AB测试的学习记录，接上文内容， 本文继续介绍假设建立和实验设计部分，包括实验对象、样本量计算（显著性水平、统计功效及最小可检测效应）、实验周期。相关文章： AB测试——原理介绍 A…...

编程日记 2023/3/11 2:55:22

C++中的智能指针有哪些？分别解决的问题以及区别？

1.C中的智能指针有4种，分别为：shared_ptr、unique_ptr、weak_ptr、auto_ptr，其中auto_ptr被C11弃用。 2.使用智能指针的原因申请的空间（即new出来的空间），在使用结束时，需要delete掉&#xff0…...

编程日记 2023/3/11 2:54:19

通达信捉妖改良CCI指标公式，简洁巧妙

高端的食材，往往只需要简单的烹饪方式。好的指标也是一样，只需要简单处理，就可以实现不错的效果。捉妖改良CCI指标公式属于意外之喜，编写指标时写错了，研究后发现结果比原想法更好。捉妖改良CCI指标公式利用了CCI&am…...

编程日记 2023/3/11 2:53:15

「Python 基础」面向对象编程

文章目录1. 面向对象编程类和实例访问限制继承和多态type()isinstance()dir()实例属性和类属性2. 面向对象高级编程\_\_slots\_\_property多重继承定制类枚举类元类1. 面向对象编程 Object Oriented Programming 简称 OOP，一种程序设计思想，以对象为程…...

编程日记 2023/3/11 2:52:13

【K3s】第23篇一篇文章带你学习k3s私有镜像仓库配置

目录 1、私有镜像仓库配置 2、registries.yaml Mirrors Configs 1、私有镜像仓库配置可以配置 Containerd 连接到私有镜像仓库，并使用它们在节点上拉取私有镜像。启动时，K3s 会检查/etc/rancher/k3s/中是否存在registries.yaml文件，并指示 containerd 使...

编程日记 2023/3/11 2:51:11

Redis学习【12】之Redis 缓存

文章目录前言一 Jedis 简介二使用 Jedis2.1 测试代码2.2 使用 JedisPool2.3 使用 JedisPooled2.4 连接 Sentinel 高可用集群2.5 连接分布式系统2.6 操作事务三 Spring Boot整合Redis3.1 创建工程3.2 定义 pom 文件3.3 完整代码3.4 总结四高并发问题4.1 缓存穿透4.2 缓存击穿4…...

编程日记 2023/3/11 2:50:09

Bootargs 参数

bootargs 的参数有很多，而且随着 kernel 的发展会出现一些新的参数，使得设置会更加灵活多样1。除了我之前介绍的 root、console、earlyprintk 和 loglevel 之外，还有以下一些常用的参数：init: 用来指定内核启动后执行的第一个程序…...

编程日记 2023/3/11 2:49:04

Mybatis框架源码笔记(七)之Mybatis中类型转换模块(TypeHandler)解析

1、JDBC的基本操作回顾这里使用伪代码概括一下流程: 对应数据库版本的驱动包自行下载加载驱动类 (Class.forName("com.mysql.cj.jdbc.Driver"))创建Connection连接: conn DriverManager.getConnection("jdbc:mysql://数据库IP:port/数据库名称?useUnico…...

编程日记 2023/3/11 2:48:02

论文阅读《Block-NeRF: Scalable Large Scene Neural View Synthesis》

论文地址：https://arxiv.org/pdf/2202.05263.pdf 复现源码：https://github.com/dvlab-research/BlockNeRFPytorch 概述 Block-NeRF是一种能够表示大规模环境的神经辐射场（Neural Radiance Fields）的变体，将 NeRF 扩展到…...

编程日记 2023/3/11 2:46:58

【Matlab】如何设置多个y轴

MTALAB提供了创建具有两个y轴的图，通过help yyaxis就能看到详细的使用方式。但是如果要实现3个及以上y轴的图，就没有现成的公式使用了，如下图所示。具体代码 % 数据准备 x10:0.01:10; y1sin(x1); x20:0.01:10; y2cos(x2); x30:0.01:10;…...

编程日记 2023/3/11 2:45:55

圆桌(满足客人空座需求，合理安排客人入座圆桌，准备最少的椅子)

CSDN周赛第30期第四题算法解析。 (本文获得CSDN质量评分【91】)【学习的细节是欢悦的历程】Python 官网：https://www.python.org/ Free：大咖免费“圣经”教程《 python 完全自学教程》，不仅仅是基础那么简单…… 地址：https://lq…...

编程日记 2023/3/11 2:44:52

如何入门大数据？

我们首先了解一下大数据到底是什么~ 大数据开发做什么？ 大数据开发分两类，编写Hadoop、Spark的应用程序和对大数据处理系统本身进行开发。大数据开发工程师主要负责公司大数据平台的开发和维护、相关工具平台的架构设计与产品开发、网络日志大数据分…...

编程日记 2023/3/11 2:43:45

如何在Vite项目中使用Lint保证代码质量

通常，大型前端项目都是多人参与的，由于开发者的编码习惯和喜好都不尽相同，为了降低维护成本，提高代码质量，所以需要专门的工具来进行约束，并且可以配合一些自动化工具进行检查，这种专门的工具称为Lint，可能大家接触得最多就是ESLint。对于实现自动化代码规范检查及修…...

编程日记 2023/3/11 2:42:42

Spark高手之路1—Spark简介

文章目录Spark 概述1. Spark 是什么2. Spark与Hadoop比较2.1 从时间节点上来看2.2 从功能上来看3. Spark Or Hadoop4. Spark4.1 速度快4.2 易用4.3 通用4.4 兼容5. Spark 核心模块5.1 Spark-Core 和弹性分布式数据集(RDDs)5.2 Spark SQL5.3 Spark Streaming5.4 Spark MLlib5.5…...

编程日记 2023/3/11 2:41:34

社科院与杜兰大学金融管理硕士项目——人生没有太晚的开始，不要过早的放弃

经常听到有人问，“我都快40了，现在学车晚不晚呢”“现在考研晚不晚？”“学画画晚不晚？”提出这些疑问的人，往往存在拖延，想法只停留在想的阶段，从来不去行动。当看到周边行动起来的人开始享受成…...

编程日记 2023/3/11 2:40:31

Spatial-Temporal Graph ODE Networks for Traffic Flow Forecasting

Spatial-Temporal Graph ODE Networks for Traffic Flow Forecasting 摘要交通流量的复杂性和长范围时空相关性是难点经典现存的工作： 1.利用浅图神经网络（shallow graph convolution networks）和时间提取模块去分别建模空间和时间依赖…...

编程日记 2023/3/11 2:39:27

IP协议+以太网协议

在计算机网络体系结构的五层协议中，第三层就是负责建立网络连接，同时为上层提供服务的一层，网络层协议主要负责两件事：即地址管理和路由选择，下面就网络层的重点协议做简单介绍~~ IP协议网际协议IP是TCP/IP体系中两…...

编程日记 2023/3/11 2:38:19

可视化组件届的仙女‖蝴蝶结图、玫瑰环图、小提琴图

在上一篇内容中为大家介绍了几个堪称可视化组件届吴彦祖的高级可视化图表。既然帅哥有了，怎么能少得了美女呢？今天就为大家介绍几个可视化组件届的“美女姐姐”，说一句是组件届的刘亦菲不为过。蝴蝶结图蝴蝶结图因其形似蝴蝶结而得名&#xf…...

编程日记 2023/3/11 2:37:15

人的高级认知：位置感

你知道吗？人有个高级认知：位置感位置感是啥？咋提高位置感？ 趣讲大白话：知道自己几斤几两【趣讲信息科技99期】 ******************************* 位置感就是对自己所处环境和自身存在的领悟属于人生智慧来源于阅历…...

编程日记 2023/3/11 2:36:11

MATLAB——信号的采样与恢复

**题目：**已知一个连续时间信号其中：f01HZ，取最高有限带宽频率fm5f0。分别显示原连续时间信号波形和 3种情况下抽样信号的波形。并画出它们的幅频特性曲线，并对采样后的信号进行恢复。 step1.绘制出采样信号这部分相对简单…...

编程日记 2023/3/11 2:35:07

Docker Nginx 反向代理

最近在系统性梳理网关的知识，其中网关的的功能有一个是代理，正好咱们常用的Nginx也具备次功能，今天正好使用Nginx实现一下反向代理，与后面网关的代理做一个对比，因为我使用的docker安装的Nginx，与直接部署N…...

编程日记 2023/3/11 2:34:04

手把手教你实现书上的队列，进来试试？

一.队列的基本概念队列的定义队列（queue）是只允许在一端进行插入操作，而在另一端进行删除操作的线性表。队列是一种先进先出（First In First Out）的线性表，简称FIFO。允许插入的一端称为队尾，允…...

编程日记 2023/3/11 2:33:00

【springboot】springboot介绍

学习资料 SpringBoot 语雀 (yuque.com)【尚硅谷】SpringBoot2零基础入门教程（spring boot2干货满满）_哔哩哔哩_bilibiliSpringBoot2核心技术与响应式编程: SpringBoot2核心技术与响应式编程 (gitee.com) Spring 和Springboot 1、Spring能做什么 1.1…...

编程日记 2023/3/11 2:31:58

PMP项目管理项目整合管理

目录1 项目整合管理概述2 制定项目章程3 制定项目管理计划4 指导与管理项目工作5 管理项目知识6 监控项目工作7 实施整体变更控制8 结束项目或阶段1 项目整合管理概述项目整合管理包括对隶属于项目管理过程组的各种过程和项目管理活动进行识别、定义、组合、统一和协调的各个…...

编程日记 2023/3/11 2:30:53

ADS中导入SPICE模型

这里写目录标题在官网中下载SPICE模型ADS中导入SPICE模型在官网中下载SPICE模型英飞凌官网 ADS中导入SPICE模型点击option，设置导入选项然后点击ok 如果destination选择当前的workspace，那么导入完成之后如下： （推荐使用…...

编程日记 2023/3/11 2:29:49

电子商务网站运营与管理/淘宝运营主要做些什么

最近项目需要在同一台电脑上配置多个git账号，记录下具体配置过程。主要包括以下两种情况 1：配置多个不同主机的git账号假设是配置一个是oschina下的A账号，另一个是github的B账号。生成和密钥和服务器建立可信连接。需要注意的是配置多个…...

编程日记 2024/12/17 4:26:24

国土局网站建设制度/谷歌商店下载官方正版

软工读书笔记1——《人月神话》第一次接触软件工程这门学科，也是第一次做IT类图书的读书笔记，我选择了《人月神话》这本书，一周的时间很有限我只是大致过了一遍全书，对部分感兴趣的章节进行了精度，我也就拣这些谈谈自…...

编程日记 2024/12/17 1:07:17

苏州seo网站推广/关键词优化推广排名

...

编程日记 2024/12/16 21:45:48

教学网站建设效益/域名解析

[时间：2018-03] [状态：Open] [关键词：流媒体，stream，HLS] 本文是上一篇的后续部分，链接如下：HLS协议综述 2 playlist(m3u8)介绍 HLS中的playlist是一个UTF-8编码的文本文件，其中包含…...

编程日记 2024/12/16 21:20:31

电子商务网站开发的基本流程/seo案例分析

Abstract在FPGA開發中，常會用到Altera所提供的Megafunction與LPM加速開發，這要如何使用ModelSim作仿真呢? Introduction使用環境：Quartus II 8.1 ModelSim-Altera 6.3g_p1 ModelSim SE 6.3e 在(筆記) 如何使用ModelSim作前仿真與後仿真? …...

编程日记 2024/12/16 20:26:45

怎样做金融网站/搜索关键词的方法

一、问题描述当引用第三方.cpp/.h文件到VC 2019的MFC项目中，编译时总会报忘记向源中添加“#include “pch.h””的报错提醒。详细错误为： 严重性代码说明项目文件行禁止显示状态错误 C1010 在查找预编译头时遇到意外的文件结尾。是否忘记了向…...

编程日记 2024/12/16 19:34:11