1.面向对象
<script>
var message="hello world!";
var x=message.length;
var y=message.toUpperCase();
document.write(x);
document.write(y);
</script>
字符串长度以及转换为大写.png
2.函数调用
<body>
<button onclick="myfunction()">点击这里</button>
<button onclick="clon('ghl','lxz')">点击有惊喜</button>
<button onclick="clon('lqs','zh')">点击有惊喜</button>
<script>
function myfunction(){
alert("Hello World!");
}
function clon(name,home){
alert("我是" + name + "和" + home + "的爸爸。");
}
</script>
</body>
第一个按钮.png
第二个按钮.png
第三个按钮.png
3.带有返回值的函数
<p id="demo"></p>
<script>
function myfunction(x,y){
return x/y;
}
document.getElementById("demo").innerHTML=myfunction(90,6)
</script>
带有返回值的函数.png
4.算术
<script>
var x = 5;
var y = 10;
var z = 15;
txt1 = "What a very ";
txt2 = "nice day";
txt = txt1 + "" + txt2;
document.write(x);
document.write(x += y);
document.write("<br />");
document.write(x -= z);
document.write("<br />");
document.write(x + "20");
document.write("<br />");
document.write(x % y);
document.write(txt);
</script>
算术.png
5.比较
5.1 比较运算符
比较运算符.png
5.2 逻辑运算符
逻辑运算符.png
5.3 条件运算符
条件运算符.png
6.if..else
<p>设原x为“时间过得好快”，如果当前时间小于15时，则输出“时间过得好慢”，反之显示原x的值。</p>
<button onclick="ps()">点击这里</button>
<p id="demo"></p>
<br>
<br>
<br>
<br>
<br>
<button onclick="ps01()">点击这里</button>
<p id="one"></p>
<script>
function ps(){
var x="时间过得好快"
var time = new Date().getDate();
if(time<15)
{
x="时间过得好慢";
}
document.getElementById("demo").innerHTML=x;
}
//或者用if..else
function ps01(){
var time=new Date().getDate();
if(time<15)
{
y="时间过得好慢啊";
}
else
{
y="时间过得好快啊";
}
document.getElementById("one").innerHTML=y;
}
</script>
if..else.png
7.switch(转换) 匹配执行代码块
<h1>switch 语句用于基于不同的条件来执行不同的动作</h1>
<h3>工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行</h3>
<button onclick="myfunction()">点击显示星期几</button>
<p id="demo"></p>
<h3>default 关键词来规定匹配不存在时做的事情</h3>
<p id="one"></p>
<script>
function myfunction() {
var x;
var d = new Date().getDay();
var e = new Date().getDay();
switch (d) {
case 0:
x = "Today it's Sunday";
break;
case 1:
x = "Today it's Monday";
break;
case 2:
x = "Today it's Tuesday";
break;
case 3:
x = "Today it's Wednesday";
break;
case 4:
x = "Today it's Thursday";
break;
case 5:
x = "Today it's Friday";
break;
case 6:
x = "Today it's Saturday";
break;
}
switch (e) {
case 2:
y = "Today it's Tuesday";
break;
case 3:
y = "Today it's Wednesday";
break;
default:
y = "今天不用打卢克";
}
document.getElementById("demo").innerHTML = x;
document.getElementById("one").innerHTML = y;
}
</script>
switch.png
8.for循环
8.1
<script>
names = ["平帅", "张路", "胡凯", "梁昊天", "刘奎元"];
for ( var i = 0; i < names.length; i++) {
document.write(names[i] + "<br>");
}
</script>
01.png
8.2
<button onclick="myfunction()">点击这里</button>
<p id="demo"></p>
<script>
var x="";
function myfunction() {
for (var i = 0; i < 7; i++) {
x =x + "这个数字是" + i + "<br>";
}
document.getElementById("demo").innerHTML = x;
}
</script>
02.png
8.3 for/in 循环
<button onclick="myfunction()">点击这里</button>
<p id="demo"></p>
<script>
function myfunction() {
var x;
var txt = "";
var person = { franme: "平", lname: "帅", age: 20 };
for (x in person) {
txt = txt + person[x];
}
document.getElementById("demo").innerHTML = txt;
}
</script>
03.png
