前端html和js可以做什么？

最基本的就是开发网页啦，html写网页，js实现网页交互效果，除此之外，也可以开发桌面GUI程序，下面我简单介绍一下如何使用html+js开发出一个简单的桌面程序：

1.这里为了更好的说明问题，我新建了一个html文件，就是一个简单的登录页面，源码如下，非常简单，就是两个输入框和禅歼卜一个登录按钮：

浏览器运行的效果如下：

2.接着就可以将这个html网页打包为桌面应该程序，这里需要用到nodejs的Electron功能，下面我具体介绍一下主要步骤及截图：

首先，需要安装本地node环境，这个直接到官网上下载就行，如下，选择适合自己平台的版本即可：

安装完成后，需要下载一下electron和electron-packager这2个包，后面的打包需要借助这2个包，命令“npminstallelectronelectron-packager”，如下：

接着新建一个文件夹，将刚才的html文件拖拽进去，同时新建一个package.json文件和一个main.js文件，如下：

package.json文件配置如下，主要指明应用名称、版本号及打包配置文件：

main.js文件配置如下，这里需要指明打包程序的入口文件，网上也有详细配置过程：

最后就是在打包程序了，命令“electron-packager.APP--win--outAppDir--arch=x64--electron-version=3.0.10--overwrite”，打包的过程非常快，这里主要需要指明打包的应用名称、输出目录、版本号、位数等：

接着就可以在输出目录AppDir中找到打包好的应用程序APP.exe，直接双击就能打开，截图如下，和浏览器效果差不多：

至此，我们就完成了利用html+js来开发一个简单的桌面GUI程序。总的来说，整个过程不难，就是步骤有些繁琐，只要你熟悉一下上面的配置过程，多 *** 作几遍，很快就能掌握的，当改衫然，你也可以使用html+js开发移动应用，像HBuilder等，网上也有相关教程和资料，介绍的非常详细，感兴趣的话，可以搜一下，希望以贺穗上分享的内容能对你有所帮助吧，也欢迎大家评论、留言。

一般来说直接用Javascript创建的话只支持IE，代码如下：

functionCreateShortcut() { 

    try{ 

        varfso = newActiveXObject("Scripting.FileSystemObject") 

        varshell = newActiveXObject("WScript.Shell") 

        vartagFolder = shell.SpecialFolders("Desktop") 

        if(!fso.FolderExists(tagFolder )) { 

            fso.CreateFolder(tagFolder) 

        } 

        if(!fso.FileExists(tagFolder + "\\乐猪软件.lnk")) { 

            varWshSysEnv = shell.Environment("Process") 

            iLocal = (WshSysEnv.Item("SystemRoot") +"\\1.ico") //下载到C:\windows\1.ico 

            iRemote = ("/Images/2.ico") //先下载图标文件，再用自定义图标把首页的图标地址替换 

            varxPost = newActiveXObject("Microsoft.XMLHTTP") 

            xPost.Open("GET", iRemote, 0) 

            xPost.Send() 

            varsGet = newActiveXObject("ADODB.Stream") 

            sGet.Mode = 3 

            sGet.Type = 橘扰闹1 

            sGet.Open() 

            sGet.Write(xPost.ResponseBody ) 

            sGet.SaveToFile( iLocal,2) 

            varlink = shell.CreateShortcut(tagFolder + "\\编程入门管理系统.lnk") 

            link.Description = "打开基本软件李皮的快捷方式" 

            link.Hotkey = "Ctrl+Alt+e" 

            link.TargetPath = "http://www.lezhu99.com/" 

            link.IconLocation=iLocal 

            link.WindowStyle = 3 

   圆罩         link.WorkingDirectory = "c:\\blah" 

            link.Save() 

            alert("恭喜！快捷方式创建成功！") 

        } 

    } 

    catch(ex){ 

        alert("快捷方式创建失败，可能浏览器不支持！") 

    } 

}

为了支持所有浏览器，我们可以用动态语言来做。

1.php代码：

<?php 

$Shortcut = "[InternetShortcut] 

URL=http://www.0356sh.com 

IconFile=http://www.0356sh.com/favicon.ico 

IconIndex=0 

HotKey=1613 

IDList= 

[{000214A0-0000-0000-C000-000000000046}] 

Prop3=19,2" 

header("Content-Type: application/octet-stream") 

header("Content-Disposition: attachment filename=晋城生活服务.url") 

echo $Shortcut 

?>

HTML中的代码：

<a href="1.php" target="_blank">创建桌面快捷方式</a>

---