本文目錄一覽:
- 1、如何用js代碼實現下列功能
- 2、寫一段javascript(或jQuery)代碼實現以下功能?
- 3、請問如何使用原生JS實現以下功能,以及他的思路是如何的
- 4、請問怎麼用javascript實現以下效果
如何用js代碼實現下列功能
!DOCTYPE html
html
head
meta charset=”utf-8″ /
titleJavascript+HTML用正則表達式寫一段輸入的驗證代碼/title
style type=”text/css”
table {
position: relative;
margin: auto;
font-family: Consolas;
font-size: 12px;
border: 1px solid black;
border-collapse: collapse;
width: 800px;
}
table tr td {
border: 1px solid black;
}
.center {
text-align: center;
}
/style
script type=”text/javascript”
var V = {
date: new Date,
isError: true,
validationType: [
‘cannot be blank’,
‘must be a valid email’,
‘must contain only numbers,single spaces.’,
‘must contain between 13 18 numbers, and single spaces.’,
‘expiry date cannot be expired.’
],
trim: function(v)
{
return v.replace(/^\s*|\s*$/g, ”);
},
validateOnblur: function(obj, validationType)
{
var val = V.trim(obj.value);
switch (validationType)
{
case 0:
if (V.trim(obj.value) == ”)
{
obj.value = ”;
return V.validationType[0];
}
return ”;
case 1:
if (!/^[\w\-]+@[\w\-]+\.\w+$/.test(val))
{
obj.value = ”;
return V.validationType[1];
}
return ”;
case 2:
if (!/^(\+\(\d+\))?\d+$/.test(val))
{
obj.value = ”;
return V.validationType[2];
}
return ”;
case 3:
if (!/^[\d\s]{13,18}$/.test(val))
{
obj.value = ”;
return V.validationType[3];
}
return ”;
case 4:
var expirydate = document.getElementsByName(‘expirydate’);
var year = expirydate[0].value;
var month = expirydate[1].value;
if (new Date(year, parseInt(month) – 1, 0) = V.date)
{
return V.validationType[4];
}
return ”;
default:
return ”;
}
},
checkNow: function(obj)
{
var _name = obj.name, validationType = -1;
if (_name == ‘firstname’ || _name == ‘lastname’ || _name == ‘address’)
{
validationType = 0;
}
else if (_name == ’email’)
{
validationType = 1;
}
else if (_name == ‘phone’)
{
validationType = 2;
}
else if (_name == ‘credit’)
{
validationType = 3;
}
else if (_name == ‘expirydate’)
{
validationType = 4;
}
var cell = obj.parentElement;
if (cell.children[cell.children.length – 1].tagName.toLowerCase() == ‘div’)
{
cell.removeChild(cell.children[cell.children.length – 1]);
V.isError = false;
}
var error = V.validateOnblur(obj, validationType);
if (error != ”)
{
var info = document.createElement(‘div’);
info.style.color = ‘red’;
info.innerText = error;
cell.appendChild(info);
V.isError = true;
}
},
displayError: function(rows, len, flag)
{
for ( var i = 0; i len; i++)
{
var cell = rows[i].cells[1];
if (!cell)
{
continue;
}
var obj = cell.children[0];
if (flag)
{
if (typeof obj.value != ‘undefined’)
{
V.checkNow(obj);
}
}
else
{
obj.onblur = function()
{
V.checkNow(this);
}
if (obj.tagName.toLowerCase() == ‘select’)
{
cell.children[1].onblur = function()
{
V.checkNow(this);
}
}
}
}
}
};
window.onload = function ()
{
var form = document.formValidation;
var table = form.getElementsByTagName(‘table’)[0];
var rows = table.rows, len = rows.length;
document.getElementById(‘submit’).onclick = function()
{
V.displayError(rows, len, true);
}
form.onsubmit = function()
{
return !V.isError;
}
V.displayError(rows, len, false);
var date = V.date;
var expirydate = document.getElementsByName(‘expirydate’);
for ( var i = 2014; i 2055; i++)
{
var option = document.createElement(‘option’);
option.value = i;
option.innerText = i;
expirydate[0].appendChild(option);
}
expirydate[0].value = date.getFullYear();
}
/script
/head
body
form name=”formValidation” method=”post” action=””
table
caption!Form Validation!/caption
tr
tdfirst name:/td
tdinput type=”text” name=”firstname” //td
/tr
tr
tdlast name:/td
tdinput type=”text” name=”lastname” //td
/tr
tr
tdaddress:/td
tdtextarea name=”address”/textarea/td
/tr
tr
tdemail:/td
tdinput type=”text” name=”email” //td
/tr
tr
tdphone:/td
tdinput type=”text” name=”phone” //td
/tr
tr
tddelivery method:/td
td
labelinput type=”radio” name=”delivery” checked=”checked” /regular post/label
labelinput type=”radio” name=”delivery” /courier/label
labelinput type=”radio” name=”delivery” /express courier/label
/td
/tr
tr
tdcredit card number field: /td
tdinput type=”text” name=”credit” //td
/tr
tr
tdexpiry date:/td
td
select name=”expirydate”/select year
select name=”expirydate”
option value=”1″01/option
option value=”2″02/option
option value=”3″03/option
option value=”4″04/option
option value=”5″05/option
option value=”6″06/option
option value=”7″07/option
option value=”8″08/option
option value=”9″09/option
option value=”10″10/option
option value=”11″11/option
option value=”12″12/option
/select month
/td
/tr
tr
td class=”center” colspan=”2″
labelinput type=”checkbox” name=”newletter” /please sign me up for the newletter/label
/td
/tr
tr
td class=”center” colspan=”2″
input type=”submit” value=”submit” id=”submit” /input type=”reset” value=”reset” id=”reset” /
/td
/table
/form
/body
/html
寫一段javascript(或jQuery)代碼實現以下功能?
首先思路如下:
檢測用戶是否更改數量或單價
檢測用戶是否輸入的是數字
計算,並返回值到總價中
簡易代碼如下:
以下為部分代碼:
!–onkeyup方法是在鍵盤按鍵按下並鬆開時發生–
body onkeyup=”count(number.value,price.value)”
input type=”text” name=”count” value=”” id=”number”/input
input type=”text” name=”price” value=”” id=”price”/input
span name=”total” class=”total_cls” id=”total_id”/span
script
//count()輸入值是數量和價格的value
function count(n,p){
if(Number(n)==n Number(p)==p)
//這一步是為了檢測用戶是否輸入數字
{
document.getElementById(“total_id”).innerHTML=Number(n)*Number(p);
}
else
{
alert(“輸入有誤”);
}
}
/script
請問如何使用原生JS實現以下功能,以及他的思路是如何的
這個簡單,使用for循環就可以了。
!DOCTYPE html
html
head
meta charset=”utf-8″/
titletest/title
/head
body
div id=”box”00/div
script type=”text/javascript”
function liang(n){
var s = 1;
for(var i = 1; i = n; i++){
s *= i;
console.log(‘s==’, s);
}
return s;
}
var a = liang(6);
document.getElementById(‘box’).innerHTML = a;
/script
/body
/html
還有一個方法也可以:
function hermit(num){
if(num == 1 || num === 0){
return 1;
}else{
return (num * hermit(num -1));
}
}
var a = hermit(6);
document.getElementById(‘box’).innerHTML = a;
請問怎麼用javascript實現以下效果
你的問題還沒解決呀,用jquery的話很好寫的:
我寫了一個完整的,你看下,還有問題私信我吧。
html
head
style type=”text/css”
.collapse {
display: none;
}
.test {
display: block;
}
/style
script src=”jquery-1.7.1.min.js”/script
script type=”text/javascript”
window.onload = function () {
var hash = window.location.hash;
if (!hash) hash = “#user”;
window.location.hash = hash; //請在下面補充實現方法
$(“a[href$='” + hash + “‘]”).parent().parent().removeClass(“collapse”).addClass(“test”);
}
/script
/head
body
ul class=”nav nav-list collapse”
lia href=”8.html#user”user/a/li
lia href=”8.html#role”role/a/li
lia href=”8.html#admin”admin/a/li
/ul
/body
/html
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/293487.html