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

JavaScript 高级实例集合

news 来源：原创 2025/4/25 8:02:02

文章目录

  • 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>
  • 运行效果
    在这里插入图片描述

相关文章：

  • 【Android -- 开源库】表格 SmartTable 的基本使用
  • 2023华为面试真题
  • 使用ControlNet 控制 Stable Diffusion
  • 【Hello Linux】命令行解释器
  • mysql无法启动服务及其他问题总结
  • SOC计算方法：卡尔曼滤波算法
  • SpringBoot 集成 elasticsearch 7.x和对应版本不一致异常信息处理
  • 【JavaEE初阶】第四节.文件操作 和 IO （下篇）
  • 【Unity3D小技巧】Unity3D中判断Animation以及Animator动画播放结束，以及动画播放结束之后执行函数
  • 【数据结构】解决顺序表题的基本方法
  • 大数据 | （三）centos7图形界面无法执行yum命令
  • 工程管理系统源码-物料管理-工程项目管理系统-建筑施工管理软件
  • 编译nacos源码问题总结
  • CNStack 助推龙源电力扛起“双碳”大旗
  • 看看CabloyJS是如何异步加载并执行go wasm模块的
  • C++虚函数操作指南
  • 通过Debug探索SpringMVC执行过程
  • 【maven 学习记录】
  • 体验Linux USB 驱动
  • 【震撼发布】《致敬未来的攻城狮计划》| 文末赠书3本
  • “两高”发布侵犯知产犯罪司法解释：降低部分犯罪入罪门槛
  • 央媒关注脑瘫女骑手：7年跑出7.3万多份单，努力撑起生活
  • 国际乒联祝贺王励勤当选中国乒协主席并向刘国梁致谢
  • 创单次出舱活动时长世界纪录，一组数据盘点神十九乘组工作成果
  • 前瞻2025丨无糖茶，站在转折点？
  • 瑞穗银行（中国）有限公司行长：重庆赛力斯超级工厂的智能化程度令人震惊