JS的实例

最新推荐文章于 2023-04-04 21:46:32 发布
最新推荐文章于 2023-04-04 21:46:32 发布
阅读量561 收藏 5
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abcdefghwelcome/article/details/83002354
版权

1、JS的使用

​
<title>JS的使用</title>
</head>
<script type="text/javascript"   src="hello.js"></script>
<script type="text/javascript">
function  f2(){
	alert("嵌入式使用JS")
}
</script>
<body>
<input  type="button"  value="按钮1" 
        onclick="alert('事件定义式使用JS')"/>
<input   type="button"  value="按钮2"  onclick="f2();"/> 
<input   type="button"  value="按钮3" onclick="f3();"/>

​

2、计算平方

<title>计算平方</title>
<script type="text/javascript">
function cal() {
	var num_obj=document.getElementById("num");//获取ID
	var result_obj=document.getElementById("result")
	var num=num_obj.value;
	if (num_obj==""|| isNaN(num)) {
		result_obj.innerHTML="请输入数字";
	}else{
		 var n=parseInt(num);
		 result_obj.innerHTML=n*n;
	}
}
</script> 
</head>
     <!-- 1、判断页面文本框中录入的文本是否为数值 -->
     <!-- 2、如果输入的文本不能转换为数字，则提示重新输入-->
     <!-- 3、如果输入的文本为数值，则计算其平方 -->
     <h1>计算平方</h1>
     <p>
     <input  type="text"   id="num"/>
     <input   type="button"   value="平方"  onclick="cal();"/>
     =<span   id="result"></span>
     </p>

3、猜数字，比较大小

<title>猜数字，比较大小</title>
<script type="text/javascript">
var init_num=parseInt(Math.random()*1000)+1;
  console.log(init_num);
  function guess() {
	var num=document.getElementById("num").value;
	var result=document.getElementById("result");
	if(num==""|| isNaN(num)||num>1000||num<1){
		result.innerHTML="必须输入1~~1000的数字";
	}else{
		if(num>init_num){
			result.innerHTML="大了";
		}else if(num<init_num){
			result.innerHTML="小了";
		}else{
			result.innerHTML="猜对了";
		}
	}
}
</script>
</head>
     <h1>猜数字</h1>
     <!-- 1、判断页面文本框中录入的文本是否为数值 -->
     <!-- 2、如果输入的文本不能转换为数字，则提示重新输入-->
     <!-- 3、如果输入的文本为数值，则与内置的数字进行比较，并提示“大了小了” -->
     <p>
     <input  type="text"    id="num"/>
     <input   type="button"  value="开始猜"    onclick="guess();"/>
     <span   id="result" ></span>
     </p>

4、阶乘

<title>阶乘</title>
<script type="text/javascript">
  function cal() {
	var num_obj=document.getElementById("num");
	var result_obj=document.getElementById("result");  //获得对象
	var num=num_obj.value;
	 
	if(num==""||isNaN(num)||num<1||num>100){
		result_obj.innerHTML="必须输入1~100的数字";
	}
	//方法1、else {
	//	var n=parseInt(num);
	//	var sum=1;
	//	for(var i=1;i<=num;i++){
		
	//		sum *=i;
	//	}
	//方法2
	else{
		var n=parseInt(num);
		var sum=1;
		//for(var i=n;i>0;i--)
		for(var i=n;i;i--){
			sum *=i;
		}
		result_obj.innerHTML=sum;
	}
		 
		
}
</script>
</head>
     <h1>阶乘</h1>
     <!-- 1、判断页面文本框中录入的文本是否为数值（1~100）的数 -->
     <!-- 2、如果输入的文本为数值，则计算该整数的阶乘 -->
     <p>
     <input  type="text"    id="num"/>
     <input   type="button"  value="阶乘为"    onclick="cal();"/>
     =<span   id="result" ></span>
     </p>

5、登录

<title>登录</title>
<style type="text/css">
/* 元素选择器 */
body {
	font-family: "微软雅黑", '文泉泽正黑'
}
/*<!-- 类选择器-->*/
form {
	width: 400px;
	margin: 150px auto;
	border: 1px solid #ccc;
	
}
/*<!-- 组合选择器-->*/
.form   h1 {
	text-align: center;
	margin: 0;
	padding: 5px;
	border: 1 px solid #ccc;
}

.form p {
	margin: 0;
	padding: 20px;
	border: 1px solid #ccc;
}

.form div {
	text-align: center;
	margin: 0;
	padding: 10px;
	border: 1px solid #ccc;
}

.form div input {
	width: 60px;
	height: 30px;
}

