<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS入门——helloworld</title>
<!--
JavaScript[JS]代码，包含在一对script标签中
script标签可以出现在网页中的任何一个位置
-->
<script>
// 单行注释： 一般用来解释说明一行或者多行代码
/*
多行注释:一般用来解释说明多行或者一个模块的代码
*/
/**
* 文档注释：主要注释在代码的最顶部，说明当前所有的代码是用来做什么的
*/
// 网页中输出Hello World!
document.write("<h1>hello world!</h1>");
// 用来弹出浏览器的警告对话框，对话框中的内容就是括号中指定的字符串！
alert("hello world!你好呀！");
</script>
</head>
<body>
<!-- Hello World! -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>对话框</title>
<script>
// 警告对话框：主要用来进行信息的提示，附带一个确定按钮
alert("你中枪了!!!!!")
// 确认对话框：用于用户操作的信息确认，附带一个确定按钮和取消按钮
_res = confirm("您确定要这么干嘛？");
alert("用户操作的结果：" + _res)
// 交互对话框
_num = prompt("请输入您的年龄", "10")
alert("用户输入的年龄：" + _num)
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script>
/*
编程语言：以处理数据为核心的
编程语言中表示数据：
数据类型：表示数据的类型
变量：编程语言中用来临时存储数据的容器
数据类型：
1. 基本数据类型
String：字符串
Number：数字【整数、浮点数】
Boolean：布尔类型【true/false】
undefined：未定义类型
null：表示为空的类型
2. 引用数据类型：一般情况用来表示对象的
object对象类型
变量：
准备：JavaScript是一个面向对象的弱类型的脚本语言
>变量定义：使用var关键字来定义变量【推荐】
>变量命名规则：变量名称只能以下划线(_)，$符号或者字母开头。
>变量的命名规范：1驼峰命名法(一个或者多个单词组成，第一个单词全部小写，后面每个单词首字母大写)；2见名知意
>变量的使用规则：先声明，后使用
> JavaScript变量，一般以下划线开头[近年出来的规范]
> 可以使用它typeof（）来判断某个数据的类型
数据类型的转换：
字符串->数字 Number()
字符串->整数 parseInt()
字符串->浮点数 parseFloat()
JavaScript错误调试
1.代码开发过程中，不一定会提示错误！
2.在浏览器的F12窗口中，如果JavaScript代码执行出现错误，就会在Console(控制台)提示错误信息和错误代码的位置！
运算符：
算数运算符：+ - * / %
赋值运算符：= += -= *= /= %=
关系运算符：> >= < <= != == ===
逻辑运算符：与运算&& 或运算|| 非运算 !
三元运算符： 简化的if-else判断
(条件)?(条件为真执行的代码):(条件为假执行的代码)
*/
var x = 12;// 定义了一个变量x，赋值为12
alert(x + "-----------" + typeof(x));
x = true;
alert(x + "-----------" + typeof(x));
// 案例：通过交互对话框和警告对话框，来完成一个加法运算
// 接受用户输入的数据
var _num1 = prompt("请输入第一个数据：", "0")
var _num2 = prompt("请输入第二个数据：", "0")
// 数据类型转换
_num1 = parseInt(_num1);
_num2 = parseInt(_num2);
var _sum = _num1 + _num2;
alert("运算的结果是：" + _sum);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>程序结构</title>
<script>
/*
程序结构之顺序结构
代码从上往下逐行执行
*/
/*var _num1 = prompt("请输入第一个数字")
var _num2 = prompt("请输入第二个数字")
var _sum = parseFloat(_num1) + parseFloat(_num2)
alert("运算的结果是:" + _sum)*/
/*
程序结构之选择结构：
选择结构之判断结构（可以判断条件的范围）
if结构
案例：鱼和熊掌！
*/
var _rain = "下雨";
// 单个条件判断
if(_rain == "下雨"){
alert("出门带伞");
}
// 两个条件选择其一 if-else
var _choice = 1;
if(_choice == 1){
alert("您选择了冰棍")
} else {
alert("您选择了雪糕")
}
// 条件中包含条件，多个条件：if嵌套
var _cake = 1
var _price = 888;
if(_cake == "蛋糕"){
if(_price == 88){
alert("给老妈买的蛋糕")
} else if(_price == 888){
alert("给女朋友买的蛋糕")
} else {
alert("给自己买的蛋糕")
}
}
// 多个条件
var _score = prompt("请输入的您的分数：");
if(_score > 0 && _score < 60) {
alert("不及格")
} else if(_score >= 60 && _score < 80) {
alert("良好")
} else if(_score >= 80 && _score <= 100) {
alert("优秀")
} else {
alert("你是猴子派来的逗比吗？")
}
var _week = prompt("请输入一个整数表示星期：")
if(_week == "1") {
alert("今天是星期一")
} else if(_week == "2") {
alert("今天是星期二")
} else if(_week == "3") {
alert("今天是星期三")
}/*.....*/
/*
选择结构之：选择题结构
*/
var _c = prompt("请输入您的选项");
switch(_c){
case "A":
alert("您选择了A选项")
break;
case "B":
alert("您选择了B选项");
break;
case "C":
alert("您选择了C选项");
break;
case "D":
alert("您选择了D选项");
break;
default:
alert("您真是来答题的吗？")
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script>
// 接受用户输入
var _num1 = prompt("请输入第一个数据：")
var _opra = prompt("请输入运算符(+、-、*、/、%):");
var _num2 = prompt("请输入第二个数据：")
// 数据类型转换
_num1 = parseFloat(_num1)
_num2 = parseFloat(_num2)
// 判断运算
var _result = 0;
switch(_opra){
case "+":
_result = _num1 + _num2;
//break;
case "-":
_result = _num1 - _num2;
break;
case "*":
_result = _num1 * _num2;
break;
case "/":
_result = _num1 / _num2;
break;
case "%":
_result = _num1 % _num2;
break;
default:
_result = "您输入了错误的运算符号"
}
// 输出结果：
alert("计算结果：" + _result);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>循环结构</title>
<script>
/*
JS中提供了三种普通循环结构
for循环
while循环
do-while循环
*/
/*for(var i = 0; i < 10; i++) {
// alert("点击我试试" + i);
console.log("for循环执行结果：" + i);
}*/
/*var x = 0;
while(x > 10){
console.log("while循环执行结果：" + x);
x++;
}*/
/*var m = 0;
do{
console.log("do-while循环：" + m);
m++;
}while(m > 10);*/
/*
循环中的continue和break
*/
// continue是结束本次循环，直接开始下一次循环
for(var i = 0; i < 100; i++) {
if(i % 33 == 0){
// continue;/*终止本次循环，直接开始下次循环*/
// break;/*跳出循环*/
}
console.log(i);
}
// break;直接跳出循环
// 使用for-while-do~while循环，写9X9乘法表
// 在网页上展示出来！
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style>
span{
display:inline-block;
width:100px;
height:20px;
border:solid 1px red;
}
</style>
</head>
<body>
<script type="text/javascript">
//for循环
for(var i=1;i<10;i++){
for(var j=1;j<=i; j++){
document.write("<span>"+j + '*'+ i +'='+(i*j)+' '+"</span>")
}
document.write('<br/>')
}
//while循环
var m=1;
while(m<=9){
var n=1;
while(n<=m){
document.write(n + '*'+ m +'='+(n*m)+' ');
n++;
}
document.write('<br/>');
m++;
}
//do-while循环
var y=1;
do{
var x=1;
do{
document.write(x + '*'+ y +'='+(x*y)+' ');
x++;
}while(x<=y);
document.write('<br/>');
y++;
}while(y<=9);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>函数操作</title>
<script>
/*
函数：是封装了一段代码，方便这段代码的重复使用
def <func_name>(参数列表):
函数中的代码
return 返回值
javascript中可以通过function关键字来定义函数
*/
/*function hello(name){
console.log("hello " + name);
}
hello("tom")
hello("jerry")
hello()*/
/*
函数中的参数:函数要执行必须需要的数据
定义在函数中的变量：形式参数
实际调用函数时传递的数据：实际参数
food就是一个形式参数，函数要执行，名义上需要一个食物
*/
function eat(food){
console.log("今晚吃饭，吃" + food);
}
eat("烤全羊!");
/*
函数的返回值：函数执行完成之后返回的结果
通过return关键字来返回函数执行的结果
*/
function buyCigrate(money) {
if(money == 10){
_res = "红塔山"
} else if(money == 14) {
_res = "红利群"
} else if(money == 16) {
_res = "蓝利群"
} else if(money == 22) {
_res = "吉祥兰州"
}
return _res;
}
var r = buyCigrate(14)
console.log("函数执行的结果：" + r);
/*
参数对象:arguments
使用不是很多，认识即可！
*/
function test() {
console.log(arguments);
}
test()
test("寒冰")
test("狂战士", "皎月")
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>字符串操作</title>
<script>
/*
JS中，包含在一对单引号或者双引号中间的字符，称为字符串
*/
var _str = " hello javascript! "
// 字符串的长度
console.log(_str.length);
// 判断某个字符第一次出现的位置
console.log(_str.indexOf("a"))
// 判断某个字符最后一次出现的位置
console.log(_str.lastIndexOf("a"))
// 截取一段字符串
console.log(_str.substring(4,10))
// 剔除字符串两边的空格
console.log(_str);
console.log(_str.trim());
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Math对象</title>
<script>
/*
抽奖
*/
/*
Math对象，可以通过Math...直接使用它的函数
Math.random() 获取一个0~1之间的随机数
Math.floor(x) 向下取整；获取一个数据的最大整数 4.1
Math.ceil(x) 向上取整
Math.round(x) 四舍五入
Math.pow(x, y) 获取x的y次方
Math.sqrt(x)开平方
*/
// 获取随机数
/*var _rn = Math.random();
console.log(_rn);
// 骰子游戏~~~1~6
var _no = Math.random() * 6;
console.log(_no);
var _x = Math.floor(_no);
console.log(_x);
var _y = Math.ceil(_no);
console.log(_y);
var _z = Math.round(_no)
console.log(_z);*/
/*
数组：一组数据
*/
// 声明数组，使用方括号
var _names = ["张小凡", "林惊羽", "陆雪琪", "碧瑶"]
// 数组的长度: length属性
var _random = Math.random() * _names.length;
_random = Math.floor(_random);
// 获取数组中的某个数据，通过下标/索引获取
var _n = _names[_random]
console.log("Congratulations, 你中奖了" + _n);
/*
扩展：
学会pop()\push()\shift()\unshift()函数的操作
*/
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
时间操作
</title>
<script>
var _d = new Date();
document.write("恭喜您登录系统，登录时间是：" + _d);
// 时间常见函数
var year = _d.getFullYear();//获取年份 2017
var month = _d.getMonth()+1; // 获取月份 0~11
var day = _d.getDate();//获取日子 1-31
var week = _d.getDay();//获取星期 1~7
var h = _d.getHours();//获取小时 0~24
var m = _d.getMinutes();//获取分钟 0~59
var s = _d.getSeconds();//获取秒钟 0~59
var ms= _d.getMilliseconds();//获取毫秒
document.write(year + "年" + month + "月" + day + "日" + week);
document.write(h + ":" + m + ":" + s + ":" + ms);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>计时函数</title>
<script>
// setTimeout(fn, time)延时函数
// 延时一定的时间执行指定的函数
/*setTimeout(function() {
console.log("函数执行了...");
}, 5000)*/
// setInterval(fn ,time) 计时函数
// 间隔一定的时间，执行指定的函数
/*setInterval(function() {
console.log("计时函数正在执行...");
}, 1000);*/
// 数字时钟
function timer() {
var _d = new Date();
var year = _d.getFullYear();//获取年份 2017
var month = _d.getMonth()+1; // 获取月份 0~11
var day = _d.getDate();//获取日子 1-31
var week = _d.getDay();//获取星期 1~7
var h = _d.getHours();//获取小时 0~24
var m = _d.getMinutes();//获取分钟 0~59
var s = _d.getSeconds();//获取秒钟 0~59
var ms= _d.getMilliseconds();//获取毫秒
// 获取一个标签对象，给标签中添加内容
var _span = document.getElementById("showtime");
_span.innerText = year + "年" + month + "月" + day + "日" + " 星期" + week + " " + h + ":" + m + ":" + s + ":" + ms;
}
setInterval(timer, 32);
</script>
</head>
<body>
<h1>数字时钟案例</h1>
<span id="showtime"></span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>活动倒计时</title>
</head>
<body>
<span id="countDown"></span>
<script>
/*
倒计时函数
*/
function timer() {
//当前系统时间
var _date = new Date();
// 定义一个将来的时间
var _last = new Date("2017-9-8 00:00:00")
//console.log(_date, _last);
_date = _date.getTime();//获取从1970年1月1日到现在的毫秒数
_last = _last.getTime();
//console.log(_date, _last);
_long = _last - _date;// 两个时间之间的毫秒差值
// 从毫秒的差值中，计算包含多少天
var _day = Math.floor(_long/(1000*60*60*24));
var _h = Math.floor(_long/(1000*60*60) % 24);
var _m = Math.floor(_long/(1000*60) % 60);
var _s = Math.floor(_long/1000 % 60);
var _ms = _long % 1000;
var _span = document.getElementById("countDown");
_span.innerText = "商品活动倒计时剩余：" + _day + "天" + _h + "小时" + _m + "分" + _s + "秒" + _ms + "毫秒"
}
setInterval(timer, 38);
</script>
</body>
</html>
1278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
