目录
时间：onload 加载事件，将当前时间放在div盒子中打开页面让他加载运行
continue;跳出本次循环
break;跳出所有循环
for循环格式：
for (var i = 1; i <= 5; i++) {
if (i == 3) {
continue;
}
document.write(i);
}获取100-1000的水仙花数：水仙花数
document.write(" for循环<br/>")
var g=0;
var s=0;
var b=0;
var count=0;
for(var i=100;i<1000;i++){
g=parseInt(i%10);//获取个位数
s=parseInt(i%100/10);//获取十位数
b=parseInt(i/100);//获取百位数
if(g*g*g+s*s*s+b*b*b==i){
count++;
document.write(i+"  ")
}
}
document.write("一共有"+count+"个水仙花数<br/>")while循环格式：
var count=prompt("请输入循环次数","")
var k=count;
while(k>0){
document.write(k);
k--;
}do while循环
无论条件是否成立，至少执行一次
var i = 0;
do {
i++;
document.write(i);
} while (i < 9); // Math.round四舍五入
//Math.ceil向上取整
//Math.floor向下取整
//Math.random随机数
var rand= Math.random()*10;
alert(rand) //获取随机数
alert(Math.floor(13.99)) //向下取整13
alert(Math.ceil(13.55)) //向上取整14
alert(Math.round(23.52)) //四舍五入24获取当前时间：
var now=new Date();//获取当前时间
var hours=now.getHours();//获取小时
var min=now.getMinutes();//获取分钟
var seconds=now.getSeconds();//获取秒
var nian=now.getFullYear();//获取年
var yue=now.getMonth()+1;//获取月 JavaScript定义月份是0-11，所以要+1
var ri=now.getDate();//获取天
alert(nian+"年"+yue+"月"+ri+"日"+hours+"时"+min+"分"+seconds+"秒")案例：
九九乘法表：九九乘法表
<script>
for(i=1;i<=9;i++){
for(j=1;j<=i;j++){
document.write(i+"*"+j+"="+i*j+"\t")
}
document.write("<br/>")
}
</script>背景音乐：背景音乐
js代码;
<script>
var pos=0; //全局变量
function demo(){
if(pos<10000){
pos++;
scrollTo(0,pos)//滚动条从0开始每次加1
}
setTimeout("demo()",50)//定时器，滚定条每秒钟跑50
}
</script>简易计算器：计算器
js代码：
function demo(d) {
document.getElementById("input1").value += d; //点击按钮相应的值出现在文本框中
/*
var a=10;
a+=20;
a=a+20;
alert(a)
*/
}
function showResult() { //运算
var b = document.getElementById("input1").value;//获取当前文本框的值
var result = eval(b); //eval是JavaScript自带的运算函数
document.getElementById("input1").value = result;//将运算结果赋值到文本框中
}
function remove(){
document.getElementById("input1").value="";//点击c按钮时清空文本框
}
彩虹样式：彩虹
js代码：
<script language="JavaScript">
function changeColorABC() { //0 5 0.26 5.26
//随机数*5获取div1~~div5，由于随机数是0-1乘5就能获取到1-5
var num = Math.ceil(Math.random() * 5)
//随机获取div并把值传给d
var d = document.getElementById("div" + num);
//随机获取颜色
var r = Math.floor(Math.random() * 255 + 1);
var g = Math.floor(Math.random() * 255 + 1);
var b = Math.floor(Math.random() * 255 + 1);
//将随机获取到的颜色传递给d /div
d.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
t = setTimeout("changeColorABC()", 20) //添加一个计时器每秒钟调用函数20次
}
changeColorABC();//调用函数
function stopbtn(){
clearTimeout(t)//取消计时器让他停止变动
}
</script>HTML代码：
<body>
<div id="div1">11</div>
<div id="div2">22</div>
<div id="div3">33</div>
<div id="div4">44</div>
<div id="div5">55</div>
<input type="button" onclick="stopbtn()" value="点击">
<input type="button" onclick="changeColorABC()" value="运行">
</body>css代码：
<style type="text/css">
div {
background-color: aquamarine;
margin: 15px;
padding: 20px;
color: blue;
border-radius: 15px;
}
</style>下图中的颜色随机变换。
JavaScript函数：
//var a="ABcdef.txt";
//根据索引找字符
//alert(a.charAt(0)); A
//获取字符串的长度
//alert(a.length); 10
//concat 连接字符串
//alert(a.concat("aaa")) ABcdef.txtaaa
//截取字符串从索引3的位置开始
//alert(a.substring(3)) def.txt
//包前不包后
//alert(a.substring(1,4)); bcd
//将小写转换为大写
//alert(a.toUpperCase()) ABCDEF.TXT
//大写转小写
//alert(a.toLowerCase()) abcdef.txt
//根据字符找索引 找不到返回-1
//alert(a.indexOf("c"))
案例：QQ会员
灯泡点击变亮效果
js代码;
function demo(a) {
//根据字符找索引获取到图片的索引
var b = a.indexOf("mie.png");
//判断索引！=-1 说明能找到图片
if (b != -1) { //给图片执行操作
document.getElementById("db").style.backgroundColor = "yellow";
document.getElementById("h").style.color = "black";
document.getElementById("imgs").src = "img/liang.png";
} else { //索引=-1 说明找不到图片
document.getElementById("db").style.backgroundColor = "black";
document.getElementById("h").style.color = "white";
document.getElementById("imgs").src = "img/mie.png";
}这是运行效果：
当点击灯泡时，电灯会熄灭此时效果展示：
双色球练习：
html代码：
<center>
<h1>2206双色球</h1>
<div class="luck" id="div1">2</div>
<div class="luck" id="div2">2</div>
<div class="luck" id="div3">0</div>
<div class="luck" id="div4">6</div>
<div class="luck" id="div5">抽</div>
<div class="luck" id="div6">奖</div>
<div class="luck" id="div7" style="background-color: blue;">啦</div>
<div>
<input type="button" class="btndiv" value="开始" onclick="btnStart()">
<input type="button" class="btndiv" value="结束" onclick="btnsuspended()">
</div>
</center>css代码：
<style type="text/css">
.luck {
width: 40px;
height: 40px;
background-color: orangered;
border-radius: 90px;
padding: 30px;
/* //div占同一行 */
display: inline-block;
color: white;
font-size: 36px;
font-family: 宋体;
margin-top: 20px;
margin-right: 20px;
}
h1 {
font-family: 宋体;
}
.btndiv {
width: 120px;
height: 40px;
font-size: 24px;
font-weight: bold;
margin: 30px;
}
</style>js代码：
<script>
function btnStart() {
//定义一个数组
var g = Math.floor(Math.random() * 16 + 1);
var b = new Array(6);
for (i = 0; i < b.length; i++) { //i=1
//0-33 1<a<34 1.25=1 33.66=33
var a = Math.floor(Math.random() * 33 + 1); //假设a=10 20
//先把随机生成的数a填到第一个div中 不用做比较
if (i == 0) {
b[0] = a;
} else {
var flag = true;
for (var j = 0; j < b.length; j++) {
if (b[j] == a) { //两种情况 相等条件成立跳出循环找到flage==false i--;
//不相等 条件不成立直接跳出flag=true 执行b[i]=a；将随基数a填到div中
flag = false;
break;
}
}
if (flag == true) {
b[i] = a;
} else {
i--;
}
}
document.getElementById("div1").innerHTML = b[0];
document.getElementById("div2").innerHTML = b[1];
document.getElementById("div3").innerHTML = b[2];
document.getElementById("div4").innerHTML = b[3];
document.getElementById("div5").innerHTML = b[4];
document.getElementById("div6").innerHTML = b[5];
}
document.getElementById("div7").innerHTML = g;
t = setTimeout("btnStart()", 50)
}
function btnsuspended() {
clearTimeout(t)
}
</script>
在线生成表格
随机点名器
随即车牌号
JavaScript函数：
<!-- isNaN 判断一个数是否为非数值类型 数值类型false
parseInt整数 parseFloat小数
eval() 1.计算 2.通过eval获取input框name的值
return **就返回**
escape 将除了字母数字字符以外的 东西转换成ASCIL码
unescape 将ascil码转回去
onchange 改变事件 对内容进行修改才能触发事件
//选中事件 onselect 选中内容后触发事件
onfocus 获得焦点
onblur 失去焦点
onsubmit 提交事件
onmouseover 鼠标移入事件
onmouseout 鼠标移出事件
onload 加载事件
-->
escape 将除了字母数字字符以外的 东西转换成ascll码
unescape 将ascll码转回去
document.write(escape('我')) //将除了字母数字字符以外的 东西转换成ASCIL码
document.write(unescape("%u6211")); //将ascil码转回去isNaN 判断一个数是否为非数值类型 数值类型false
parseInt整数 parseFloat小数
var a = parseInt("222");
var b = isNaN(a);
alert(b) //falseeval（）计算
function demo() {
var result = eval(10 * 3);
alert(result)
}
demo();
eval（）的另一种用法，通过eval获取input框value的值
function show(obj) {
var str = eval("document.Form." + obj + ".value");
alert(str)
}
<form action="" name="Form">
<input type="text" name="name" value="微笑" onchange=changeDemo(this)">
<input type="button" onclick="show('name')" value="点击">
</form>return 返回值
return 谁 就返回*谁*
//有返回值类型
function info(a, b, c) {
var result = a + b + c;
return result;
}
var a = info(10, 20, 30);
alert(a);
onchange 改变事件 对内容进行修改才能触发事件
如下列所示：删除张三后面的三，弹出来一个张
///改变事件
function changeDemo(obj) {
alert(obj.value)
}
<input type="text" name="name" value="张三" onchange="changeDemo(this)">onselect 选中事件 选中内容后触发事件
选中张三或者直选中三 都会弹出来张三
//选中事件 onselect 选中内容后触发事件
function selectDemo(val) {
alert(val);
}
<input type="text" name="name" value="张三" onselect="selectDemo(this.value)">onfocus 获得焦点
onblur 失去焦点
当获得焦点时清空文本框里的值，失去焦点时给文本框填充“请输入用户名”
并且给后面的span标签中填充红色字体“请输入用户名”
//用户名
//获得焦点触发事件
function focusTest(obj) {
obj.value = "";
}
//失去焦点触发事件
function blur1(b) {
if (b.value == "") {
document.getElementById("span1").innerHTML = "请输入用户名";
} else {
document.getElementById("span1").innerHTML = "";
}
用户名：<input type="text" value="请输入用户名" onfocus="focusTest(this)" onblur="blur1(this)"> <span id="span1"
style="color: red;"></span>onsubmit 提交事件
只有当 reyurn true; 的时候才能提交成功
function demo() {
var uname = document.getElementById("uname");
var upwd = document.getElementById("upwd");
var sname = document.getElementById("sname");
var spwd = document.getElementById("spwd");
if (uname.value == "") {
sname.style.color = "red";
sname.innerHTML = "请输入用户名";
return false;
} else {
sname.innerHTML = "";
}
if (upwd.value == "") {
spwd.style.color = "red";
spwd.innerHTML = "请输入密码";
return false;
} else {
spwd.innerHTML = "";
}
return true;
}
<form action="http://www.baidu.com" onsubmit=" return demo()">
用户名： <input type="text" id="uname" value=""><span id="sname"></span><br>
密码：<input type="password" id="upwd" value=""><span id="spwd"></span><br>
<input type="submit" value="提交">鼠标移入移出事件：
效果：鼠标移入div变黄色移出后变成绿色
案例：
时间：onload 加载事件，将当前时间放在div盒子中打开页面让他加载运行
var i = 10;
function demo() {
i--;
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var t = "当前时间为:" + year + "年" + month + "月" + day + "日" + hours + ":" + minutes + ":" + seconds;
var d = document.getElementById("d").innerHTML = t;
a = setTimeout(demo, 1000);
if (i == 0) {
clearTimeout(a)
}
}
<body onload="demo()">
<div id="d"></div>
</body>登录注册：
用onsubmit提交事件 οnsubmit="return demo()"
判断用户名必须由字母数字下划线组成
用户名不能为纯字母
判断有没有选择性别
扫一扫
1762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
