【总结】通过例子掌握Web开发
摘要： 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 type=”text/x-scriptlet” width=”150″ height=”100″ data=”http://www.aaa.com”>
</object>
4.定义网页的关键字
<meta name=”keywords” content=”net,enterprise,ERP,c#”>
5.禁止页面加入缓存
<meta HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>
//HTTP-EQUIV相当于HTTP文件头，其可以向浏览器回传一些有用信息，以帮助正确和精确地显示网页内容，CONTENT中的内容其实就是各个参数的值
6.离开页面时弹出对话框
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head><title>page title</title></head>
<body onUnload=”window.alert(‘welcome’)”>
</body>
</html>
//使用onUnload事件触发
7.判断页面是否添加了W3C声明
if(document.compatMode==”CSS1Compat”){
alert(“已添加W3C声明”);
}
//使用document.compatMode的值来判断
8.屏蔽网页中的脚本
<noscript>
<script>
…
</script>
</noscript>
9.在网页中动态添加script脚本
<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>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,minmun-scale=0.5″>
<title>h5前端开发是什么</title>
</head>
<body>
<textarea cols=50 rows=5 oncopy=”document.selection.empty()” onpaste=”return false”>
test whether can be paste
</textarea>
</body>
</html>
2.通过name直接获取form及元素
使用document对象根据form的name属性直接取得form，同样方法取得form中元素
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,minmun-scale=0.5″>
<title>Document</title>
</head>
<body>
<form name=”subForm”>
<input type=”text” name=”userName” value=”This is a test value” />
</form>
<script type=”text/javascript”>
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>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
<title>前端开发用的是什么原因</title>
</head>
<body>
<script type=”text/javascript”>
function click() {
if (event.button == 2) {
alert(‘禁止右键’);
}
}
document.onmousedown = click;
</script>
</body>
</html>
//使用onmousedown捕获鼠标事件，event.button判断游湖单机按键，1为左键2为右键
2.鼠标滚轮事件
代码片段 3
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
<title>前端开发有什么职位的亮点</title>
</head>
<body>
<script type=”text/javascript”>
function wheel() {
alert(“mouse wheels”);
}
document.onmousewheel = wheel; //使用onmousewheel绑定
</script>
</body>
</html>
六：下拉列表特效
1.下拉列表分组(使用optgroup属性分组设置multiple属性可以控制多选)
代码片段 4
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
<title>适合前端开发人员的书籍</title>
</head>
<body>
<select multiple=””>
<optgroup label=”山东省”>
<option>济南</option>
<option>青岛</option>
</optgroup>
<optgroup label=”河北省”>
<option>保定</option>
<option>沧州</option>
</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
<font size=”2″>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
<title>前端开发和设计接活费用</title>
</head>
<body>
<input name=”radio1″ type=”radio” value=”sports” />sports
<input name=”radio1″ type=”radio” value=”travel” />travel
<input type=”button” name=”btn1″ value=”check” onclick=”checkradio()” />
<script type=”text/javascript”>
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>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
<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/>
<input type=”button” value=”sum” onclick=”dataCal()” />
<script type=”text/javascript”>
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>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>当设计师遇上前端开发人员</title>
</head>
<body>
<input type=”text” style=”width:200px;height: 40px;” id=’ct’ value=”1″ placeholder=”input seconds,pure number” />
<input type=”button” value=”click me” onclick=”closepage()”>
<script type=”text/javascript”>
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>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>前端通用组件设计和开发</title>
</head>
<body>
<input style=”margin-left: 210px;” type=”button” value=”get now date” onclick=”getdate()”>
<div>
<input type=”text” style=”width:200px;height: 20px;” id=’ct’ value=”1448873291″ placeholder=”input timestamp” />
<input type=”button” value=”get now date” onclick=”getDateByTimeStamp()”>
</div>
<script type=”text/javascript”>
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>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>从原型设计到前端开发</title>
</head>
<body>
<script type=”text/javascript”>
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>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>前端设计和开发主要干什么</title>
</head>
<body>
<script type=”text/javascript”>
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>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>前端设计策划与开发</title>
</head>
<body onunload=”goodbye()”>
<script type=”text/javascript”>
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>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>前端设计模式与开发实践</title>
</head>
<body>
<textarea onkeyup=”Check(this)” onkeydown=”Check(this)”></textarea>
<br>
<div id=”div1″></div>
<script type=”text/javascript”>
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
近期评论