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寻找测 ...
随机推荐
- 记录Redis使用中遇到的两个问题（原子性及数据完整性）
1.使用Redis作为分布式锁的原子性问题 原方案: ① SETNX $LOCK_BUSI_KEY $REQ_ID ② EXPIRE $LOCK_BUSI_KEY $LOCK_TIME 问题: 使用S ...
- dva中roadhog版本升级后带来的问题及解决方法
从同事手中接手项目之后.npm install 然后npm start的时候.开始报上图的错误.解决方法一(比较 愚蠢)当时找到的解决方法都没有用.然后只能按照报错的路径,从同事那边复制了node_m ...
- Python全栈开发记录_第九篇（面向对象(类)的学习）
有点时间没更新博客了,今天就开始学习类了,今天主要是面向对象(类),我们知道面向对象的三大特性,那就是封装,继承和多态.内容参考该博客https://www.cnblogs.com/wupeiqi/p ...
- Intellij IDEA快捷键大全汇总（2019更新）
Intellij IDEA快捷键大全汇总(2019) Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键 Alt+回车 导入包,自动修正 Ctrl+N 查找类 ...
- python大法好——Python SMTP发送邮件
Python SMTP发送邮件 SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式. py ...
- c语言小项目---通讯录2.0
自从上次通讯录项目被字符串项目整的自闭了之后,用了5天时间重新整理了一下通讯录的思路,并且能够正常的使用,今天按模块把基于链表的通讯录2.0版本记录一下,供后续积累经验. 首先总结一下 通讯录2.0版 ...
- PHP:自己写的mysql操作类
a{ font-weight: bold; display: block; text-align: center; color: #5887bf; font-size: 22px; } .conten ...
- 微信小程序自定义组件实现
官方从 1.6.3 开始对于自定义组件这一块有了比较大的变动,首先比较明显的感觉就是文档比以前全多了,有木有!,现在小程序支持简洁的组件化编程,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面 ...
- cookie和session的区别及在Django中应用
Django中Cookie和session应用 什么是cookie? cookie是客户端浏览器上的一个文件,以键值对进行保存,类似于字典的 {'key' : 'value'} ,与服务器端没有关系, ...
- 无分类编址（CIDR，Class Inter-Domain-Routing）
CIDR全称是无分类域间路由选择,英文全称是Classless Inter-Domain Routing,大家多称之为无分类编址 CIDR的特点 (1)CIDR消除了传统的A类.B类和C类地址以及划分 ...