JS:點(diǎn)擊按鈕后圖片開(kāi)始或停止隨機(jī)浮動(dòng)抖動(dòng)，完數(shù)，接收，行，賦值，判斷【詩(shī)書畫唱】
打印1000以內(nèi)的完數(shù)，完數(shù)（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以內(nèi)的第" + he + "個(gè)完數(shù)為:" + r +
" ");
}
}
}
案例:假設(shè)評(píng)價(jià)學(xué)生的考試成績(jī)，10分滿分制，我們按照每一份一個(gè)等級(jí)進(jìn)行劃分，根據(jù)分?jǐn)?shù)不同做出不同的評(píng)價(jià)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
diaoyong()
}
function diaoyong() {
var fenshu = prompt("請(qǐng)輸入學(xué)生成績(jī)喲(^ v ^) (成績(jī)范圍: 1-10分) ");
if(fenshu == 1) {
alert("評(píng)價(jià):加油!努力!學(xué)習(xí)!奮斗!");
} else if(fenshu == 2) {
alert("評(píng)價(jià):要多學(xué)習(xí)! ");
} else if(fenshu == 3) {
alert("評(píng)價(jià):努力再努力! ");
} else if(fenshu== 4) {
alert("評(píng)價(jià):要更努力! ");
} else if(fenshu == 5) {
alert("評(píng)價(jià):加油! ");
} else if(fenshu == 6) {
alert("評(píng)價(jià):可以! ");
} else if(fenshu == 7) {
alert("評(píng)價(jià):帥! ");
} else if(fenshu == 8) {
alert("評(píng)價(jià):強(qiáng)! ");
} else if(fenshu == 9) {
alert("評(píng)價(jià):棒! ");
} else if(fenshu == 10){?
alert("評(píng)價(jià):哎呦!不錯(cuò)哦! ");
} else {
alert("請(qǐng)重新輸入!成績(jī)范圍: 1-10分");
}
}
</script>
</head>
<body>
</body>
</html>
7.打印5以下的數(shù)字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
diaoyong()}
function diaoyong() {
document .write("打印5以下的自然數(shù)(包括5):")
for(var i = 5; i>= 0; i--) {
document .write(i + " ");
}
}
</script>
</head>
<body>
</body>
</html>
案例:打印100以內(nèi)的奇數(shù)（五個(gè)為一行）
<!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>
提示用戶輸入一個(gè)內(nèi)容，判斷輸入的類型，如果是數(shù)字打印99乘法表，如果是字符串打印靜夜思這首詩(shī)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function() {
diaoyong();
}
function diaoyong() {
var bianliang= prompt("請(qǐng)輸入數(shù)字或非數(shù)字的字符串喲(^ v ^)"+
"（如果是數(shù)字打印99乘法表，如果是非數(shù)字的字符串打印靜夜思這首詩(shī)）");
// var re =/^[0-9]+.?[0-9]*/;
//if(re.test(bianliang)) {
//判斷字符串是否為正整數(shù)用/^[0-9]+.?[0-9]*/
if( !isNaN(bianliang)) {
document.write("輸入的是數(shù)字，打印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("輸入的是非數(shù)字的字符串，打印靜夜思這首詩(shī):<br />"+
"《靜夜思》<br />作者：(唐)李白? <br />床前明月光，"+
"疑是地上霜。<br />舉頭望明月，低頭思故鄉(xiāng)。");
}
}
</script>
</head>
<body>
</body>
</html>
定義一個(gè)函數(shù)，接收用戶輸入的內(nèi)容，將其結(jié)果賦值到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("請(qǐng)輸入你的內(nèi)容喲(^ v ^)");
//得到div
var bianliang=document . getElementById("kuang");
bianliang. innerHTML=v;}
</script>
</head>
<body>
<div id="kuang"></div>
</body>
</html>
round:四舍五入
點(diǎn)擊后讓單個(gè)圖片在屏幕最大氛圍內(nèi)隨機(jī)浮動(dòng)，達(dá)到廣告隨機(jī)投放，隨機(jī)位置出現(xiàn)廣告圖片的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>詩(shī)書畫唱</title>
<style>
div{
? ? position:absolute;
? ? }
</style>
</head>
<body>
達(dá)到廣告隨機(jī)投放，隨機(jī)位置出現(xiàn)廣告圖片的效果：
<br />
<input type="button" value="點(diǎn)擊后讓單個(gè)圖片在屏幕最大氛圍內(nèi)隨機(jī)浮動(dòng)" onclick="imgFloatFangFa();"/>
<div id="divImg">
<img src="img/1.png" width="130" height="180">
</div>
</body>
<!--
為了防止堵塞，js代碼有時(shí)不寫上面-->
<script >
//獲取圖片div對(duì)象
var img1=document.getElementById("divImg");
? ??
//設(shè)置div起始點(diǎn)的坐標(biāo)(0,0）左上角坐標(biāo)
var x=0,y=0;
//右下邊求出圖片起始點(diǎn)最大X和Y的坐標(biāo)值
var xMax=window.screen.availWidth-130,
//window.screen.availWidth為屏幕的寬,window.screen.availHeight為屏幕的長(zhǎng),
//這里減去圖片的寬,減去圖片的長(zhǎng)等是為讓圖片等不從屏幕越界
//avail有助于 [??ve?l]
yMax=window.screen.availHeight-180;
function imgFloatFangFa(){
//隨機(jī)產(chǎn)生坐標(biāo)x和坐標(biāo)Y的值（都是從零到起始點(diǎn)最大X和Y的坐標(biāo)值）
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>
點(diǎn)擊開(kāi)始按鈕后3張圖片開(kāi)始隨機(jī)浮動(dòng)，點(diǎn)擊停止按鈕后3張圖片停止隨機(jī)浮動(dòng)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>詩(shī)書畫唱</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="點(diǎn)擊一次后讓圖片隨機(jī)浮動(dòng)"?
onclick="imgStartFloatFangFa();"/>
<input type="button" value="點(diǎn)擊一次后讓圖片停止浮動(dòng)"?
onclick="imgStopFloatFangFa();"/>
</div>
</body>
<!--
為了防止堵塞，js代碼有時(shí)不寫上面-->
<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>
