找回密码
当前位置：前端开发者 > 教程 > 正文

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

2018-06-19 23:14:36 分类：教程 阅读(345) 评论(0)
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”&gt;
</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”&gt;
<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>
//将js代码放入noscript标签内，屏蔽js
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&quot;;
}
}
//通过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
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论