JavaScript小工具14（JS实例）

最新推荐文章于 2022-01-16 19:17:28 发布
最新推荐文章于 2022-01-16 19:17:28 发布
阅读量393 收藏 2
点赞数
分类专栏： toolsJS

点击按钮，获得基于时间的问候

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击这个按钮，获得基于时间的问候。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="";
	var time=new Date().getHours();
	if (time<20){
	 	x="Good day";
     }
	else{
 		x="Good evening";
 	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p id="demo"></p>
<script>
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5){
	x.innerHTML="<a href='http://www.runoob.com'>访问菜鸟教程</a>";
}
else{
	x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>";
}
</script>

</body>
</html>

 点击按钮来显示今天是周几：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击下面的按钮来显示今天是周几：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var d=new Date().getDay();
	switch (d){
  		case 0:x="今天是星期日";
    	break;
 		case 1:x="今天是星期一";
        break;
  		case 2:x="今天是星期二";
        break;
        case 3:x="今天是星期三";
   	 	break;
  		case 4:x="今天是星期四";
    	break;
  		case 5:x="今天是星期五";
        break;
  		case 6:x="今天是星期六";
    	break;
 	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮在弹窗总使用换行。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	alert("Hello\nHow are you?");
}
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮，显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var r=confirm("按下按钮!");
	if (r==true){
		x="你按下了\"确定\"按钮!";
	}
	else{
		x="你按下了\"取消\"按钮!";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var person=prompt("请输入你的名字","Harry Potter");
	if (person!=null && person!=""){
	    x="你好 " + person + "! 今天感觉如何?";
	    document.getElementById("demo").innerHTML=x;
	}
}
</script>

</body>
</html>
<!DOCTYPE html>
<html> 
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script> 
function myfunction(txt) { 
	alert(txt);
} 
</script> 
</head> 
<body> 
	
<form> 
<input type="button" 
onclick="myfunction('Good Morning!')" 
value="在早上"> 
<input type="button" 
onclick="myfunction('Good Evening!')" 
value="在晚上"> 
</form> 
<p>
当你点击其中任意一个按钮，一个函数将被执行，函数结果弹出一个警告显示传递的参数。
</p>

</body> 
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>单击按钮将HTML标题设置从1到6的样式显示</p>
<button onclick="myFunction()">点我</button>
<div id="demo"></div>
<script>
function myFunction(){
	var x="",i;
	for (i=1; i<=6; i++){
		x=x + "<h" + i + ">Heading " + i + "</h" + i + ">";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var txt="";
	var person={fname:"Bill",lname:"Gates",age:56}; 
	for (x in person){
		txt=txt + person[x];
	}
	document.getElementById("demo").innerHTML=txt;
}
</script>
	
</body>
</html>
  • onmouseover 事件      （资源未加载，效果无法显示，建议换上本地资源测试）
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
function writeText(txt){
	document.getElementById("desc").innerHTML=txt;
}
</script>
</head>

<body>
<img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onmouseover="writeText('太阳和气体巨星类似木星是太阳系中最大的物体。')"
href ="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
onmouseover="writeText('从地球上很难研究水星，因为它太接近太阳。')"
href ="mercur.htm" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
onmouseover="writeText('至到1960年，金星经常被认为是地球的孪生妹妹，因为金星是最靠近我们的行星，并且两个行星有很多相似的特点。')" t')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map> 
<p id="desc">鼠标在太阳和星星上移动，可以看到不同的描述。</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
var txt="";
function message(){
	try{
		adddlert("Welcome guest!");
	}
	catch(err){
		txt="本页有一个错误。\n\n";
		txt+="单击确定继续跳转\n";	
		txt+="或者单击取消返回\n\n";
		if(confirm(txt)){
			document.location.href="http://www.baidu.com/";
		}
	}
}
</script>
</head>

<body>
<input type="button" value="查看消息" onclick="message()" />
</body>

</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
onerror=handleErr;
var txt="";
function handleErr(msg,url,l){
	txt="该页面有一个错误\n\n";
	txt+="错误: " + msg + "\n";
	txt+="URL: " + url + "\n";
	txt+="行: " + l + "\n\n";
	txt+="点击确定继续。\n\n";
	alert(txt);
	return true;
}
function message(){
	adddlert("Welcome guest!");
}
</script>
</head>

<body>
<input type="button" value="查看消息" onclick="message()" />
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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("欢迎 " + user + " 再次访问");
	}
	else {
		user = prompt("请输入你的名字:","");
  		if (user!="" && user!=null){
    		setCookie("username",user,30);
    	}
	}
}
</script>
</head>
	
<body onload="checkCookie()"></body>
	
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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>菜鸟教程(runoob.com)</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>菜鸟教程(runoob.com)</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>菜鸟教程(runoob.com)</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>菜鸟教程(runoob.com)</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 应用实例

