js 生成HTML

jaywcjlove · Apr 18, 2015 · 5b22e6f · 5b22e6f
1 parent 9402f82
commit 5b22e6f
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,14 @@
-#升级浏览器
+#升级浏览器
+
+
+
+## 调用方法
+
+```js
+window.outdatedbrowser({
+    "firefox":{
+        "url":"http://baidu.com"
+    }
+
+})
+```
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" type="text/css" href="outdatedbrowser.css">
 </head>
 <body>
-<div class="outdatedbrowser">
+<!-- <div class="outdatedbrowser">
     <h1>请更新浏览器</h1>
     <span class="split"></span>
     <a class="browser chrome" href="#">
@@ -36,9 +36,17 @@ <h2><i class="icon"></i>OPERA</h2>
         <h4>在以下操作系统可用 </h4>
         <p><span class="windows">Windows</span><span class="windows">Mac OS</span><span class="windows">Linux</span></p>
     </a>
-</div>
+</div> -->
 <script type="text/javascript">
-    // window.outdatedbrowser()
+    window.outdatedbrowser({
+        "firefox":{
+            "url":"http://baidu.com"
+        }
+
+    })
+
+    var  a = new outdatedbrowser()
+    console.log(a.browser)
 </script>
 </body>
 </html>
diff --git a/outdatedbrowser.js b/outdatedbrowser.js
@@ -1,35 +1,56 @@
 (function(window,document) {
-	window.outdatedbrowser=function(){
+
+	window.outdatedbrowser=function(json){
 		this.container = document.createElement('div'),
+		this.container.className = 'outdatedbrowser'
 		this.browser = {
-				"firefox":{
-					"url":"http://www.mozilla.org/firefox/new/",
-					"available":["windows","mac","linux"],
-					"title":"Mozilla Firefox"
-				},
-				"internetExplorer":{
-					"url":"http://windows.microsoft.com/en-us/internet-explorer/download-ie",
-					"available":["windows"],
-					"title":"INTERNET EXPLORER"
-				},
-				"chrome":{
-					"url":"http://www.google.com/chrome",
-					"available":["windows","mac","linux"],
-					"title":"GOOGLE CHROME"
-				},
-				"safari":{
-					"url":"http://support.apple.com/downloads/#safari",
-					"available":["mac"],
-					"title":"APPLE SAFARI"
-				},
-				"safari":{
-					"url":"http://www.opera.com/download",
-					"available":["windows","mac","linux"],
-					"title":"OPERA"
-				}
+			"firefox":{
+				"url":"http://www.mozilla.org/firefox/new/",
+				"available":["windows","mac","linux"],
+				"title":"Mozilla Firefox"
+			},
+			"internetExplorer":{
+				"url":"http://windows.microsoft.com/en-us/internet-explorer/download-ie",
+				"available":["windows"],
+				"title":"INTERNET EXPLORER"
+			},
+			"chrome":{
+				"url":"http://www.google.com/chrome",
+				"available":["windows","mac","linux"],
+				"title":"GOOGLE CHROME"
+			},
+			"safari":{
+				"url":"http://support.apple.com/downloads/#safari",
+				"available":["mac"],
+				"title":"APPLE SAFARI"
+			},
+			"opera":{
+				"url":"http://www.opera.com/download",
+				"available":["windows","mac","linux"],
+				"title":"OPERA"
 			}
+		}
 
-		container.innerHTML = "content"
+		this.html = ''
+		this.html += '<span class="split"></span>'
+		for (var a in this.browser) {
+			this.html += temp('<a class="browser $class$" href="$url$"> <h2><i class="icon"></i>$title$</h2> <span class="btn">下载</span> <h4>在以下操作系统可用 </h4> <p>$available$</p> </a>',{
+				class:a,
+				title:this.browser[a].title,
+				available: '<span>' +this.browser[a].available.join('</span> <span>') + '</span>',
+				url:this.browser[a].url
+			})
+		};
+		container.innerHTML = this.html 
 		document.body.appendChild(container)
 	}
+	function isVal (ty) {
+		// body...
+	}
+	function temp(str,obj){
+        return str.replace(/\$\w+\$/gi, function(matchs) {
+            var returns = obj[matchs.replace(/\$/g, "")];
+            return typeof returns === "undefined" ? "" : returns;
+        });
+    }
 })(window,document)