.error_msg {
	color: #f00;
	border: 1px solid #f00;
}
</style>
<script type="text/javascript">
function check_name() {
	  var name=document.getElementById("name").value;
		 var name_msg=document.getElementById("name_msg");
		 var reg=/^\w{3,20}$/;//正则表达式    测试是用test测试
				 if(reg.test(name)){
					name_msg.className="";
			 			return true;
				 }else {
					 name_msg.className="error_msg";
						 return false;
				 }
				}
	  function check_pwd() {
		  var pwd=document.getElementById("pwd").value;
			 var pwd_msg=document.getElementById("pwd_msg");
			 var reg=/^\w{3,20}$/;//正则表达式    测试是用test测试
					 if(reg.test(pwd)){
						pwd_msg.className="";
				 			return true;
					 }else {
						 pwd_msg.className="error_msg";
							 return false;
					 }
					}
	 
</script>
</head>
<div class="form">
	<form action="http://www.baidu.com" 	onsubmit="return(check_name()+check_pwd())==2">
		<h1>登录</h1>
		<p>
			<label>账号：</label> <input type="text" id="name"
				onblur="check_name();"> <span id="name_msg">3~20个字符</span>
		</p>
		<p>
			<label>密码：</label> <input type="password"   id="pwd" onblur="check_pwd();">
			<span id="pwd_msg">3~20个字符</span>
		</p>
		<div>
			<input type="submit" value="登录">
		</div>
	</form>
</div>

6、模拟方法的重载

<title>模拟方法的重载</title>
<script type="text/javascript">
/*
 *方法
 * 修饰词 返回值类型  方法名 参数类型 方法体
 * 方法的签名
 
 * arguments  参数  数组  内置 对参数的容器 实现方法的重载
 */
 	function sum() {
	var sum=0;
	for(var i=0;i<arguments.length;i++){
		sum += arguments[i];
	}
	return sum;
	}
    function f1(){
    	var s=sum(1,2,3);
    	alert(s);
    }
      function f2(){
    	  var s=sum(1,2,3,4,5,6);
    	  alert(s);
      }
</script>
</head>
<body>
		<h1>模拟方法重载</h1>
		<input   type="button"   value="1~3的和"  onclick="f1();">
		<input  type="button"   value="1~6的和"   onclick="f2();">

7、简单计算器

<title>简单的计算器</title>
<script type="text/javascript">
function cal() {
	var input=document.getElementById("input").value;
	var out=document.getElementById("out");
	try{
		//var result=eval(input);
		var result=eval("("+input+")");
		out.innerHTML=result;
	}catch (e) {
	   console.log(e);
	   out.innerHTML="表达式出错";
	}
}
</script>
</head>
<body>
	<h1>简单的计算器</h1>	
	<p>
	<input   type="text" id="input">
	<input   type="button"  value="计算"   onclick="cal();">
	=<span   id="out"></span>
	</p>

8、时钟的停止和启动

<title>时钟的停止和启动</title>
<script type="text/javascript">
var timer;
    function start(){
     timer=setInterval(function () {   //计时器
			var now=new Date();
			var time=now.toLocaleTimeString();//本地时间
			var c=document.getElementById("clock");
			c.innerHTML=time;
		},1000);
    }
		function stop(){
			clearInterval(timer);    //局部的
		}
</script>
</head>
<body>
	<h1>动态时钟</h1>
	<p>当前时间：<span  id="clock"></span></p>
	<p>
	<input   type="button"  value="启动" onclick="start();">
	<input   type="button"   value="停止" onclick="stop();">
	</p>

 

