自己学js代码常用（二）

最新推荐文章于 2023-10-24 22:05:07 发布

J_csdn_WEB

最新推荐文章于 2023-10-24 22:05:07 发布

阅读量425

点赞数 2

分类专栏：前端自己学习知识点

本文链接：https://blog.csdn.net/J_CSDN19/article/details/81779608

版权

自己学习知识点同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

JS九九乘法表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
	table{
		width:800px;
		border-collapse:collapse;
		border:1px solid blue;
		text-align:center;
	}
	tr,td{
		border:1px solid blue;
		padding:5px;
	}

</style>
</head>

<body>
<script>
	document.write("<table>");
	for(var i=1; i<=9; i++){
		document.write("<tr>");
		for(var j=1; j<=i; j++){
			document.write("<td>");
			document.write(j+"*"+i+"="+j*i);
			document.write("</td>");
		}
		document.write("</tr>");
	}
	document.write("</table>");
</script>
</body>
</html>

JS冒泡排序法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>排序</title>
</head>
<script type="text/javascript">
   function m(arr){
	   var temp;
	   for(var i=0;i<arr.length;i++){
		   for(var j=i+1;j<arr.length;j++){
		     if(arr[j]>arr[i]){
			 temp=arr[j];
			 arr[j]=arr[i];
			 arr[i]=temp;
		   }
	    }
	 };
	 return arr;
   }
   var array=[85,33,63,17,31,17,86];
   var s=m(array);
   document.write(s);
</script>
<body>
</body>
</html>

JS百度搜索框联想词提示代码

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS百度搜索框联想词提示代码 </title>
    <!--这里为了简写，就直接在HTML中写了-->
    <style>

        *{
            margin: 0;
            padding: 0;
        }
        #out{
            width:500px;
            height:140px;
            margin: 160px 350px;
        }
        #ser_box{
            width:500px;
            height:32px;
            border: 1px solid blue;
            text-align: center;
        }
        #ipt{
            width:480px;
            height: 26px;
            margin-top: 2px;
            border: 0;
            outline: 0;
            font-family: "微软雅黑";
            font-size: 16px;
        }

        #bot_box{
            width:500px;
            border: 1px solid #4C9ED9;
            border-top: none;
            display: none;
        }

        #bot_box ul li{
            list-style: none;
            line-height: 25px;
            padding-left: 10px;
        }
        #bot_box ul li:hover{
            background: #BCBCBC;
        }
        .s_btn {
            position:relative;
            left:300px;
            top:-31px;
            width: 100px;
            height: 36px;
            color: #fff;
            font-size: 15px;
            letter-spacing: 1px;
            background: #3385ff;
            border-bottom: 1px solid #2d78f4;
            outline: medium;
        }

        .sel{
            background:#BCBCBC;
        }

    </style>

</head>
<body>
<div id="out">
    <div id="ser_box">
        <input type="search" id="ipt"/><span><input id="su" value="搜索一下" class="bg s_btn" type="submit"></span>
    </div>
    <div id="bot_box">
        <ul id="oul"></ul>
    </div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
    <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
<script>
    function $(id) {
        return document.getElementById(id);
    }

    var ipt = $("ipt");
    var ser = $("ser_box");
    var bot = $("bot_box");
    var oul = $("oul");


    ipt.oninput = function() {
        var ss = ipt.value;
        var url = "http://suggestion.baidu.com/su?cb=queryList&wd=" + ss;
        addScript(url);
    }

    ipt.onfocus = function() {
        var ss = ipt.value;
        var url = "http://suggestion.baidu.com/su?cb=queryList&wd=" + ss;
        addScript(url);

    }

    function queryList(data) {
        ss=document.getElementsByTagName("script")[0];
        var arr = data.s;
        oul.innerHTML = "";
        if(arr.length == 0) {
            bot.style.display = "none";
        } else {
            bot.style.display = "block";
        }

        for(var i = 0; i < arr.length; i++) {
            li = document.createElement("li");
            li.innerHTML = arr[i];
            li.onclick = function() {
                oul.innerHTML = "";
                ipt.value = this.innerHTML;
                bot.style.display = "none";
            }
            oul.appendChild(li);
        }
        document.body.removeChild(ss);
    }

    function addScript(url) {
        var s = document.createElement("script");
        s.src = url;
        s.type = "text/javascript";
        document.body.appendChild(s);
    }

    /*取li*/

    lis = document.getElementsByTagName("li");

    /*按键*/
    var i = 0;
    document.onkeydown = function(ev) {

        if(bot.style.display == "block") {
//            40是按下键
            if(ev.keyCode == 40) {
                for(var j = 0; j < lis.length; j++) {
                    if(lis[j].className == "sel") {
                        lis[j].className = "";
                    }
                }

                if(i < lis.length) {
                    lis[i].className = "sel";
                    i++;
                    if(i == lis.length) {
                        i = 0;
                    }
                }
            }
//            38是按上键
            if(ev.keyCode == 38) {
                 m = 0
                for(; m < lis.length; m++) {
                    if(lis[m].className == "sel") {
                        lis[m].className = "";
                        break;
                    }
                }
                i = m;
                if(m > 0) {
                    lis[m - 1].className = "sel";
                } else {
                    lis[lis.length - 1].className = "sel";
                }
            }
//            13是按enter键
            if(ev.keyCode == 13) {
                for(var n = 0; n < lis.length; n++) {
                    if(lis[n].className == "sel") {
                        ipt.value = lis[n].innerHTML;
                    }
                }
                bot.style.display = "none";
            }
        } else {
            i = 0;
            m = 0;
        }
    }

</script>
</body>
</html>

js内置数据类型

J_csdn_WEB

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
自己学js代码常用（二）

JS九九乘法表&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;..
复制链接

扫一扫

专栏目录