茶叶网站建设网页设计制作,35个好的网站设计,济南网络科技有限公司,wordpress看流量一、网页中文字的字号选择性改变
单击前初始状态页面 单击“中”链接后页面 文字素材#xff1a; JavaScript是一种能让你的网页更加生动活泼的程式语言#xff0c;也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的… 一、网页中文字的字号选择性改变
单击前初始状态页面 单击“中”链接后页面 文字素材 JavaScript是一种能让你的网页更加生动活泼的程式语言也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。
!-- prj_9_1.html --
!doctype html
html langenheadmeta charsetUTF-8title 改变新闻网页中字号 /titlestyle typetext/css#div1 {text-align: center;font-size: 16px;}/*定义图层样式*/#content {font-size: 12px;line-height: 2em;padding: 10px;background: #C0C0C0;color: black;border: 2px groove #FCFF57;}p {text-indent: 2em;}/*定义段落样式*//stylescript typetext/javascript//定义设置字体大小函数function $(id) {return document.getElementById(id);}function setFont(size) {$(content).style.fontSize size;}/script/headbodyh2 aligncenter用JavaScript改变新闻网页中字号/h2div iddiv1选择字号【 nbsp;a hrefjavascript:setFont(12px)小/anbsp;a href# onclickjavascript:setFont(18px);中/anbsp;a href# onclicksetFont(24px);大/a】/divdiv idcontentpJavaScript是一种能让你的网页更加生动活泼的程式语言也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。/p/div/body
/htmL二、计算任意区间内连续自然数的累加和
计算累加和页面效果图 未应用样式时页面效果 选择文件类型对话框界面 未输入区间数据页面效果图 起始数大于等于终止数时页面效果图 javascript代码
/*计算任意区间内连续自然数的累加和sum.js*/
//以Id号获取HTML页面元素
function $(id){return document.getElementById(id);}
//计算区间自然数累加和
function sum(n1,n2){for (var in1,sum10;in2 ;i ){sum1sum1i;}return sum1;
}
//显示累加和
function show(){var n11parseFloat($(start_num).value);var n22parseFloat($(end_num).value);if (n110 n220) //输入数据必须不为0{ if ( n11n22){alert(起始数必须小天终止数请重输);$(start_num).value; //清空文本域$(end_num).value; //清空文本域}else{ //回填累加和文本框$(sum).valuesum(n11,n22);}}else{alert(请输入数据);$(start_num).focus(); //文本域获得焦点}
}!-- prj_9_2.html --
!doctype html
html langenheadmeta charsetUTF-8title 计算任意区间内连续自然数的累加和/titlescript typetext/javascript srcpro92/sum.js/scriptstyle typetext/cssdiv {text-align: center;margin: 20px auto;border: 18px groove #66ff66;line-height: 1.5em;width: 560px;height: 260px;font-weight: bold;}form {margin: 0 auto;padding: 5px;}input,label {margin: 5px auto;}/style/headbodydiv id classh3计算任意区间内连续自然数的累加和/h3form methodpost actionh3定义区间/h3label起始数:/labelinput typetext namestart_num idstart_numlabel终止数:/labelinput typetext nameend_num idend_numbrlabel累加和:/labelinput typetext namesum idsum readonlybrbrinput typebutton value计算 onclickshow(); /nbsp;nbsp;input typereset namereset value清空 //form/div/body
/html三、国债认购小程序
程序运行初始页面 输入表单数据后页面 确认信息框页面 提示信息对话框-输入验证码页面 告警信息框输出认购信息页面 告警信息对话框-交易失败页面 文字素材 购买国债就是认购国家借的债即国家债券。它是国家为筹措资金而向投资者出具的书面借款凭证承诺在一定的时期内按约定的条件按期支付利息和到期归还本金。
!-- prj_9_3.html --
!DOCTYPE html
htmlheadmeta charsetutf-8title国债认购/titlestyle typetext/cssfieldset {margin: 0 auto;width: 650px;height: 260px;padding: 30px;}legend,input,label {font-size: 18px;margin: 5px 2px;}p {text-indent: 2em;font-size: 20px;font-weight: bold;}blockquote {text-align: center;}/stylescript typetext/javascript// 通过ID获取页面元素function $(id) {return document.getElementById(id);}// 通过name获取页面一组元素function $name(name) {return document.getElementsByName(name);}// 获取一组单选按钮中选中的单选按钮的valuefunction getRadioValue() {var gzs $name(gz);for (var i 0; i gzs.length; i) {if (gzs[i].checked true) {return gzs[i].value;}}}// 产生6位随机交易码function createCode() {// 第1位验证码数字不能为0,后5位可以是[1,9]之间的数字// 定义两个数字集合var codeset1 new Array(1, 2, 3, 4, 5, 6, 7, 8, 9);var codeset2 new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);// 产生第1位验证码数字var code1 codeset1[Math.floor(Math.random() * codeset1.length)];// 循环产生后5位验证码数字for (var i 0; i 4; i) {code2 codeset2[Math.floor(Math.random() * codeset2.length)]code1 code1 code2}return code1;}// 确认后输入验证码正确提示交易信息错误提示出错信息。function check() {var yn confirm(确认吗);if (yn true) {var ccode createCode()var pass prompt(请输入交易验证码 ccode, )if (pass null) {alert(退出交易);return;} else {if (pass ccode) {var msg 认购金额 $(number).value;alert(msg \n 国债期限利率 getRadioValue() \n交易成功);} else {alert(交易验证码错误退出);}}} else {alert(退出交易);}}/script/headbodyform actionfieldset idlegend aligncenter国债认购/legendp购买国债就是认购国家借的债即国家债券。它是国家为筹措资金而向投资者出具的书面借款凭证承诺在一定的时期内按约定的条件按期支付利息和到期归还本金。/plabel国债期限/labelinput typeradio namegz id value一年3.0% checked /一年3.0%input typeradio namegz id value二年3.35% /二年3.35%input typeradio namegz id value三年3.75% /三年3.75%input typeradio namegz id value五年4.20% /五年4.20%brlabel认购金额/labelinput typenumber name idnumber step5000 min10000 value10000 /blockquoteinput typebutton name id value提交 onclickcheck() /input typereset value重置/blockquote/fieldset/form/body
/html四、课外拓展训练
1.求200以内的素数
求200以内的素数
!-- project_9_1.html --
!doctype html
html langenheadmeta charsetUTF-8title求200以内的素数/title/headbodyh3200以内的素数有/h3script typetext/javascript//var prime true;var primeSum 0;for (var i 2; i 200; i) {var prime true;for (var j 2; j i; j) {if (i % j 0) {prime false;break;}}if (prime) {primeSum;document.write(i );}}document.write(br素数有: primeSum);/script/body
/html2.简易密码验证
输入密码长度少于8个字符时验证界面 输入密码长度大于8个但不包含字母时验证界面 输入密码长度大于8个且包含字母时验证界面
!-- project_9_2.html --
!doctype html
html langenheadmeta charsetUTF-8title简易密码验证/titlescript typetext/javascriptfunction checkKey() {/* 密码验证要求密码长度大于等于8必须含有字母*/var keystr document.myform.key.value; //获取密码 var count 0; //密码中含有字母的个数// 判断密码的长度if (keystr.length 8) {alert(密码长度必须大于等于8,请重输);document.myform.key.value ;} else {//判断密码中是否含有字母Aa-Zzfor (var i 0; i keystr.length - 1; i) {var onechar keystr.charAt(i).toUpperCase() //每次循环取一位字符if (onechar A onechar Z) {count;} //是字母,则计数器加1 }if (count 1) {alert(密码中必须包含一个以上字母,请重输);document.myform.key.value ;} else {alert(密码设置规范);}}}/script/headbodyh3简易密码验证/h3form namemyformlabel用户名/labelinput typetext nameusername value张试验 readonlybrlabel密码/labelinput typepassword namekeybrinput typebutton value验证 onclickcheckKey();input typereset/form/body
/html作者主页 正函数的个人主页 文章收录专栏 Web design 欢迎大家点赞 收藏 ⭐ 加关注哦 如果你认为这篇文章对你有帮助请给正函数点个赞吧如果发现什么问题欢迎评论区留言
