自己學js程式碼常用（一）
圖片輪播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <style> .show{ display:block; } .hide{ display:none; } </style> <script> var id; function start(){ var index=0; var ulNode=document.getElementsByTagName("ul")[0]; var lis=ulNode.getElementsByTagName("li"); id=window.setInterval(function(){ index++; for(var i in lis){ lis[i].className="hide"; } var n= index%lis.length; lis[n].className="show"; },1000); } function stop(){ window.clearInterval(id); } </script> </head> <body onload="start()" > <ul onmouseover="stop()" onmouseout="start()" > <li class="show"><img src="a/1.jpg" width="320px" height="430px"/></li> <li class="hide"><img src="a/2.jpg" width="320px" height="430px" /></li> <li class="hide"><img src="a/3.jpg" width="320px" height="430px" /></li> <li class="hide"><img src="a/4.jpg" width="320px" height="430px"/></li> <li class="hide"><img src="a/5.jpg" width="320px" height="430px" /></li> </ul> </body> </html>
自動跳轉網頁
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <script> var id; window.onload=function(){ //1.獲取span節點物件 spanNode var spanNode=document.getElementById("myid"); //2.獲取spanNode中封裝的資料 var t=spanNode.innerHTML; //3.設定計時器 window.setInterval(function(){ //3.1獲取t的值 t=spanNode.innerHTML // 3.2判斷t的值 if(t>0){ t=t-1; spanNode.innerHTML=t; } else{ // 跳轉 } },1000); //計時5秒，跳轉到網易，本次例題，只計時一次 id=window.setTimeout("window.open('http://www.163.com')",5000); } function cleartime(){ //1.關閉計時器 window.clearTimeout(id); //2.跳轉到網易 window.open("http://www.163.com"); } </script> </head> <body> 對不起，程式出錯了，<span id="myid">5</span>秒鐘後跳轉到網易，點選<a href="javascript:cleartime()">這裡</a>直接到網易 </body> </html>
表單驗證
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<!--介面中文字框有三種樣式，分別為正常、獲取焦點、錯誤提示-->
<style>
table{
border:#06F 1px solid;
width:600px;
border-collapse:collapse;}
table td,table th{
border:#06F 1px solid;
padding:10px;}
table td{
background-color:#FF6;}
table th{background-color:#F96;}
.yes{
display:none;
}
.no{
display:inline;
color:red;
}
.nor{
border:#666 2px solid;
}
.error{
border:#F00 2px solid;
}
.focus{
border:#06F 2px solid;}
}
</style>
<script>
//頁面一載入讓所有的文字框處於nor狀態，當文字框獲取焦點時該文字框處於focus樣式
window.onload=function(){
//文字框處於nor
//1.獲取表單物件：document.getElementsByTagName("form")[0]
var formNode=document.forms[0]//.forms獲取document下所有的表單物件
input(formNode.user);
input(formNode.psw);
input(formNode.repsw);
input(formNode.email);
/*formNode.user.className="nor";
formNode.psw.className="nor";
//2.每個文字框都有獲取焦點狀態
formNode.user.onfocus=function(){
this.className="focus";
}*/
}
function input(textNode){
textNode.className="nor";
textNode.onfocus=function(){
this.className="focus";
}
}
//使用者錄入資料校驗需要的引數有1.文字框節點物件，2.正則表示式 3.錯誤提示span節點物件
function check(textNode,rel,spanNode){
var textvalue=textNode.value;
if(textvalue.match(rel)){
spanNode.className="yes";
textNode.className="nor";
return true;
}
else{
spanNode.className="no";
textNode.className="error";
return false;
}
}
//表單驗證：重要的功能是使用者錄入的資料不符合要求則不能提交到伺服器
//表單中submit命令按鈕的提交功能對應一個表單的onsubmit事件
//定義校驗使用者姓名函式
function checkName(textNode){
//1.獲取使用者姓名文字框中錄入的資料, 事件源：event.srcElement
//var textvalue=textNode.value;
//alert(textvalue);
//實參this指的是當前事件源，即呼叫該函式的節點物件，本函式中this指的是使用者姓名節點物件
//var textNode=event.srcElement;--->this
// var textNode=document.getElementsByTagName("input")[0];
//2.定義一個正則表示式（說明使用者姓名錄入資料的規則）要求由6位字母構成{n}
var rel=/^[a-z]{6}$/i;//正則表示式必須用//封裝，其內為正則的規則,i為忽略大小寫\w字母數字下劃線任意字元
//由6位的字母數字下劃線構成
//3.比較使用者錄入的資料是否滿足條件 match() true匹配 false不匹配
//獲取錯誤提示span節點物件
var spanNode=document.getElementById("nameid");
return check(textNode,rel,spanNode);
/*if(textvalue.match(rel)){
spanNode.className="yes";
return true;
}
else{
spanNode.className="no";
return false;
}*/
//3.1不符合要求：span節點的className="no";
//3.2符合要求：span節點的className="yes";
}
function checkPsw(textNode){
var rel=/^\d{6,8}$/;
var spanNode=document.getElementById("pswid");
return check(textNode,rel,spanNode);
}
function checkEmail(textNode){
var rel=/^\ 相關推薦
自己學js程式碼常用（一）
圖片輪播 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <
Java常用的八種排序演算法與程式碼實現（一）：氣泡排序法、插入排序法、選擇排序法
這三種排序演算法適合小規模資料排序 －－－ 共同點：基於比較，時間複雜度均為O(n2)，空間複雜度均為O(1)（原地排序演算法） 不同點：插入排序和氣泡排序是穩定的排序演算法，選擇排序不是 －－－ 穩定排序演算法：可以保持數值相等的兩個物件，在排序之
前端菜鳥學node.js初體驗（一）
如今，nodejs如此之火，讓我這個打算從事前端開發的小白，也忍不住要學習一下，然而剛剛接觸nodejs，就深深的喜歡上了這個語言。 下面我將分享一下我最初學習nodejs時的總結的學習經驗，也是總結一下近期學習的知識，還會總結我在學習中遇到的困難，又是如何解
前端教你學UI——人物處理（一）
適應 logs 減少 方法 情況 總結 -a 但是 影響 一、序言 本文作為本系列的第一篇寫UI的文章，開頭還是有必要申明一些東西的，本系列主要是為了作為博主在前端工作之余學習UI的一個記錄，同時為了讓更多的同行學習到一些編程之外的其他東西。所以本文會盡可能詳細的介紹如何
fullpage.js簡單教程（一）
style 準備工作 iba 耐心 兼容性 css3 動畫 lin per orm 最近準備做一個全屏滾動的網頁，在網上搜了一堆教程，結果大多都是一些很籠統的使用方法，對我這種耐心不超過3秒的笨蛋來說，很晦澀很籠統，所以打算邊研究邊自己寫個教程，有什麽不懂的，我再回來翻看筆
Three.js入門篇（一）創建一個場景
style api text webgl () mes utf 動畫 fun 上一面講述了向場景中添加物體對象。這一篇準備把每個功能點細細的講述一遍，一方面是為了加深自己的理解。另一方面希望能夠 幫助到有需要的人。 一、在學習WEBGL的時候，你應該先了解要創建一個WebG
讓我們把KBEngine玩壞吧！如何定制我們自己的C++函數（一）
data ase erro glob alt ins sin 程序 all 為什麽不更新kbe warring的代碼解讀了，因為在我看來那個demo講完了實體就沒東西可講了，如果專心的看官方文檔和PPT的話demo的代碼後面沒任何難點了已經，單純的復制黏貼代碼實在太過無聊。
從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作
關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，
node.js小整理（一）
eat 當前目錄 分享 rom js對象 mage 隊列 線程 ima node.js是一個基於Chrome v8引擎的JavaScript運行環境 之前我們編寫的JavaScript代碼都是在瀏覽器中運行的，所以我們可以直接在瀏覽器中敲代碼，然後直接運行。現在學習node
從零開始學 Web 之 CSS3（一）CSS3概述，選擇器
https 兼容問題 3.1 線性 web前端 不同 錨點 splay lock 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔
JS之DOM（一）
滿足 del dom3 () 樹節點 也會 name屬性 api 對象 一、DOM簡介 什麽是DOM？簡單地說，DOM是是針對HTML和XML文檔的一個API，一套對文檔的內容進行抽象和概念化的方法。 學習過ORM的同學可能知道ORM是將數據庫中的表映射到類，建立一個表和類
例項詳解js閉包（一）閉包基本概念及其作用推導
在學習前端的過程中，不可避免的要學習到js閉包這個知識點，很多朋友感到對閉包很難理解，也不清楚它有什麼用。本文就詳細介紹一下閉包，並通過幾個小例子來說明下閉包的用處。 一、閉包的概念 閉包的英文單詞是Closure，我先給閉包可
D3.js學習筆記（一）
D3.js學習資源： http://wiki.jikexueyuan.com/project/d3wiki/introduction.html 極客學院關於D3.js的系列文章； http://d3.decembercafe.org/ http://www.ourd3js.com/wor
Webpack 4.X webpack.config.js 檔案配置（一）
通過上一篇文章，我們明白了webpack的兩個配置引數入口與出口，webpack會找到入口檔案的地址，進去後一頓蹂躪，再通過你給的輸出地址就把編譯後的檔案給你了。這篇文章接著去豐富webpack.config.js的內容，說一個引數叫plugins plugins plugins裡面放的是外掛，在webp
teb_local_planner程式碼梳理（一）
該部分是teb進行自動調整，根據de_ref參考兩個位姿之間的時間差，dt_hysteresis為滯後時間，也就是為時間差加一個誤差限，一般為dt_ref的10%。 經過調整滯後想要達到的目的是，每個時間差都在dt_ref左右。 void TimedElasticBand::autoResi
JS之函式（一）
函式定義 函式主要分為兩種，其一為常見的函式宣告，其二為函式表示式 1、函式宣告 function test() {} 講解為：函式的特徵值 function + 函式名() {函式體} 2、函式表示式 （1
java程式設計思想-程式碼賞析（一）
package com.test.pet; import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.Random; public abstract clas
detectron程式碼理解（一）：Resnet模型構建理解
這裡具體以resnet50為例進行說明，一句一句地分析程式碼，程式碼位置位於Resnet.py，具體的分析函式為add_ResNet_convX_body. 在分析之前首先貼上resnet50的程式碼結構圖： # add the stem (by default, conv1 and
Js基礎總結（一）
JavaScript中的變數型別有哪些？ 一. 值型別(原始型別)，值型別是儲存再棧中的簡單資料。也就是說，它們的值直接儲存在變數訪問的位置。一共包含6種，分別是：字串（String) 數值（number)布林值（boolean) null undefined Symbol(ES6新增）
原生JS去重（一）--兩種方法去掉重複字元
所謂“去重”，即是去掉重複的字元。本篇部落格講述兩種方式去重，一種是比較簡單但程式碼比較囉嗦點的，另一種是有點深度但是簡潔的。 我直接寫JavaScript程式碼了。 方式一： function deleteRepetionChar(arr){ //先判斷輸入進