正文
javascript流程图,javascript流程图插件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何用JAVASCRIPT在页面上画流程图
只能用canvas了，
百-度 青春华航，这是我的博客，希望多多交流。
相关问答
Q1: java script 流程图
HTML
HEAD
TITLE New Document /TITLE
script
function jishu1()
{
var s1=0,s2=0;
for(var i=1;i=1000;i++)
{
s1=s1+i;
if(i % 7 ==0)
s2=s2+i;
}
document.getElementById('div1').innerHTML="font color=red能被7整除的整数的和:"+s2+"br 1—1000内所有整数的和:"+s1+"/font";
}
function jishu2()
{
var str="";
for(var i=1;i=9;i++)
{
for(var j=1;j=i;j++)
{
str=str+j+"*"+i+"="+(i*j)+" ";
}
str=str+"br ";
}
document.getElementById('div2').innerHTML=str;
}
function jishu3()
{
var sum=0;
for(var i=1;i=999;i++)
{
sum=sum+1/i;
}
document.getElementById('div3').innerHTML=sum;
}
function jishu4()
{
var s=0;
for(var i=1;i=500;i++)
{
if (i % 17 ==0)
{
s++;
}
}
document.getElementById('div4').innerHTML="1—500内能被17整除的整数的个数:"+s;
}
function jishu5()
{
var str="";
var s="";
var aa="500";
for(var i=500;i=1000;i++)
{
s=i+"";
if(s.charAt(s.length-1)=='0')
{
str=str+i+"br";
}
}
document.getElementById('div5').innerHTML=str;
}
/script
/HEAD
BODY
p第一题：
请计算1—1000内所有整数的和
以及所有能被7整除的整数的和
提示： 使用一次循环(for)，以及一次判断(if)
需要输出两个变量： zonghe , heji7 /p
input type=button value="计算" onclick="jishu1();"/
hr
div id="div1"/div
p请输出一个乘法口诀表
/p
input type=button value="计算" onclick="jishu2();"/
hr
div id="div2"/div
p请计算1+1/3+1/5+1/7+......+1/999的和
/p
input type=button value="计算" onclick="jishu3();"/
hr
div id="div3"/div
p请统计1—500内能被17整除的整数的个数
/p
input type=button value="计算" onclick="jishu4();"/
hr
div id="div4"/div
p请输出所有500—1000内所有末位数是0的数字
/p
input type=button value="计算" onclick="jishu5();"/
hr
div id="div5"/div
/BODY
/HTML
Q2: ProcessOn画流程图网站，使用什么技术做的
前端是用Javascript操作canvas绘出各个元素（因此一些老的浏览器，如IE6、7等，无法使用），这些元素都是预定义的（包括rectangle, teardrop, standardImage等等），因此在浏览器中可以任意缩放而不失真。
保存到后端的时候将整个画布和元素的属性定义用json（具体格式可以看.pos文件或者看POST的内容）传到服务器（应该是java实现的），重新绘制成PNG（他们的PDF就是PNG转的，所以无法矢量缩放）提供用户下载
Q3: react native 回传的代码怎么调用
开发环境配置
1.需要一台Mac(OSX)，上面要安装Xcode(建议Xcode7及以上的版本)，Xcode可以在Mac App Store下载
2.安装Homebrew，后面安装Watchman和Flow推荐使用Homebrew安装
ruby -e "$(curl -fsSL )"
如果之前安装过Homebrew，可以先更新下：
brew update brew upgrade
3.安装node.js
(1)安装nvm(Node Version Manager)
curl -o- | bash
(2)安装最新版本的Node.js
nvm install node nvm alias default node
当然可以直接到Node.js官网下载dmg文件直接安装，下载地址是
4.建议安装watchman：
brew install watchman
5.安装flow：
brew install flow
ok，按照以上步骤，你应该已经配置好了环境。
在现有项目中集成
1.CocoaPods
推荐使用CocoaPods的方式进行集成，如果没有使用过，可以参考《使用CocoaPods管理iOS项目中的依赖库》这篇文章安装配置。
2.安装react-native package
react native现在使用npm的方式进行安装
(1)如果没有安装Node.js,需要按照前面的方式进行安装
(2)安装完Node.js之后再项目根目录(.xcodeproj文件所在目录)下执行npm install react-native的命令，执行完成之后会创建一个node_modules的文件夹。
3.修改Podfile配置
在项目根目录下的Podfile（如果没有该文件可以使用pod init命令生成）文件中加入如下代码：
pod 'React', :path = './node_modules/react-native', :subspecs = [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
#添加其他需要的subspecs
]
如果你在项目中使用了Text的组件，那么你必须添加RCTText的subspecs。配置完成之后执行pod install即可。
4.编写React Native代码
(1)在项目的根目录创建存放React Native代码的目录：
mkdir ReactComponent
(2)新建一个示例的index.ios.js的代码
touch ReactComponent/index.ios.js
index.ios.js文件内容，示例如下：
'use strict';
var React = require('react-native');
var {
Text,
View
} = React;
var styles = React.StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red'
}
});
class SimpleApp extends React.Component {
render() {
return (
View style={styles.container}
TextThis is a simple application./Text
/View
)
}
}
React.AppRegistry.registerComponent('SimpleApp', () = SimpleApp);
SimpleApp即为你的Module Name,在后面会使用到。
5.在项目中加载React Native代码
React Native不是通过UIWebView的方式进行代码的加载，而是使用了RCTRootView自定义的组件。RCTRootView提供了一个初始化的方法，支持在初始化视图组件的时候加载React的代码。
- (instancetype)initWithBundleURL:(NSURL *)bundleURL
moduleName:(NSString *)moduleName
initialProperties:(NSDictionary *)initialProperties
launchOptions:(NSDictionary *)launchOptions;
使用方式如下：
NSURL *jsCodeLocation = [NSURL URLWithString:@""];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName: @"SimpleApp"
initialProperties:nil
launchOptions:nil];
[self.view addSubview:rootView];
rootView.frame = self.view.bounds;
需要指出的是在初始化的时候支持通过URL的方式进行加载，上面的方法是在线的服务器地址使用在发布环境下替换localhost为正式服务器的地址，另外一个是Bundle的路径地址,示例如下：
NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
为了生成jsbundle文件，可以通过下面的命令：
curl -o main.jsbundle
6.启动Development Server
终端进入项目所在根目录，执行下面的代码
(JS_DIR=`pwd`/ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR)
启动完成之后可以通过：进行调用
Native和React的交互
关于React Native的通信机制，这里不再介绍，推荐两篇文章：
1.《React Native通信机制详解》
2.《React Native 初探（iOS）》
通信的流程图如下：
React Native中JavaScript和Native之间交互是同Module的方式进行的。Module是一个实现RCTBridgeModule协议的普通Objective-C的类，示例如下：
在.h文件中实现RCTBridgeModule的协议，示例如下：
//CalendarManager.h
#import "RCTBridgeModule.h"
@interface CalendarManager : NSObject RCTBridgeModule
@end
在.m文件中声明是Module，添加RCT_EXPORT_MODULE的标记，示例如下：
// CalendarManager.m
@implementation CalendarManager
RCT_EXPORT_MODULE();
@end
1.JavaScript调用Native Method
(1)Native的Module中使用RCT_EXPORT_METHOD()标记方法:
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location) {
RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);
}
(2)在JavaScript代码中使用
var CalendarManager = require('react-native').NativeModules.CalendarManager;
CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey');
2.Native发送Events - JavaScript
在西北督查中心项目表单的填写页面上右上角放了一个提交按钮，点击提交按钮后iOS的Objective-C会向React的Javascript代码发送消息，代码示例如下：
NSDictionary *parameters = @{@"data":@"hello"};
[self.rootView.bridge.eventDispatcher sendDeviceEventWithName:@"DemoEventName" body:parameters];
JavaScript端的处理代码如下：
var subscription;
//在组件mount的时候注册
subscription = DeviceEventEmitter.addListener('DemoEventName', (data) = {
//todo something
});
//在组件unmount的时候移除
subscription.remove();
