HTML+JS计算器
<! DOCTYPE html >
< html>
< head>
< title> Calculator</ title>
</ head>
< body>
< input type = " text" id = " display" disabled >
< br>
< button onclick = " addToDisplay ( '7' ) " > 7</ button>
< button onclick = " addToDisplay ( '8' ) " > 8</ button>
< button onclick = " addToDisplay ( '9' ) " > 9</ button>
< button onclick = " addToDisplay ( '+' ) " > +</ button> < br>
< button onclick = " addToDisplay ( '4' ) " > 4</ button>
< button onclick = " addToDisplay ( '5' ) " > 5</ button>
< button onclick = " addToDisplay ( '6' ) " > 6</ button>
< button onclick = " addToDisplay ( '-' ) " > -</ button> < br>
< button onclick = " addToDisplay ( '1' ) " > 1</ button>
< button onclick = " addToDisplay ( '2' ) " > 2</ button>
< button onclick = " addToDisplay ( '3' ) " > 3</ button>
< button onclick = " addToDisplay ( '*' ) " > *</ button> < br>
< button onclick = " addToDisplay ( '0' ) " > 0</ button>
< button onclick = " addToDisplay ( '.' ) " > .</ button>
< button onclick = " calculate ( ) " > =</ button>
< button onclick = " addToDisplay ( '/' ) " > /</ button> < br>
< script>
function addToDisplay ( value ) {
document. getElementById ( 'display' ) . value += value;
}
function calculate ( ) {
var result = eval ( document. getElementById ( 'display' ) . value) ;
document. getElementById ( 'display' ) . value = result;
}
</ script>
</ body>
</ html>
用户输入显示
< ! DOCTYPE html>
< html >
< head>
< meta charset= "UTF-8" >
< title> User Input Display < / title>
< / head>
< body>
< ! -- 创建一个标签和输入字段,以便用户输入数据-- >
< label for = "userInput" > 输入您的内容: < / label>
< input type= "text" id= "userInput" >
< ! -- 创建一个按钮,当用户点击时,嗲用displayInput函数-- >
< button onclick= "displayInput()" > 点击查看< / button>
< ! -- 创建一个段落元素,用来显示用户输入的内容-- >
< p id= "displayArea" > < / p>
< script>
function displayInput ( ) {
var userInput = document. getElementById ( "userInput" ) . value;
document. getElementById ( "displayArea" ) . innerHTML = userInput;
}
< / script>
< / body>
< / html>
随机码
<! DOCTYPE html >
< html>
< head>
< meta charset = " UTF-8" >
< title> Random Verification Code</ title>
</ head>
< body>
< h1> 随机验证码:</ h1>
< p id = " code" > </ p>
< button onclick = " generateCode ( ) " > 生成随机码</ button>
< script>
function generateCode ( ) {
var code = "" ;
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789" ;
for ( var i = 0 ; i < 6 ; i++ ) {
code += possible. charAt ( Math. floor ( Math. random ( ) * possible. length) ) ;
}
document. getElementById ( "code" ) . innerHTML = code;
}
</ script>
</ body>
</ html>
密码校验
<! DOCTYPE html >
< html>
< head>
< meta charset = " UTF-8" >
< title> Login Page</ title>
</ head>
< body>
< form>
< label for = " password1" > 密码:</ label>
< input type = " password" id = " password1" name = " password1" > < br> < br>
< label for = " password2" > 重复密码:</ label>
< input type = " password" id = " password2" name = " password2" > < br> < br>
< input type = " submit" value = " 提交" >
</ form>
< script>
const password1 = document. getElementById ( "password1" ) ;
const password2 = document. getElementById ( "password2" ) ;
const form = document. querySelector ( "form" ) ;
form. addEventListener ( "submit" , function ( event ) {
if ( password1. value !== password2. value) {
alert ( "密码不一致" ) ;
event. preventDefault ( ) ;
}
} ) ;
</ script>
</ body>
</ html>
查看密码
<! DOCTYPE html >
< html>
< head>
< meta charset = " UTF-8" >
< title> Login Page</ title>
</ head>
< body>
< form action = " /login" method = " post" >
< label for = " username" > 用户名:</ label>
< input type = " text" id = " username" name = " username" > < br> < br>
< label for = " password" > 密码:</ label>
< input type = " password" id = " password" name = " password" >
< input type = " checkbox" onclick = " togglePassword ( ) " > 查看密码< br> < br>
< input type = " submit" value = " Submit" >
</ form>
< script>
function togglePassword ( ) {
var passwordField = document. getElementById ( "password" ) ;
if ( passwordField. type === "password" ) {
passwordField. type = "text" ;
} else {
passwordField. type = "password" ;
}
}
</ script>
</ body>
</ html>
点击按钮弹出信息
< button id = " btn" > 点击</ button>
< script>
var btn = document. getElementById ( 'btn' ) ;
btn. onclick = function ( ) {
alert ( '弹出' ) ;
} ;
</ script>
登录校验
<! DOCTYPE html >
< html>
< head>
< meta charset = " UTF-8" >
< title> </ title>
</ head>
< body>
< form action = " success.html" method = " get" onsubmit = " return checkUserInfo ( ) ; " >
< table border = " 1px" width = " 450px" align = " center" >
< tr>
< td> 用户名:</ td>
< td> < input type = " text" id = " userName" /> </ td>
</ tr>
< tr>
< td> 手机 :</ td>
< td> < input type = " text" class = " tel" /> </ td>
</ tr>
< tr>
< td> 座机 :</ td>
< td> < input type = " text" class = " tel" /> </ td>
</ tr>
< tr>
< td colspan = " 2" align = " center" > < input type = " submit" value = " 提交" /> </ td>
</ tr>
</ table>
</ form>
< script type = " text/javascript" >
function checkUserInfo ( ) {
var userNameInput = document. getElementById ( "userName" ) ;
var userName_value = userNameInput. value;
var tels = document. getElementsByClassName ( "tel" ) ;
document. getElementsByName ( 'name属性的值' ) ;
document. getElementsByTagName ( '标签的名称' ) ;
if ( "" == userName_value) {
alert ( '用户名必须要填写!' ) ;
return false ;
} else {
if ( userName_value. length< 6 ) {
alert ( '用户名至少是6位!' ) ;
return false ;
}
}
return true ;
}
</ script>
</ body>
</ html>
点击按钮显示内容
<! DOCTYPE html >
< html>
< head>
< meta charset = " UTF-8" >
< title> </ title>
</ head>
< body>
< button onclick = " showData ( ) ; " > 显示数据</ button>
< hr />
< div id = " show" >
</ div>
< script type = " text/javascript" >
function showData ( ) {
var div = document. getElementById ( 'show' ) ;
div. innerHTML= '<h1>快乐时刻</h1><p>日本在第二次世界大战期间,于1945年8月6日和8月9日,分别遭到美国投掷的两枚原子弹袭击。<br>' +
'第一颗原子弹于8月6日早上8点15分被投入广岛市中心,称为“小男孩”,造成约14万人死亡、受伤或失踪。<br>' +
'第二颗原子弹于8月9日上午11点02分被投入长崎市中心,称为“胖子”,造成约7.5万人死亡、受伤或失踪。<br>' +
'这两次核弹攻击是人类历史上最具毁灭性和残忍性的战争行为之一,也引起了全球对核武器及其使用的深刻反思和警醒。</p>' ;
}
</ script>
</ body>
</ html>