JS:点击按钮后图片开始或停止随机浮动抖动，完数，接收，行，赋值，判断【诗书画唱】
打印1000以内的完数，完数（6=1+2+3）
window.onload =function() {
wanshu();
}
function wanshu() {
var n = 1000;
var r, j, i;
var he = 0;
for(i = 1; i <= n; i++) {
r=0;
for(j = 1; j < i; j++) {
if(i % j == 0) {
r = r + j;
}
}
if(r == i) {
he = he + 1;
document.write("1000以内的第" + he + "个完数为:" + r +
" ");
}
}
}
案例:假设评价学生的考试成绩，10分满分制，我们按照每一份一个等级进行划分，根据分数不同做出不同的评价
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
diaoyong()
}
function diaoyong() {
var fenshu = prompt("请输入学生成绩哟(^ v ^) (成绩范围: 1-10分) ");
if(fenshu == 1) {
alert("评价:加油!努力!学习!奋斗!");
} else if(fenshu == 2) {
alert("评价:要多学习! ");
} else if(fenshu == 3) {
alert("评价:努力再努力! ");
} else if(fenshu== 4) {
alert("评价:要更努力! ");
} else if(fenshu == 5) {
alert("评价:加油! ");
} else if(fenshu == 6) {
alert("评价:可以! ");
} else if(fenshu == 7) {
alert("评价:帅! ");
} else if(fenshu == 8) {
alert("评价:强! ");
} else if(fenshu == 9) {
alert("评价:棒! ");
} else if(fenshu == 10){
alert("评价:哎呦!不错哦! ");
} else {
alert("请重新输入!成绩范围: 1-10分");
}
}
</script>
</head>
<body>
</body>
</html>
7.打印5以下的数字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
diaoyong()}
function diaoyong() {
document .write("打印5以下的自然数(包括5):")
for(var i = 5; i>= 0; i--) {
document .write(i + " ");
}
}
</script>
</head>
<body>
</body>
</html>
案例:打印100以内的奇数（五个为一行）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
jishu();
}
function jishu() {
for(var i=1,j=0;i<100;i+=2){
document . write(i + " ")
j++;
if(j%5==0) {
document. write("<br>");
}
}
}
</script>
</head>
<body>
</body>
</html>
提示用户输入一个内容，判断输入的类型，如果是数字打印99乘法表，如果是字符串打印静夜思这首诗。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function() {
diaoyong();
}
function diaoyong() {
var bianliang= prompt("请输入数字或非数字的字符串哟(^ v ^)"+
"（如果是数字打印99乘法表，如果是非数字的字符串打印静夜思这首诗）");
// var re =/^[0-9]+.?[0-9]*/;
//if(re.test(bianliang)) {
//判断字符串是否为正整数用/^[0-9]+.?[0-9]*/
if( !isNaN(bianliang)) {
document.write("输入的是数字，打印99乘法表: <br />");
for(var j=1;j<=9;j++) {
for(var i=1;i<=j;i++){
document.write(j+"*"+i+"="+i*j+" ");
}
document.write("<br />");
}}
else if(isNaN(bianliang)) {
document.write("输入的是非数字的字符串，打印静夜思这首诗:<br />"+
"《静夜思》<br />作者：(唐)李白 <br />床前明月光，"+
"疑是地上霜。<br />举头望明月，低头思故乡。");
}
}
</script>
</head>
<body>
</body>
</html>
定义一个函数，接收用户输入的内容，将其结果赋值到div中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#kuang{
width: 77px;
height: 77px;
margin: 0px auto;
border: 1px solid blue;
}
</style>
<script>
window.onload = function() {
diaoyong()
}
function diaoyong(){
var v=prompt("请输入你的内容哟(^ v ^)");
//得到div
var bianliang=document . getElementById("kuang");
bianliang. innerHTML=v;}
</script>
</head>
<body>
<div id="kuang"></div>
</body>
</html>
round:四舍五入
点击后让单个图片在屏幕最大氛围内随机浮动，达到广告随机投放，随机位置出现广告图片的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>诗书画唱</title>
<style>
div{
position:absolute;
}
</style>
</head>
<body>
达到广告随机投放，随机位置出现广告图片的效果：
<br />
<input type="button" value="点击后让单个图片在屏幕最大氛围内随机浮动" onclick="imgFloatFangFa();"/>
<div id="divImg">
<img src="img/1.png" width="130" height="180">
</div>
</body>
<!--
为了防止堵塞，js代码有时不写上面-->
<script >
//获取图片div对象
var img1=document.getElementById("divImg");
//设置div起始点的坐标(0,0）左上角坐标
var x=0,y=0;
//右下边求出图片起始点最大X和Y的坐标值
var xMax=window.screen.availWidth-130,
//window.screen.availWidth为屏幕的宽,window.screen.availHeight为屏幕的长,
//这里减去图片的宽,减去图片的长等是为让图片等不从屏幕越界
//avail有助于 [əˈveɪl]
yMax=window.screen.availHeight-180;
function imgFloatFangFa(){
//随机产生坐标x和坐标Y的值（都是从零到起始点最大X和Y的坐标值）
x=Math.round(Math.random()*(xMax));
y=Math.round(Math.random()*(yMax));
//alert(x+","+y);
img1.style.left=x+"px";
img1.style.top=y+"px";
setTimeout("imgFloatFangFa()",1000);
}
</script>
</html>
点击开始按钮后3张图片开始随机浮动，点击停止按钮后3张图片停止随机浮动：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>诗书画唱</title>
<style>
#divImg1{
position:absolute;
width: 66px; height:66px;border: 1px solid red;
}
#divImg2{
position:absolute;left: 66px;
width: 66px; height:66px;border: 1px solid red;
}
#divImg3{
position:absolute;left: 132px;
width: 66px; height:66px;border: 1px solid red;
}
#button{
position:absolute;
top: 233px; width: 233px; height: 66px;border: 1px solid blue;
/*padding: 30px;*/
/*vertical-align: middle;*/
}
#button input{
width: 233px; height: 33px;
}
</style>
</head>
<body>
<div id="divImg1">
<img src="img/1.png" width="66" height="66">
</div>
<div id="divImg2">
<img src="img/2.png" width="66" height="66">
</div>
<div id="divImg3">
<img src="img/3.png" width="66" height="66">
</div>
<div id="button">
<input type="button" value="点击一次后让图片随机浮动"
onclick="imgStartFloatFangFa();"/>
<input type="button" value="点击一次后让图片停止浮动"
onclick="imgStopFloatFangFa();"/>
</div>
</body>
<!--
为了防止堵塞，js代码有时不写上面-->
<script >
var img1=document.getElementById("divImg1");
var img2=document.getElementById("divImg2");
var img3=document.getElementById("divImg3");
var x=0,y=0;
function imgFloatFangFa(){
x1=Math.round(Math.random()*7);
y1=Math.round(Math.random()*7);
x2=Math.round(Math.random()*7)+66;
y2=Math.round(Math.random()*7);
x3=Math.round(Math.random()*7)+132;
y3=Math.round(Math.random()*7);
img1.style.left=x1+"px";
img1.style.top=y1+"px";
img2.style.left=x2+"px";
img2.style.top=y2+"px";
img3.style.left=x3+"px";
img3.style.top=y3+"px";
}
window.start = null;
function imgStartFloatFangFa(){
//setTimeout("imgFloatFangFa()",10);
window.start=setInterval("imgFloatFangFa()",66);
}
function imgStopFloatFangFa(){
clearInterval(window.start);
window.start = null;
}
</script>
</html>
