JavaScriptの応用
13515 ワード
javascriptの応用
フォームを検証
一、ステップ分析第一歩:イベントを決定し、関数 をバインディングする.第二ステップ:この関数を書く(ユーザが入力したデータを取得する) 第3ステップ:ユーザが入力したデータを判断する .第4ステップ:データ合法化(フォームに提出させる) 第5ステップ:データ不正(エラーメッセージを与え、フォームを提出させない) 問題:フォームの提出はどのように制御しますか?
イベントonsubmitについて:フォーム提出の位置に一般的に使用される場合、関数を定義する際には戻り値を与える必要があります.
onsubmit=return check Form()
二、コード実現
一、技術分析:は、要素document.getElemenntById(「id名」) を取得する.事件(onload) タイミング操作:setInterval(「changeImg()」、3000); 二、ステップ分析:第一歩:イベントを決定し、関数 をバインドする.第二ステップ:バインディングのこの関数を書く 第3ステップ:タイムタスクを書く 第四ステップ:タイマータスク内の関数 を書き込みます.第5ステップ:変数によりループ(ルーニーマップの位置を取得し、src属性を設定する)を行います.
三、コード実現:
画像の切り替え:
1.需要分析
私達はトップページの中のトップでタイミングよく広告画像をポップアップすることを望んでいます.
2.技術分析 は、ピクチャの位置を取得する .隠し画像:display:none タイミング操作:set Interval(「ピクチャを表示する関数」3000); 3.ステップ分析第一歩:ページ指定位置に広告画像(display属性のnone値を使用)を隠す 第二ステップ:イベントを決定し、関数 をバインドする.第3ステップ:この関数を書く(表示画像を設定するタイミング操作) 第4ステップ:書込みタイマーの関数(広告画像の位置を取得し、属性styleのdisplay値blockを設定する) 第5ステップ:画像を表示するタイミング操作をクリアする() 第6ステップ:隠し画像を書くタイミング操作 第7ステップ:書込みタイマーの関数(広告画像の位置を取得し、属性styleのdisplay値noneを設定する) 第8ステップ:非表示ピクチャを消去するタイミング操作() 4.コード実現
javascriptの導入方式内部導入方式:直接javascriptコードを に書く.
フォームを検証
一、ステップ分析
イベントonsubmitについて:フォーム提出の位置に一般的に使用される場合、関数を定義する際には戻り値を与える必要があります.
onsubmit=return check Form()
二、コード実現
function checkForm(){
//alert("aa");
/** */
//1.
var uValue = document.getElementById("user").value;
//alert(uValue);
if(uValue==""){
//2.
alert(" !");
return false;
}
/* */
var pValue = document.getElementById("password").value;
if(pValue==""){
alert(" !");
return false;
}
/** */
var rpValue = document.getElementById("repassword").value;
if(rpValue!=pValue){
alert(" !");
return false;
}
/* */
var eValue = document.getElementById("eamil").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert(" !");
return false;
}
}
ログイン
する
ショッピング？カー
のページ
のデジタル
コンピュータオフィス
ケース
たちについて
します
を く
の
リンク
い
サービス
Copyright © 2005-2016
function checkForm(){
//alert("aa");
/** */
//1.
var uValue = document.getElementById("user").value;
//alert(uValue);
if(uValue==""){
//2.
alert(" !");
return false;
}
/* */
var pValue = document.getElementById("password").value;
if(pValue==""){
alert(" !");
return false;
}
/** */
var rpValue = document.getElementById("repassword").value;
if(rpValue!=pValue){
alert(" !");
return false;
}
/* */
var eValue = document.getElementById("eamil").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert(" !");
return false;
}
}
一、技術分析:
三、コード実現:
画像の切り替え:
var i=1;
function changeImg(){
i++;
document.getElementById("img1").src="../../img/"+i+".jpg";
if(i==3){
i=0;
}
}
function init(){
//
setInterval("changeImg()",3000);
}
//
var i=0
function changeImg(){
i++;
// src
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
1.需要分析
私達はトップページの中のトップでタイミングよく広告画像をポップアップすることを望んでいます.
2.技術分析
function init(){
//
setInterval("changeImg()",3000);
//1.
time = setInterval("showAd()",3000);
}
//
var i=0
function changeImg(){
i++;
// src
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
//2.
function showAd(){
//3.
var adEle = document.getElementById("img2");
//4.
adEle.style.display = "block";
//5.
clearInterval(time);
//6.
time = setInterval("hiddenAd()",3000);
}
//7.
function hiddenAd(){
//8. style display none
document.getElementById("img2").style.display= "none";
//9.
clearInterval(time);
}
javascriptの導入方式
外部導入方式:
は一つの.jsファイルを作成して、中にjavascriptコードを書いて、それからhtmlファイルの中でscriptタグのsrc属性を通じて外部のjsファイル