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

JavaScript 高级实例集合

news 2025/9/11 13:53:27

文章目录

  • 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.lryc.cn/news/37217.html

相关文章：

  • Flutter（五）容器类组件
  • 实现满屏品字布局
  • 软件测试-性能测试-基础知识
  • java多线程与线程池-02线程池与锁
  • AB测试——流程介绍（设计实验）
  • C++中的智能指针有哪些？分别解决的问题以及区别？
  • 通达信捉妖改良CCI指标公式，简洁巧妙
  • 「Python 基础」面向对象编程
  • 【K3s】第23篇 一篇文章带你学习k3s私有镜像仓库配置
  • Redis学习【12】之Redis 缓存
  • Bootargs 参数
  • Mybatis框架源码笔记(七)之Mybatis中类型转换模块(TypeHandler)解析
  • 论文阅读《Block-NeRF: Scalable Large Scene Neural View Synthesis》
  • 【Matlab】如何设置多个y轴
  • 圆桌(满足客人空座需求，合理安排客人入座圆桌，准备最少的椅子)
  • 如何入门大数据？
  • 如何在Vite项目中使用Lint保证代码质量
  • Spark高手之路1—Spark简介
  • 社科院与杜兰大学金融管理硕士项目——人生没有太晚的开始，不要过早的放弃
  • Spatial-Temporal Graph ODE Networks for Traffic Flow Forecasting
  • IP协议+以太网协议
  • 可视化组件届的仙女‖蝴蝶结图、玫瑰环图、小提琴图
  • 人的高级认知：位置感
  • MATLAB——信号的采样与恢复
  • Docker Nginx 反向代理
  • 手把手教你实现书上的队列，进来试试？
  • 【springboot】springboot介绍
  • PMP项目管理项目整合管理
  • ADS中导入SPICE模型
  • C++：异常