JS练习第三课
用typeof查看数据类型
<pre>
<script type="text/javascript">
alert(typeof 12345); <span>//输出number</span>
alert(typeof "abc"); <span>//输出string</span>
alert(typeof document); <span>//输出object</span>
</script>
</pre> <script src="../js/jquery-3.2.1.min.js"></script>
<script>
alert("typeof 12345 -->" + typeof 12345 +
'\ntypeof "abc" -->' + typeof "abc" +
"\ntypeof document -->" + typeof document);
</script>
用parseInt解析数字,并求和
<style>
.d1{
width: 300px;
margin: 10px auto;
}
input{
width: 50px;
}
</style>
</head>
<body>
<div class="d1">
<input id="num1" type="text">
<span> + </span>
<input id="num2" type="text">
<span> = </span>
<span class="ret"> ? </span>
<button>求和</button>
</div>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
$("input").on("keyup",function () {
this.value = this.value.replace(/[^\d]/,"");
})
$("button").on("click",function () {
var num1 = parseInt($("#num1").val());
var num2 = parseInt($("#num2").val());
$(".ret").text( num1 + num2);
})
</script>
累加按钮,自加1
<style>
.d1{
width: 30px;
margin: 10px auto;
}
</style>
</head>
<body>
<div class="d1">
<button class="b1"> 0 </button>
</div>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
$(".b1").on("click",function () {
var num = parseInt($(this).text()) + 1;
$(this).text( num );
alert(num);
})
</script>
输入两个数字,比较大小
<style>
.d1{
width: 300px;
margin: 10px auto;
}
input{
width: 50px;
}
</style>
</head>
<body>
<div class="d1">
<input id="num1" type="text">
<b> VS </b>
<input id="num2" type="text">
<span> = </span>
<button>最大的数是>></button>
<span class="ret"></span> </div>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
$("input").on("keyup",function () {
this.value = this.value.replace(/[^\d]/,"");
})
$("button").on("click",function () {
var num1 = $("#num1").val();
var num2 = $("#num2").val();
if(num1 == "" || num2 == ""){
alert("请输入数字");
}else{
$(".ret").text(Math.max(num1,num2));
} })
页面加载后累加,自加1
<style>
h1 {
margin: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>0</h1>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
var num = parseInt($("h1").text());
function upadte() {
$("h1").text(num ++);
}
console.log(num);
$(function () { setInterval(upadte,1000);
upadte();
})
</script>
判断数字是否为两位数
<style>
.d1{
width: 200px;
margin: 10px auto;
}
input{
width: 60px;
}
</style>
</head>
<body>
<div class="d1" >
<input type="text">
<button>是否为两位数</button>
</div>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
$(function(){
$("input").on("keyup",function () {
this.value = this.value.replace(/[^\d]/,"");
})
$("button").on("click",function () {
var num = $("input").val().length;
( num == 0 ) ? alert("请输入数字" ):
alert( num == 2 ? "√是两位数" : "是" + num + "位数");
})
})
</script>
网页计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页计算器</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{margin: 0;padding: 0;text-align: center;}
input{
width: 300px;
float: right;
font: 700 50px/84px Arial;
line-height: 100px;
background-color: transparent;
border:none;
text-align: right;
padding: 0 5px;
}
h2{
line-height: 40px;
cursor: pointer;
}
span{
position: absolute;
right: 5px;
}
.d1{
width: 300px;
height: 400px;
margin: 10px auto;
background-image: url("http://www.fgm.cc/learn/lesson3/img/bg.jpg");
}
.title{
background-color: #000;
width: 300px;
height: 15px; }
.info{
background-image: url("http://www.fgm.cc/learn/lesson3/img/inputBg.jpg");
background-size: cover;
width: 300px;
height: 100px;
position: relative;
margin-bottom: 10px;
/*padding: 5px;*/
/*box-sizing: border-box;*/
}
.btns{
position: relative;
overflow: hidden;
}
.btn{
float: left;
width: 61px;
height: 40px;
margin: 7px;
background-image: url("http://www.fgm.cc/learn/lesson3/img/btn.png");
color: #fff;
}
.icon{
background-position: 0 -40px ;
}
.icon:hover{
background-position: -64px -40px ;
}
.num{
background-position: 0 -0px ;
}
.num:hover{
background-position: -63px 0px ;
}
.zero{
width: 136px;
height: 40px;
margin: 7px;
float: left;
color: #fff;
background-image: url("http://www.fgm.cc/learn/lesson3/img/btn.png");
background-position: 0 -82px ;
}
.zero:hover{
background-position: 0 -123px ; }
.eq{
width: 61px;
height: 100px;
margin: 7px;
position: absolute;
color: #fff;
background-image: url("http://www.fgm.cc/learn/lesson3/img/btn.png");
bottom: -4px;
right: 1px;
background-position: 0 -163px ;
}
.eq:hover{
background-position: -63px -163px ;
}
</style>
</head>
<body>
<div class="d1">
<div class="title"></div>
<div class="info">
<span></span>
<input type="text" maxlength="6" readonly="readonly" value="0"/>
</div>
<div class="btns">
<div class="btn icon"><h2>C</h2></div>
<div class="btn icon"><h2>%</h2></div>
<div class="btn icon"><h2>÷</h2></div>
<div class="btn icon"><h2>×</h2></div>
<div class="btn num"><h2>7</h2></div>
<div class="btn num"><h2>8</h2></div>
<div class="btn num"><h2>9</h2></div>
<div class="btn icon"><h2>-</h2></div>
<div class="btn num"><h2>4</h2></div>
<div class="btn num"><h2>5</h2></div>
<div class="btn num"><h2>6</h2></div>
<div class="btn icon"><h2>+</h2></div>
<div class="btn num"><h2>1</h2></div>
<div class="btn num"><h2>2</h2></div>
<div class="btn num"><h2>3</h2></div>
<div class="zero"><h2>0</h2></div>
<div class="btn num"><h2>.</h2></div>
<div class="eq"><h2 style="line-height: 100px">=</h2></div>
</div>
</div>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
// $(function(){
var text="";
var info = "";
var ret;
var textA = [];
var $h1 = $("input");
var $span = $("span");
function infoAdd(){
info += text;
info = info.replace(/÷/,"/");
info = info.replace(/×/,"*");
info = info.replace(/=/,"");
text = "";
$("span").text(info);
}
// if ($("input").val().length < 10){
$("h2").on("click",function () {
var val = $(this).text();
text += val;
for(var i = 0; i < $("h2").length; i++){ switch (val) {
case "=":
infoAdd();
console.log(info);
ret = eval(info);
info = ret;
$("input").val(ret);
break;
case "C":
text = "";
info = "";
$("input").val("0");
$("span").text("");
break;
case "%":
$("input").val("%");
textA = [];
info = "";
break;
case "÷":
infoAdd();
// text = "/";
$("input").val("/");
// text = "";
break;
case "×":
infoAdd();
$("input").val("*");
break;
case "-":
infoAdd();
$("input").val("-");
break;
case "+":
infoAdd();
$("input").val("+");
break;
default:
// console.log(text);
($("input").val().length < 10)? $h1.val(text) :$("h2").unbind("click");
}
}
})
// }else{
// $("h2").unbind("click");
// }
// }) </script>
</body>
</html>
简易网页时钟
<style>
.d1{
background-color: #000;
width: 300px;
height: 50px;
margin: 10px auto;
overflow: hidden;
color: #fff;
}
.hour,.min,.second{
background-color: #fff;
text-align: center;
border:2px solid #eee;
width: 40px;
height: 20px;
color:#000;
}
ul{
margin: 0;
}
li{
margin: 13px 5px;
float: left;
list-style: none;
font-size: 20px;
}
</style>
</head>
<body>
<div class="d1">
<ul>
<li style="margin-left: -10px" class="hour"></li>
<li>点</li>
<li class="min"></li>
<li>分</li>
<li class="second"></li>
<li>秒</li>
</ul>
</div>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
function time() {
var myDate = new Date();
var hour = myDate.getHours();
var min = myDate.getMinutes();
var second = myDate.getSeconds();
$(".hour").text(hour);
$(".min").text(min);
$(".second").text(second);
}
setInterval(time,1000);
time();
})
</script>
倒计时时钟(100秒)
JS练习第三课的更多相关文章
- JS学习第三课
写表格时最好自己写上<tbody>,因为在JS里面要用,要不然html里没有,但是我们在JS里面用得飞起,也说不过去啊. 获取表格元素时,tBodis[0]一定要加上,本人试过不加,然后就 ...
- [妙味JS基础]第三课：自定义属性、索引值
知识点总结 自定义属性 元素.自定义属性 ＝ 值: 比如: oDiv.abc = 100; =>abc为自定义属性 索引值 index =>也是自定义属性 oDiv.index = '' ...
- js项目练习第二课
百度输入法 <style> *{ list-style: none; text-decoration: none; padding: 0; margin: 0; } a:hover{ te ...
- 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03
第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...
- Nodejs课堂笔记-第三课 构建一个nodejs的Docker镜像
本文由Vikings(http://www.cnblogs.com/vikings-blog/) 原创,转载请标明.谢谢! 因为一直做Linux有关的开发工作,所以不习惯在Windows平台编译和测试 ...
- 【JavaScript从入门到精通】第三课
第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...
- CodeIgniter框架入门教程——第三课 URL及ajax
本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...
- SQL初级第三课(下)
我们续用第三课(上)的表 辅助表 Student Course Score Teacher Sno ...
- shellKali Linux Web 渗透测试— 初级教程（第三课）
shellKali Linux Web 渗透测试— 初级教程(第三课) 文/玄魂 目录 shellKali Linux Web 渗透测试—初级教程(第三课) 课程目录 通过google hack寻找测 ...
随机推荐
- 记一次bond引起的网络故障
本案中3个关键服务器 物理服务器:192.168.6.63,简称P,(Physical server) KVM-VM:192.168.6.150,是物理服务器P上的一个KVM虚机,简称VM NAS:外 ...
- 关于Python课程的一些思考。
出于对网络爬虫的好奇,我选修了Python程序设计,至于pyhton还能干啥还不太清除,只觉得爬一些数据很有意思,所以希望老师讲一些数据分析之类的技术.学完课程希望能分析一些数据,比如:还有: 上课的 ...
- C#导出Excel后关闭进程EXCEL.EXE
在C#中使用Microsoft.Office.Interop.Execl 导出excel 表格时,将以下两个属性亩后,在导完后, Excel.exe 进程无法关闭. // excel app 是否可见 ...
- 使用jieba库与wordcloud库第三方库进行词频统计
一.jieba库与wordcloud库的使用 1.jieba库与wordcloud库的介绍 jieba 库的分词原理是利用一个中文词库,将待分词的内容与分词词库进行比对,通过图结构和动态规划方法找到最 ...
- iframe高度宽度自适应
iframe { width: 100%; height: 100%; border: none; position: inherit; } 网上全是js方法,而且略显臃肿,故找到了一个css方法,宽 ...
- 单片机课程设计-四位加法计算器设计参考程序（c语言）
#include<reg52.h> typedef unsigned char uint8; typedef unsigned int uint16; sbit rw=P2^; sbit ...
- VS连接数据库字符串
在App.config配置文件中的<Configuration>节点中添加如下代码 <connectionStrings> // SQL Server 数据库 ...
- Activiti 框架学习
1:工作流的概念 说明: 1) 假设:这两张图就是华谊兄弟的请假流程图 2) 图的组成部分: 人物:范冰冰 冯小刚 王中军 事件(动作):请假.批准.不批准 工作流(Workflo ...
- 在引用阿里云库或其他库的时候，经常发生框架不兼容（原因是系统采用：Microsoft .NET Framework 4 Client Profile ），请改为Microsoft .NET Framework 4
在引用阿里云库或其他库的时候,经常发生框架不兼容(原因是系统采用:Microsoft .NET Framework 4 Client Profile ),请改为Microsoft .NET Frame ...
- 阿里云短信验证使用（PHP）
1.登陆阿里云后台,事先添加签名和模板 2.使用composer下载阿里云SDK composer require alibabacloud/sdk 在PHP7.0下安装需要提前安装curl扩展 -c ...