(http://www.runoob.com/js/js-examples.html)

DH2264664169
关注
专栏目录
一套JS小工具，包含了一个功能比较强大的表单验证工具
03-16
NULL 博文链接：https://clover-4l.iteye.com/blog/411181
ArcGIS API for JavaScript4.8 实例
10-26
《ArcGIS API for JavaScript 4.8 实例详解》 ArcGIS API for JavaScript 是Esri公司推出的一款强大的地图开发工具，主要用于构建交互式的Web GIS应用。4.8版本是其发展过程中的一个重要里程碑，提供了丰富的功能和...
js获取上下文路径
LIUJIMMY的专栏
04-16 5217
<br />function getContextPath() { var contextPath = document.location.pathname; alert(contextPath+"=====") var index =contextPath.substr(1).indexOf("/"); contextPath = contextPath.substr(0,index+1); delete index; return contextPath; }
js小工具
08-29 361
花了一个半小时写了个比较的小工具，虽然简陋，但是足够自己用了 文本框1 操作 文本框2 121231233 1 a b f
JS小工具
weixin_33713350的博客
08-17 199
2019独角兽企业重金招聘Python工程师标准>>> ...
js 小工具
E770679957的专栏
05-03 253
   //js实现在HTML页面获取项目名路径_yyw    function sy(){          var curWwwPath = window.document.location.href;          var pathName =  window.document.location.pathname;          var pos = curWwwPath.indexOf...
JavaScript应用实例-时间截转换小工具.js
12-09
JavaScript应用实例-时间截转换小工具.js
JavaScript应用实例-工具.js
12-09
JavaScript应用实例-工具.js
JavaScript应用实例-应用工具.js
12-09
JavaScript应用实例-应用工具.js
JavaScript实例自学手册
09-17
这份"JavaScript实例自学手册"是为那些想要深入理解并掌握JavaScript技术的初学者或进阶者准备的宝贵资源。以下是对手册中可能包含的重要知识点的详细解释： 1. **基础语法**：JavaScript的基础语法包括变量声明...
js一款小工具库uxlab
04-10
js一款小工具库uxlab
几个Javascript的小工具
11-30
主要有：判断是否是日期型数据，保留小数点精度，四舍五入，去掉空格，去掉左边的空格，去掉右边的空格；<br><br>
利用JS为女朋友做一个小工具
01-20
最近学到了JS的document对象的属性和方法，利用现有的知识做一个简易的网页小工具。先上效果图: 百度翻译 英译汉 汉译英 转到W3school 转到菜鸟教程 转到编程狮 转到CSDN 哈哈，附上我给女朋友做的小工具效果图，是不是好看了很多 总结：       在学习JS和编程中，如果只是简单的学，而不动手做，那是很枯燥的，而且学习的效率几乎只有百分之三十       俗话说眼过千遍不如手过一边，当你把学到的知识用起来的时候，你就会发现撸代码的乐趣，就会有成就感，就会忘记时间。这样学到的东西才是自己的。古人云：知之者不如好之者，好之者不如乐之者。
一些常用的JS插件，十分齐全，大部分有demo
06-26
一些常用的JS插件，十分齐全，大部分有demo。比如常用的JS插件 树形空间 日历空间 时间选择控件 表单验证控件，里面全都有，用法基本上都注明。
程序员快来看！经典代码替你省去多少时间？
数据与算法之美
10-20 1808
作为一名程序员，每天坐在电脑前敲敲打打那些重复重复再重复的语句，习惯性的思维总是被套进去，有些时候很容易把简单的事情想复杂了！不过，我们反其道而行之，新手们只要是把下面的语句牢记，很多情况下都是会事半功倍的！ 1. 将彻底屏蔽鼠标右键，无右键菜单 也可以用于网页中Table框架中 no 2.取消选取、防止复制 3.不准粘贴 4.防止复制
小身材有大用处，盘点 Gitee 上那些实用的JS小工具
ZicoChan的博客
10-13 296
Javascript 作为一种脚本语言，其用途也随着互联网的发展逐渐成为了一门「万能」语言，从页面交互，再到各种库，甚至用它来写后台。 今天 Gitee 就为开发者们盘点几款那些非常实用的 Javascript 工具包，相信它们一定能为你的日常工作提供一些帮助。 1.iNotify 项目作者：小弟调调 开源许可协议：MIT 项目地址：https://gitee.com/jaywcjlove/iNotify JS 实现浏览器的 title 闪烁、滚动、声音提示、通知，没有依赖. 它不会干扰任.
JavaScript的小工具
weixin_43837669的博客
01-16 1122
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、JavaScript字符串截取1、截取URL（1）JS获取URL中最后一个斜杠前面的内容（2）JS获取URL中最后一个斜杠后面的内容二、VUE | router动态传参1.传参一2.传参二3.传参三三、JavaScript判断类型1、判断指定的内容是否为空2、判断指定的内容是否为空2、判断指定的内容是否为空3、数字判断函数4、判断给定的字符串是否为指定长度的数字5、money判断函数6、英文判断函数7、空格判断7、**号判断
js常用小工具
移动开发学习笔记
05-13 351
map与json互转 map转json 先将Map转化为Object； 再将Object转为Json 将map转为Object _strMapToObj(strMap) { let obj = Object.create(null); for (let [k, v] of strMap) { obj[k] = v; } return obj; }, /** *map转换为json */ _mapToJson(map) { return JSON.stringify(
JavaScript小工具
DH2264664169的博客
11-27 264
自动识别对应时间 &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script type="text/javascript"&
JavaScript实用工具方法封装实例与类型判断函数
"本文档主要介绍了JavaScript中常用工具方法的封装，作者在日常工作中频繁使用这些功能，因此将其整理出来，以便于他人学习和参考。文章详细列举了以下几种类型判断的方法： 1. type类型判断： - `isString(o)`：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值