【总结】通过例子掌握Web开发

由前端开发者 · 2018年6月19日23:14:36

摘要： web前端开发和网页设计区别|网页前端的开发阶段|网页设计前端开发自学一：页面特效 1.history对象，用来存储浏览器历史记录，正数边上前进页面，负数表示后退页面，如要后退两页则：history.go(-2) 2.保护自己……

web前端开发和网页设计区别|网页前端的开发阶段|网页设计前端开发自学

一：页面特效

1.history对象，用来存储浏览器历史记录，正数边上前进页面，负数表示后退页面，如要后退两页则：history.go(-2)

2.保护自己的网页不被放入框架：if(self != top){

top.location = self.location;

}//判断当前页面是否为top层，如果不是，置为top

3.当前网页调用其他网页

//1使用iframe

//2object标签

</object>

4.定义网页的关键字

5.禁止页面加入缓存

//HTTP-EQUIV相当于HTTP文件头，其可以向浏览器回传一些有用信息，以帮助正确和精确地显示网页内容，CONTENT中的内容其实就是各个参数的值

6.离开页面时弹出对话框

<head><title>page title</title></head>

</body>

</html>

//使用onUnload事件触发

7.判断页面是否添加了W3C声明

if(document.compatMode==”CSS1Compat”){

alert(“已添加W3C声明”);

}

//使用document.compatMode的值来判断

8.屏蔽网页中的脚本

…

</script>

</noscript>

//将js代码放入noscript标签内，屏蔽js

9.在网页中动态添加script脚本

var o = document.createElement(“script”);

o.text = “alert(‘test’)”;

document.documentElement.childNodes[0].appendChild(o);

</script>

10.随机修改页面标题

var til = new Array(5);

til[0] = “Number 1”;

til[2] = “Number 2”;

til[3] = “Number 3”;

til[4] = “Number 4”;

var indextitle = Math.floor(Math.random()*til.length);

onload = function chaTitle(){

var curTitle = til[indextile];

window.document.title+=’-‘+curTile;

}

二：按钮特效

1.动态创建按钮function addInput(){

var o = document.createElement(“input”);

o.type = “button”;

o.value = “按钮”;

o.attachEvent(“onclick”,addInput);

document.body.appendChild(o);

o=null;

}

2.取得控件绝对位置

function getAddress(e){

var t = e.offsetTop;

var l = e.offsetLeft;

}

3.防止按钮连击

function doubleCheck(){

if(window.document.readyState!=null && window.document.readyState !=’complete’)//判断页面是否执行完毕

{}

else{}

}

三：字符串文本及输入框等

1.禁止文本框的复制和黏贴

代码片段 1

<!DOCTYPE html>

<head>

<title>h5前端开发是什么</title>

</head>

<body>

test whether can be paste

</textarea>

</body>

</html>

2.通过name直接获取form及元素

使用document对象根据form的name属性直接取得form，同样方法取得form中元素

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</form>

window.onload=function(){

varform= document.subForm;

console.log(form.userName.value);

}

</script>

</body>

</html>

3.判断字符串中有多少汉字

function cal(str){

re = /[\u4E00-\u9FA5]/g;

if(re.test(str))

return str.match(re).length

else

return 0;

}

4.textarea滚动//通过设置元素的scrollTop属性来控制滚动条

text1.scrollTop = text1.scrollHeight;//表示将滚动条移动到最低端，同样，设置0则移动到最上

5.遍历26个英文字母

for(var i=0;i<26;i++){

tempStr = String.fromCharCode(65+i);

console.log(tempStr);

//通过fromCharCode方法遍历，获得大写字母，65位大写字母A的Unicode,小写a为97

}

四：鼠标特效1.禁用鼠标右键

代码片段 2

<!DOCTYPE html>

<head>

<title>前端开发用的是什么原因</title>

</head>

<body>