小飞猪小肥猪
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js动态加载、依赖注入
qq_33315952的博客
09-14 963
动态加载js在的在项目中的应用： 由于产品与项目的分离，产品提供的视图或函数不能够满足各个项目特殊需求时，则需要提供相应的js注入入口提供给项目做二次开发。如产品提供页面有一系列内容呈现，但项目不想用，则可以以注入的方式重写产品页面。或者产品预览dom提供项目作为扩展。以下方式简单方式模拟这一实现。 1、创建demo 文件夹； 2、demo文件夹下创建index.html页面。代码如下↓ <!DOCTYPE html> <html> <head> <
JS具体实例（一）
nabirt的博客
02-08 2948
JavaScript的一些实例记录
JavaScript基础——JS简单案例
m0_68794863的博客
12-04 5212
JS基础案例
javaScript常用案例
张张张张张高高的博客
09-06 8115
前端页面开发之javaScript常用案例
js基础精选案例
m0_64492064的博客
04-09 1652
主要是自己用来复习用的。如果想要练习的小伙伴也可以参考一下哦~ 1.[red','blue','red','green','pink','red'],求red出现的位置和次数 //思路是 先把第一个red的坐标找出来 然后遍历 每次查找的位置是上一个位置+1； var arr = ['red', 'blue', 'red', 'green', 'pink', 'red']; var index = arr.indexOf('red'); //0
JavaScript实例自学手册
09-17
JavaScript实例自学手册
JavaScript实例大全
12-19
里面包含以下文档（chm格式） JavaScript网页设计300例 javascript源码大全 jquery 1.7 中文 api 修正版
ArcGIS API for JavaScript4.8 实例
10-26
包含大量的ArcGIS API for JavaScript4.8的开发实例，可用于WebGIS开发者学习资料，内容全面，并且能正常执行。
js实例属性和原型属性示例详解
10-25
本文通过实例向大家讲述了js实例属性和原型属性，详情请看注释，看不懂的话，请放弃javascript吧。
JavaScript实例教程
06-22
JavaScript实例教程 通过实例进行JavaScript讲解
50个js经典案例
12-19
50个常用的js的案例，便于初学者更好的学习js
Javascript实例
index0000001的博客
06-24 1321
javascript实例
20个JavaScript开发案列（一）
终成大师的博客
02-17 4489
20个JavaScript开发案列（一）
js常用基础案例整理(持续更新)
weixin_41086056的博客
11-17 9422
这里写目录标题一级目录二级目录三级目录036-网页日历035-记住用户名(js代码)034-基础轮播图(js代码)033-京东放大镜效果(js代码)032-简单动画函数封装031-仿淘宝固定侧边栏+返回顶部按钮030-拖动的模态框029-发送短信倒计时案例028-倒计时效果027-模拟京东快递单号查询案例026-模拟京东按键输入内容025-跟随鼠标移动的小人024-动态生成表格案例023-删除留言案例022-新浪下拉菜单021-Tab栏切换(仿京东)020-全选与反选019-表格隔行变色018-开关灯效果0
前端学习当中的一些js案例
weixin_46247854的博客
04-04 323
js的小案例
25 道神奇的 javascript 示例
weixin_45242865的博客
08-22 5485
前言 JavaScript 是一种很好的语言。它有一个简单的语法，庞大的生态系统，以及最重要， 最伟大的社区。同时，我们都知道，JavaScript 是一个非常有趣又充满戏法的语言。 他们中的有些可以迅速将我们的日常工作变成地狱，有些可以让我们大声笑起来。 背景 这些示例的主要目的是收集一些疯狂的例子，并解释它们如何工作.如果您是初学者，您可 以阅读此文章来深入了解 JavaScript。我希望这个文章会激励你花更多时间阅读规范。 如果您是专业开发人员，您可以将这些示例视为您公司新手访问问题和测验的重要资
js实例的理解
duancsdn的博客
11-09 1098
2.在计算机语言中，“类”在实例化之后叫做一个“实例”。“类”是静态的，不占进程内存，而“实例”拥有动态内存。比如我们都是“人”，你和我都是“人”类的实例了。5.实例是类的具象化产品，而对象是一个具有多种属性的内容结构。1.实例不能调用类上面定义的方法，因为类上定义的方法是静态方法，定义在类的原型上属于非静态方法。定在在类上，而不是定义在类的原型上，类可以调用，类的实例不能调用的方法就叫做静态方法。6.Js里面没有类（ES6以前）的语法，所以类的概念就通过创造一个对象来实现。3.实例简单的理解就是成品。
JavaScript 经典实例盘点（收藏向）
热门推荐
Silvia
07-03 1万+
快捷目录一、跨 浏 览 器 事 件跨浏览器添加事件跨浏览器移除事件跨浏览器阻止默认行为跨浏览器获取目标对象跨浏览器获取滚动条位置跨浏览器获取可视窗口大小二、js 对 象 冒 充三、js异步加载和同步加载四、js获取屏幕坐标五、PageX和clientX六、js 拖 拽 效 果七、js获取图片原始大小尺寸八、js循环遍历数组九、阻止表单重复提交十、字 符 串 部 分十一、Number和Math部分十二、数 组 部 分十三、Date日期时间部分十四、正 则 部 分十五、js判断传入参数是否为质数十六、js判断字
javascript 案例
m0_67195464的博客
04-06 1019
目录案例一：展示文字案例二：图片转换案例三：随机数 案例一：展示文字 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>展示文字</title> </head> <body onload="fa()"> <div id="da"> </div> </body> <script
javascript 实例
最新发布
07-28
JavaScript实例是指通过构造函数或类创建的对象。在引用\[2\]中，通过构造函数User创建了一个名为user的实例，并调用了getName方法来获取实例的name属性值。在引用\[3\]中，通过类ContentWriter创建了一个名为writer...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值