function click() {

if (event.button == 2) {

alert(‘禁止右键’);

}

document.onmousedown = click;

</script>

</body>

</html>

//使用onmousedown捕获鼠标事件，event.button判断游湖单机按键，1为左键2为右键

2.鼠标滚轮事件

代码片段 3

<!DOCTYPE html>

<head>

<title>前端开发有什么职位的亮点</title>

</head>

<body>

function wheel() {

alert(“mouse wheels”);

}

document.onmousewheel = wheel; //使用onmousewheel绑定

</script>

</body>

</html>

六：下拉列表特效

1.下拉列表分组(使用optgroup属性分组设置multiple属性可以控制多选)

代码片段 4

<!DOCTYPE html>

<head>

<title>适合前端开发人员的书籍</title>

</head>

<body>

</optgroup>

</optgroup>

</select>

</body>

</html>

2.获取下拉列表框的选择

function mySelect(){

var mysel = document.getElementById(“select1”);

var txt = mysel.options[mysel.options.selectedIndex].text;//获取下拉列表显示的文本

var valu = mysel.options[mysel.options.selectedIndex].value;//获取下拉列表的值

}

七：键盘操作和状态栏特效

1.按功能键返回首页

<font size=”2″>function goHome(){

if(event.keyCode == 119){

document.location.href=”http://www.g.cn";

}

//通过event的keyCode来判断按键,F1~F12的键值分别是112~123</font>

2.Enter键实现Tab键功能

<font size=”2″>function changeFocus(){

if(event.keyCode ==13){

event.keyCode=9;

}//Enter的值为13，Tab键值为9

}</font>

3.Ctrl+Enter提交数据

<font size=”2″>if(event.ctrlKey && window.event.keyCode==13){

this.document.form1.submit();

}</font>

4.捕获方向键

<font size=”2″>function check(){

if(event.keyCode=”37″){

console.log(“Left”);

}

//37~40分别表示左，上，右，下</font>

十：单选按钮和复选框

1.选择了哪一个单选按钮代码片段 5

<!DOCTYPE html>

<head>

<title>前端开发和设计接活费用</title>

</head>

<body>

<input name=”radio1″ type=”radio” value=”sports” />sports

<input name=”radio1″ type=”radio” value=”travel” />travel

function checkradio() {

var parms = document.getElementsByName(“radio1”);

for (var i = 0; i < parms.length; i++) {

if (parms[i].checked)

alert(“You choose:” + parms[i].value);

}

</script>

</body>

</html>

</font>

2.选中复选框求和代码片段 6

<!DOCTYPE html>

<head>

<title>前端开发语言的种类对比</title>

</head>

<body>

<input type=”checkbox” value=”11″ name=”items” />11

<br/>

<input type=”checkbox” value=”22″ name=”items” />22

<br/>

<input type=”checkbox” value=”33″ name=”items” />33

<br/>

<input type=”checkbox” value=”44″ name=”items” />44

<br/>

function dataCal() {

var sum = 0;

var obj = document.getElementsByName(“items”);

for (var i = 0; i < obj.length; i++) {

if (!obj[i].checked) //此属性返回true或flase，则需要选中次复选框只需设置checked=true，未选中则checked=false

continue;

sum += parseFloat(obj[i].value);

}

alert(“sum:” + sum);

}

</script>

</body>

</html>

十一：颜色处理和菜单特效

1.下拉菜单

function startList(){

if(document.all && document.getElementById){

navRoot = document.getElementById(“mynav”);

for(var i=0;i<navRoot.childNodes.length;i++){//通过childeNodes获取子元素

node = navRoot.childNodes[i];

if(node.nodeName==”li”){

node.onmouseover=function(){

this.className+=” over”;}//获取元素的className

onde.onmouseout = function(){

this.className = this.className.replace(” over”,””);

}

十三：日期和时间特效

1.指定时间关闭页面代码片段 7

<!DOCTYPE html>

<head>

<title>当设计师遇上前端开发人员</title>

</head>

<body>

function closepage() {

var time = document.getElementById(‘ct’);

if (!isNaN(time.value)) {

alert(time.value * 1000);

setTimeout(“closeP()”, time.value * 1000);

} else {

time.value = “”;

}

function closeP() {

window.close() || window.open(“”, “_self”).close();

}

</script>

</body>

</html>

2.获取时间的简单方法

代码片段 8

<!DOCTYPE html>

<head>

<title>前端通用组件设计和开发</title>

</head>

<body>

<div>

</div>

function getdate() {

var now = new Date();

var str = now.getFullYear() + “-” + now.getMonth() + “-” + now.getDay();

alert(str);

}

function getCertainDate(date) {

var timestamp = document.getElementById(‘ct’).value;

var certainDate = new Date(timestamp * 1000);

var str = certainDate.getFullYear() + “-” + certainDate.getMonth() + “-” + certainDate.getDay();

alert(str);

}

</script>

</body>

</html>

3.时间相加

var d =new Date(“2007/6/12”);

d.setDate(d.getDate()+35);//add 35 days

4.标题栏显示时间代码片段 9

<!DOCTYPE html>

<head>

<title>从原型设计到前端开发</title>

</head>

<body>

var clocktext;

var pagetitle = document.title;

function viewTime() {

today = new Date();

sec = today.getSeconds();

hr = today.getHours();

min = today.getMinutes();

if (hr <= 9) hr = 0 + hr;

if (min <= 9) min = “0” + min;

if (sec <= 9) sec = “0” + sec;

var clocktext = ” Time: ” + hr + “:” + min + “:” + sec;

clocktimer = setTimeout(“viewTime()”, 1000);

document.title = pagetitle + clocktext;

}

viewTime();

</script>

</body>

</html>

5.倒计时,剩余天数显示代码片段 10

<!DOCTYPE html>

<head>

<title>前端设计和开发主要干什么</title>

</head>

<body>

var deadline = new Date(“08/08/2017”);

var now = new Date();

var leave = deadline.getTime() – now.getTime();

var day = Math.floor(leave / (1000 * 60 * 60 * 24));

if (day > 0) {

document.write(day + ” days leave”);

} else if (day == 0) {

document.write(“Today is the day”);

} else {

document.write(“The day has passed”);

}

</script>

</body>

</html>

6.计算用户停留时间

代码片段 11

<!DOCTYPE html>

<head>

<title>前端设计策划与开发</title>

</head>

pageOpenTime = new Date();

function goodbye() {

pageCloseTime = new Date();

minutes = (pageCloseTime.getMinutes() – pageOpenTime.getMinutes());

seconds = (pageCloseTime.getSeconds() – pageOpenTime.getSeconds());

time = (seconds + (minutes * 60));

alert(“total seconds:” + time);

}

</script>

</body>

</html>

十四：数字数组函数1.边打字边显示字数代码片段 12

<!DOCTYPE html>

<head>

<title>前端设计模式与开发实践</title>

</head>

<body>

<br>

function Check(txt) {

TextCount = txt.value.length;

div1.innerText = TextCount;

}

</script>

</body>

</html>

前端开发和设计哪个更适合女生|前端开发设计难吗|web前端设计与开发文献

» 本文来自：前端开发者 » 《【总结】通过例子掌握Web开发》

» 本文链接地址：https://www.rokub.com/3960.html

» 您也可以订阅本站：https://www.rokub.com

【总结】通过例子掌握Web开发

You may also like...

发表评论取消回复

前端开发者/SEO-技术群/抢票群(加本人微信拉群）

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

【总结】通过例子掌握Web开发

You may also like...

Web前端 html css js基础知识点

ie6浏览器兼容性前端开发及常见bug详细汇总

gulp前端开发环境-零基础详细教程

发表评论 取消回复

前端开发者/SEO-技术群/抢票群(加本人微信拉群）

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

发表评论取消回复